番号指定の擬似クラス② 「-child」
目次
子要素内の番号を指定してスタイルを適用する事が出来る擬似クラス
:nth-last-child(n)
:first-child
の使い方についてメモ。
番号を指定する擬似クラスには
:first-of-type
といった擬似クラスもあるが本記事で紹介する擬似クラスはスタイルを適用する要素の番号を数える際
指定要素以外のもの、つまり同じ兄弟要素内のすべての子要素を含む形で数える仕様となる。
:nth-of-type(n)、first-of-typeについてはこちらの記事を参照
:nth-child(n) & :nth-last-child(n)
:nth-child(n)
同じ兄弟要素のうち、先頭からn番目の子要素に指定した要素があった場合にスタイルを適用する。
– HTML –
1 2 3 4 5 6 7 |
<div> <h4>乗り物</h4> <p>車</p> <a>バイク</a> <p>自転車</p> <a>電車</a> </div> |
– CSS –
1 2 3 4 5 6 7 8 9 10 |
p:nth-child(2){ color: red; } /*以下は適用されないスタイル*/ p:nth-child(1){ color: red; } |
子要素の内、※2番目にあたるpタグにcolorプロパティのスタイルが適用されている。
※要素を数える際に 「 : 」の左側で指定した要素を含まないタグも数えている。
2つ目に指定しているスタイル p:nth-child(1) は
1番目の子要素がpタグではなく、h4タグなので適用されない。
:nth-last-child(n)
末尾からn番目の子要素に指定した要素があった場合にスタイルを適用する。
– CSS –
1 2 3 4 5 6 7 8 9 |
/*自転車*/ p:nth-last-child(2){ color: red; } /*車*/ p:nth-last-child(4){ color:blue; } |
末尾から2番目の子要素、「自転車」の段落と
末尾から4番目の子要素、「車」の段落にそれぞれcolorプロパティのスタイルが適用された。
この場合も指定要素以外の子要素、(aタグ)も含めて要素番号を数えている。
:first-child & :last-child
- :first-child
- 子要素のうち、先頭に指定した要素があった場合にスタイルを適用する。
- :last-child
- 子要素のうち、末尾に指定した要素があった場合にスタイルを適用する。
– HTML –
1 2 3 4 5 6 7 |
<div> <h4>乗り物</h4> <p>車</p> <a>バイク</a> <p>自転車</p> <a>電車</a> </div> |
– CSS –
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
h4:first-child { color:red; } /*適用されないスタイル*/ p:first-child { color:green; } a:last-child{ color:blue; } /*適用されないスタイル*/ p:last-child{ color:green; } |
先頭の子要素h4タグ、末尾の子要素aタグにそれぞれcolorプロパティが適用された。
※子要素のうち先頭と末尾はpタグではないので p : first-child、 p : last-childのスタイルは適用されない。
子要素の番号、または先頭、末尾を特定しスタイルを適用する方法について記述した。
冒頭に書いたように指定要素を含む子要素のみを数えてスタイルを分ける擬似クラス
:first-of-type
との動きの違いを間違えないよう適切に使い分けられるようにしておきたい。
:nth-of-type(n)、first-of-typeについてはこちらの記事を参照