nth-child とは？
「nth-child」は、n番目の要素を指定したり、偶数番目など一定間隔の要素を指定することができるCSSセレクタの擬似クラスです。
nth-child パターン
| 最初
|
:first-child |
| 最後
|
:last-child |
| 最初からX番目（3番目）
|
:nth-child(X) |
| 最後からX番目（3番目）
|
:nth-last-child(X) |
| 最初からX個（3個）
|
:nth-child(-n+X) |
| X番から最後（3番）
|
:nth-child(n+X) |
| 最後からX個（3個）
|
:nth-last-child(-n+X) |
| 最後のX番から以前（3番）
|
:nth-last-child(n+X) |
| Xの倍数（3）
|
:nth-child(Xn) |
| 奇数
|
:nth-child(odd) :nth-child(2n+1) |
| 偶数
|
:nth-child(even) :nth-child(2n) |
まとめ
今回は、CSS疑似クラスのnth-childについて、使い方のパターンを書きました。
備忘録のような形で書いたのですが、みなさんにもこの記事が参考になればと思います。
