セレクタ間のチルダ記号って？CSSの間接セレクタ「E ~ F」を使いこなそう！

このエントリーでは、CSSの間接セレクタについて共有したい。

CSSのセレクタ定義には、さまざまな用法があって、なかでも「タイプセレクタ、子孫セレクタ、IDセレクタ、クラスセレクタ」は一般的だろう。マークアップに精通している、あなたにおいても、よく馴染みのあるセレクタだと思う。

基本中の基本だからコーディング入門で真っ先に教え込まれるセレクタであるのだが、昨今のWebデザインを前述セレクタだけでしのぎ切るのは骨が折れる、というか、まず難しい。

同一項目にスタイルを与えるケースならば、子孫セレクタで充分なのだけれど、親要素を共にしたある要素の１番目に対して差別化したい場合など求められることがあるかもしれない。

言葉では伝わりにくいから、以下ソースコードを用意した。section要素に属した最初のh2要素以外に対して、スタイルを与えたいようなケースを考えてほしい。

<section>
  <div>ヘッダー</div>
  <div>メニュー</div>
  <h2>見出し</h2> <!-- ? -->
  <p>ダミーテキスト</p>
  <p>ダミーテキスト</p>
  <h2>見出し</h2>
  <p>ダミーテキスト</p>
  <p>ダミーテキスト</p>
  <h2>見出し</h2>
  <p>ダミーテキスト</p>
  <p>ダミーテキスト</p>
</section>

この場合、すべてのh2要素にスタイル適用して、最初のh2要素のみ打ち消しスタイルを当てるといったことが考えられる。

section h2 {
  margin-top: 100px;
}
​
section h2:first-of-type {
  margin-top: 0;
}

:first-of-type擬似クラスは、親要素を共にしたなかの最初の要素を指す。サンプルのようにh2要素前になにかしらの要素が存在するケースに役立つ疑似クラスだ。もし最初のh2要素より前にHTML要素がないのならば、:first-child疑似クラスでも同様のことができる。

最初の要素を差別化するための打ち消しスタイルについて認めてもらえたと思う。差別化する要素特有のスタイルがあるケースは、:first-of-type擬似クラスを用いて仕上げればよいが、サンプルのように全体のものを打ち消すだけのものだと冗長さがある。

打ち消しスタイルをなくしてスマートに定義するサンプルも見てもらいたい。

section h2:not(:first-of-type) {
  margin-top: 100px;
}

:not()否定疑似クラスは、そのカッコ内に否定したいセレクタを当てる。サンプルでは、:first-of-type疑似クラスがある。つまり最初のh2要素は無視して、それ以外のh2要素にのみスタイルが適用される。

最初の要素を無視することで打ち消しスタイルが無くなり幾分すっきりしたと思う。差別化する要素のスタイルが不要なら否定擬似クラスを使うとよいだろう。

では、これを間接セレクタを用いて記述すると以下のようになる。

section h2 ~ h2 {
  margin-top: 100px;
}

それほど変わった様子はないのだけれど、これまでのサンプルと同様に最初のh2要素以外にマージントップが適用される。

その詳解はというと、間接セレクタというものは兄弟要素の弟にスタイルが適用される。つまり最初のh2要素を兄とした場合に、それ以降のh2要素はすべて弟と見立てているわけだ。そういうものだと理解してもらえると有り難い。

まとめ

CSSの間接セレクタについての共有だった。

間接セレクタを説明するために、いくつかのセレクタを比較に出して優位性があるように話を進めたのだけれど、決して間接セレクタにすべきというものではないことは、どうかご承知おき願いたい。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。