2番目のpを選びたい：nth-childとnth-of-typeの数え方を比べよう

2番目の段落へ色を付けたくて、p:nth-child(2)と書いた。でも何も選ばれない。nth-childとnth-of-typeでは、どの要素を順番に数えるかが違うよ。

今回はp、span、pの順に並ぶ三つの要素だけを使う。HTMLの親子関係と、CSSのセレクターの基本が分かると試しやすい作例だよ。

まず、兄弟の順番を見よう

<div class="items">
  <p>一つ目の段落</p>
  <span>途中の補足</span>
  <p>二つ目の段落</p>
</div>

同じ親の直接の子は、順にp、span、p。二つ目の段落は、全体の三番目の要素になる。CSSで数えるとき、整形のための空白や改行のテキストノードは要素の順番へ入らないよ。

p:nth-child(2)は、全体の二番目で、かつp

.items > p:nth-child(2) { background: #eeebff; }

これは、兄弟全体の二番目にあり、pでもある要素を選ぶ。今回の二番目はspanなので、条件を満たすpはない。

「pだけを取り出した中の二番目」という意味ではないんだ。

p:nth-of-type(2)は、pという型の二番目

.items > p:nth-of-type(2) { background: #eeebff; }

こちらは同じタグ名の型ごとに数えるので、二つ目のpを選べる。このHTMLでは全体の三番目が対象になるよ。

最後の例はpという条件を付けていないので、二番目のspanが一致する。

作例で、一致と色を確かめる

1. 初期状態のp:nth-child(2)で、一致がないことを見る。
2. p:nth-of-type(2)へ変え、二つ目の段落だけが強調されるか確認する。
3. :nth-child(2)へ変え、途中の補足が強調されるか見る。
4. 「最初から試す」で初期状態へ戻す。

表示する説明はJavaScriptでもセレクターの一致を読み、色の変更自体はCSSの規則で行っている。見えている名前と、実際に選ばれた要素を対応させよう。

of-typeの型は、クラス名ではない

例えばクラスが同じものだけを数えたい場合、nth-of-typeのtypeをクラスの種類だと考えないようにしよう。ここでの区別は要素のタグ名に関係する。

ページへ別の要素を途中で追加すると、nth-childの対象が変わることもある。順番に意味があるのか、特定の役割の要素を選びたいのかを考え、必要ならクラスなどで明示する方法も選ぼう。

編集部ではChromiumで三つの一致、計算済みの背景色とリセットを確認した。複雑な式のすべてを同じ例で検証したわけではないよ。指定の基本はclassとid、子の状態を条件にする場合は:hasも参考になるね。