実務で使えるnth-childをご紹介
cssを記述する際にliタグ等に各クラス（class）を付けて記述することがあると思います。
例えば、偶数番目のliタグのみや3の倍数番目（3つづつ飛ばして）にのみクラスを付けるたりなど制作の場面ではこういった作業が出てきます。そんな時、liタグにその都度クラスを付けたり複数のクラスを付けることなくcssを指定することができます。
それが疑似クラスのnth-childで指定するだけで簡単にできます。またnth-childは色々と応用ができるのでご紹介いたします。
liタグにclass名を付けずに各liタグにcssを適用させる
|
1 2 3 4 5 6 7 8 9 |
<ul> <li>1番目</li> <li>2番目</li> <li>3番目</li> <li>4番目</li> <li>5番目</li> <li>6番目</li> <li>7番目</li> </ul> |
こういったliタグの記述はよく目にします。
この偶数番目のみにcssを適用させる場合は下記の記述で指定できます。
|
1 2 3 4 5 6 7 8 9 |
li:nth-child(even) { color: #f00; } /* または */ li:nth-child(2n) { color: #f00; } |
この記述のみでliタグの2番目・4番目・6番目にcssが適応されます。
nth-childを使ったいろいろな指定をご紹介
5番目だけ指定
|
1 2 3 |
li:nth-child(5) { color: #f00; } |
奇数番目に指定（※1・3・5・7…）
|
1 2 3 4 5 6 7 |
li:nth-child(odd) { color: #f00; } /* または */ li:nth-child(2n+1) { color: #f00; } |
偶数番目に指定（※2・4・6・8…）
|
1 2 3 4 5 6 7 |
li:nth-child(even) { color: #f00; } /* または */ li:nth-child(2n) { color: #f00; } |
３の倍数番目に指定（※3・6・9・12…）
|
1 2 3 |
li:nth-child(3n) { color: #f00; } |
1番目から始まって3つ飛ばしで指定（※1・4・7・10…）
|
1 2 3 |
li:nth-child(3n+1) { color: #f00; } |
4番目以降全てにに指定（※4・5・6・7…）
|
1 2 3 |
li:nth-child(n+4) { color: #f00; } |
最初から4番目まで指定（※1・2・3・4）
|
1 2 3 |
li:nth-child(-n+4) { color: #f00; } |
最後のliのみに指定
|
1 2 3 |
li:last-child { color: #f00; } |
最後から3つ目のみに指定
|
1 2 3 |
li:nth-last-child(3) { color: #f00; } |
2番目から6番目を指定（※2・3・4・5・6）
|
1 2 3 |
li:nth-child(n+2):nth-child(-n+6) { color: #f00; } |
5番目以外全てを指定
|
1 2 3 |
li:not(:nth-child(5)) { color: #f00; } |
2番目から6番目で偶数のみ指定（※2・4・6）
|
1 2 3 |
li:nth-child(2n)li:nth-child(n+2):nth-child(-n+6) { color: #f00; } |
こういった様に各指定の仕方でliタグにcssを適用することができます。
上記の記述は、一例になっていますので、使用する際はご自身の制作に合った値を入れるようにしてください。
対応しているブラウザについて
IEでの対応はIE9からになります。使用する際は、各ブラウザやデバイスを確認の上、使用してください。