n番目の要素を数えてCSSに指定
擬似クラスを使って、ある要素の中の任意のn番目の要素にのみ、
CSSを指定することができる。
◉基本
● :first-child
ある要素内で最初の要素
● :last-child
ある要素内で最後の要素
● :nth-child(n)
ある要素内で最初からn番目の要素
● :nth-last-child(n)
ある要素内で最後からn番目の要素
EX)2番を指定する。 :nth-child(2) , :nth-last-child(4)
◉ 変数を使用する
● :nth-child(2n) ※ 2n は even も可
ある要素内での偶数番目の要素
● :nth-child(2n+1) ※ 2n+1 は odd も可
ある要素内での奇数番目の要素
●まとめ
-
何番目系擬似クラス一覧 最初だけ :first-child 最後だけ :last-child 奇数 :nth-child(odd) 偶数 :nth-child(even) 3の倍数 :nth-child(3n) 3の倍数+1 :nth-child(3n+1)
上から2番目だけ | :nth-child(2) |
---|---|
下から3番目だけ | :nth-last-child(3) |
上から5番目まで全部 | :nth-child(-n+5) |
上から6番目以降全部 | :nth-child(n+6) |
下から5番目まで全部 | :nth-last-child(-n+5) |
下から6番目以降全部 | :nth-last-child(n+6) |