セレクターを組み合わせて自由に指定する方法（結合子）
CSSには、複数の組み合わせ方法があり、それらを使いこなすことで、より短く記述したり、自由に装飾することができます。
その組み合わせの際に使う記号のことを、結合子といいます。
どんな組み合わせ方法があるのか、どの結合子を使うのか把握しておきましょう。
目次から読む
結合子を使ってセレクターを組み合わせる
| 係合方法 | 結合子 | 意味 | 具体例 |
| a, b | , (コンマ) | aとb | p, div |
| ab | 結合子なし(スペースもなし) | bが付与されたa | h2.info |
| a > b | >(大なり) | aの直下の階層にあるb | h2 > div |
| a b |
半角空白 |
aの下の階層にあるb | h2 div |
| a + b | +(プラス) | aの直後にあるb | div + div |
カンマ区切りで組み合わせる方法
カンマ区切りは下のようにたとえば
pタグとdivタグだけに適用されます。
何個でも指定できます。
並べてくっつける方法（結合子なし）
h2とinfoクラスなら、h2.infoとします。
h2のinfoクラスがついたものが指定されます。
h2とinfoのidなら、h2#infoとします。
h2のinfoのidがついたものが指定されます。
h2とinfoのidのtxtクラスなら、h2#info.txtとします。
h2のinfoのidがついたtxtクラスのものが指定されます。
注意点としては、h2h3のように要素同士をくっつけることはできません。
また、スペースを入れると意味が変わってしまうので注意しましょう。
>(大なり)でくっつける方法
これは、h2の直下のdivタグを指定していることになります。
親要素>直下の子要素のみ指定する方法です。
下の半角空白でくっつける方法と間違わないように違いを知っておきましょう。
半角空白でくっつける方法
これだとh2の中のどのdivの要素にスタイルを適用できます。
親要素の中の指定した子要素すべてということになります。
+(プラス)でくっつける方法
左側に指定したものの直後にある右側のものにスタイルを適用するという意味です。
p + pなら、最初のpのあとのpとなります。
border-topなどで間にだけボーダーを入れたい場合などに使います。