CSS nth-child() 要素を順番で指定する 偶数/奇数
CSSで要素を順番で指定したいという時に使用するセレクタnth-child()
。よく使う部分をサンプルでまとめました。
奇数・偶数指定 odd/even
要素に:nth-child(odd)
を指定すると奇数番目の要素が対象になります。
要素に:nth-child(even)
を指定すると偶数番目の要素が対象になります。
順番指定{
1番目~9番目 :nth-child(1)
:nth-child()
に1
や9
などの数字を指定すると、数字で指定した順番の要素が対象になります。
x番ごと(xの倍数) :nth-child(2n)
:nth-child()
に1
などの数字とn
を指定すると、数字で指定した順番ごとの要素が対象になります。2の倍数の時に指定といったケースに使用します。
1番目からx番ごと :nth-child(2n+1)
:nth-child()
に1
などの数字とn
と+1
を指定すると、1番目から数字で指定した順番ごとの要素が対象になります。
+1
は「開始位置」として覚えると簡単です。+2
や+3
といったように数字を増やすこともできます。
x番以降 :nth-child(n+2)
:nth-child()
にn
と+1
などの数字を指定すると、数字で指定した順番以降の要素が対象になります。
x番目まで :nth-child(-n+5)
:nth-child()
に-n
と+5
などの数字を指定すると、数字で指定した順番までの要素が対象になります。
x番目からx番目 :nth-child(n+2):nth-child(-n+9)
:nth-child(n+2)
と:nth-child(-n+9)
を指定すると、数字で指定した順番から順番までの要素が対象になります。
+1
の数字は「開始位置」と「終了位置」して覚えると簡単です。+2
や+3
といったように数字を増やすこともできます。