CSS :nth-child(n) の順番についてのメモ

CSSの要素の順番に応じてスタイルを当てる :nth-chaild 疑似要素で上手く行かないという相談を受けて、ちゃんと仕様を把握できてなかったので改めて調べたのでメモ

相談を受けたHTML と CSS

HTML

<body>
  <header></header>
  <section>section 1</section>
  <section>section 2</section>
  <section>section 3</section>
</body>

CSS

section:nth-child(2) { … }

section 2 にスタイルを当てたいのに nth-child(2) とすると何故か section 1 にスタイルが当たってしまうという事でした。

:nth-child()

CSS の :nth-child() 擬似クラスは、兄弟要素のグループの中での位置に基づいて選択します。
cf. :nth-child() - CSS: カスケーディングスタイルシート | MDN

ポイントとなるのは 兄弟要素のグループの中での位置 という部分です。
兄弟要素というのは、同じ階層にある要素の事を指すので、先の例では

<body>
  <header></header> // 1つめの要素
  <section>section 1</section> // 2つめの要素
  <section>section 2</section> // 3つめの要素
  <section>section 3</section> // 4つめの要素
</body>

という解釈になります。
なので、section:nth-child(2) というのは、「2つめの要素でセレクタがsectionのもの」と解釈されるので、section 1 の要素にスタイルが当たっていたという事でした。

sample

See the Pen CSS :nth-child() test by KIKIKI (@kikiki_kiki) on CodePen.

:nth-of-type() を使おう

同階層に、グルーピングしたくない要素がある時は、:nth-of-type() を使うと直感的なCSSを描くことができます。

CSS の :nth-of-type() 疑似クラスは、兄弟要素のグループの中で指定された型の要素を、位置に基づいて選択します。 cf. :nth-of-type() - CSS: カスケーディングスタイルシート | MDN

:nth-of-type() は、指定された型の要素 という解釈になっています。つまり、同階層の兄弟要素でセレクタに指定されている要素だけで位置を決定するという事です。

sample

:nth-child vs :nth-of-type

See the Pen CSS :nth-of-type() test by KIKIKI (@kikiki_kiki) on CodePen.

要素 (element) なので注意が必要！

:nth-of-type() がグルーピングするのはあくまで要素なので、子要素が全て同じ div の場合、例えセレクタをクラス名で指定していても位置は子要素の div 全てをカウントしたもので決定されます。

<div>
  <p>text</p>
  <p class="item">item 1</p>
  <p class="item">item 2</p>
  <p class="item">item 3</p>
</div>

css

.item:nth-of-type(2) { color: red; }

例えば上記のような例では、CSSはクラス名で指定されていますが、要素数は同じ <p> でカウントされるので、item 1 の文字色が color: red になってしまいます。

sample

See the Pen CSS :nth-of-type() test by KIKIKI (@kikiki_kiki) on CodePen.

　
おわり。

[参考]

【Amazon.co.jp 限定】 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

作者:Mana
発売日: 2019/03/16
メディア: 単行本

【Amazon.co.jp限定】アイカツオンパレード! Blu-ray BOX 2 (描き下ろしB2布ポスター[姫石らき]付)

発売日: 2020/08/05
メディア: Blu-ray

アイカツ… みた…？

かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

CSS :nth-child(n) の順番についてのメモ

相談を受けたHTML と CSS

:nth-child()

sample

:nth-of-type() を使おう

sample

要素 (element) なので注意が必要！

sample