番号指定の擬似クラス② 「-child」

子要素内の番号を指定してスタイルを適用する事が出来る擬似クラス

:nth-last-child(n)
:first-child

の使い方についてメモ。

番号を指定する擬似クラスには

といった擬似クラスもあるが本記事で紹介する擬似クラスはスタイルを適用する要素の番号を数える際
指定要素以外のもの、つまり同じ兄弟要素内のすべての子要素を含む形で数える仕様となる。

:nth-of-type(n)、first-of-typeについてはこちらの記事を参照

---

:nth-child(n) & :nth-last-child(n)

:nth-child(n)

同じ兄弟要素のうち、先頭からn番目の子要素に指定した要素があった場合にスタイルを適用する。

– HTML –

– CSS –

子要素の内、※2番目にあたるpタグにcolorプロパティのスタイルが適用されている。
※要素を数える際に 「 : 」の左側で指定した要素を含まないタグも数えている。

　
2つ目に指定しているスタイル p:nth-child(1) は
1番目の子要素がpタグではなく、h4タグなので適用されない。

:nth-last-child(n)

末尾からn番目の子要素に指定した要素があった場合にスタイルを適用する。

– CSS –

末尾から2番目の子要素、「自転車」の段落と
末尾から4番目の子要素、「車」の段落にそれぞれcolorプロパティのスタイルが適用された。
　

この場合も指定要素以外の子要素、（aタグ）も含めて要素番号を数えている。

---

:first-child & :last-child

:first-child

子要素のうち、先頭に指定した要素があった場合にスタイルを適用する。

:last-child

子要素のうち、末尾に指定した要素があった場合にスタイルを適用する。

– HTML –

　
– CSS –

先頭の子要素h4タグ、末尾の子要素aタグにそれぞれcolorプロパティが適用された。
※子要素のうち先頭と末尾はpタグではないので p : first-child、 p : last-childのスタイルは適用されない。