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

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

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

の使い方についてメモ。

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

:nth-of-type(n)
:first-of-type

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

: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のスタイルは適用されない。
 


子要素の番号、または先頭、末尾を特定しスタイルを適用する方法について記述した。
 
冒頭に書いたように指定要素を含む子要素のみを数えてスタイルを分ける擬似クラス

:nth-of-type(n)
:first-of-type

との動きの違いを間違えないよう適切に使い分けられるようにしておきたい。
 
:nth-of-type(n)、first-of-typeについてはこちらの記事を参照

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください