• 覚えておきたいCSSの基本「結合子」について

CSSは基本構文以外にも便利な記法がたくさんありますよね。
疑似クラスや疑似要素は代表的ですが、意外と知られていないのが「結合子」です。
「知ってはいるけどなかなか活用できていない…」という方もいらっしゃるのではないでしょうか。

最初は少し難しく感じるかもしれませんが、覚えておいて損はない知識だと思います。
CSSを勉強中の方はソースを参考にぜひ試してみてください!

目次

隣接兄弟結合子

隣接兄弟結合子は同じ親要素を持つ子要素同士で使用でき、ある子要素の直後にある子要素を指定します。

上記例では<div>を親とする子要素4つのうち<img>と<p>が連続している場合のみ「float:left」を適用させています。
通常のスタイルの<p>はテキストがそのまま表示されていますが、<img>に続く<p>(「サンプルテキスト3」の箇所)はテキストが画像の後に回り込んで表示されています。

一般兄弟結合子

一般兄弟結合子は同じ親要素を持つ子要素同士で使用でき、ある子要素の後ろにある子要素を指定します。この結合子で接続する子要素同士は隣接兄弟結合子のように直後である必要はありません。

上記例では<div>を親とする子要素5つのうち「class=”red”」の付与されている「サンプルテキスト3」以降の文字色が赤で表示されています。
CSSでは「p.red ~ p」の範囲で指定しているため、「redのクラスを持つ<p>以降に存在する<p>の文字色を赤で表示する」と解釈できます。
隣接兄弟結合子とは異なり接続範囲が「直後」に限られないため、思わぬ箇所にCSSが反映されないよう注意が必要です。

子結合子

子結合子はある要素の子として直接配置されている子要素を指定します。
少々分かりにくいですが、例えば「親>子>孫」と入れ子になっている要素で親を基準にした場合「親と子」にのみ適用可能で、「親と孫」では適用されません。

上記例では「div > ul」で指定したセレクタ(「color」と「list-style-type」)が適用されています。
しかし、「div > li」「div > span」として後に書いたCSS(「文字色を黒にする」「リストの先頭に黒丸を表示する」「文字の一部分をピンクにする」)は適用されません。
これは親要素となる<div>に対して直接の子にあたるのが<ul>であるためです。

子孫結合子

子孫結合子はある要素の子孫にあたる要素を指定します。
直接の子である必要がないため、子を飛ばし「親>孫」と指定することも可能です。

上記例は子結合子で使用したHTMLと同じですが、「>」箇所を「半角空白スペース」とすることで子孫結合子として働いています。
子結合子の場合は反映されなかった孫要素に対しても作用しているため、後から記述した内容で表示されています。なので「文字色が黒になり」、「消した黒丸が再度黒丸で表示され」、「<span>で囲まれた文字がピンクで表示され」ています。

まとめ

いかがでしたか。

以上は一般的な結合子を抜粋しただけですが、探してみるともっとマイナーな結合子もいっぱいあるんです。

子孫結合子などはオーソドックスな記述ですが、一般兄弟結合子などは使う場面も限られてくるため忘れやすいと思います。基礎を見直し、より簡潔で可読性の高いCSSを書けるように頑張っていきましょう!