最初、最後、○番目を指定するCSSまとめ

デスクトップパソコン商用無料イラスト Web制作

複数並んだ要素のうち一部だけスタイルを変えたいときは、-child系もしくは-of-type系の疑似クラスで条件を絞って指定することができます。

-child系と-of-type系の違い

-child系と-of-type系の疑似クラスはどちらもX番目の要素を指定するものですが、指定した要素以外の要素を数えるか、数えないかという違いがあります。

-of-type = 同じ種類の子要素のうち、X番目の要素にスタイルを適用。
-child = 子要素の種類に関係なく、X番目の要素にスタイルを適用。

最初

:first-child
最初の要素(親要素から見て、子要素すべての最初)

:first-of-type
ある要素の最初(親要素から見て、ある子要素の最初)

最後

:last-child
最後の要素(親要素から見て、子要素すべての最後)

:last-of-type
ある要素の最後(親要素から見て、ある子要素の最後)

1個だけ

:only-child
1個だけ子要素がある(親要素から見て、子要素が1個だけある)

:only-of-type
1個だけある子要素がある(親要素から見て、ある子要素が1個だけある)

X番目

:nth-child(X)
X番目

:nth-of-type(X)
ある要素のX番目

:nth-child(Xn)
Xの倍数

:nth-of-type(Xn)
ある要素のXの倍数

最後からX番目

:nth-last-child(X)
最後からX番目

:nth-last-of-type(X)
ある要素の最後からX番目

X番目からYまで

:nth-child(n+X)
X番目以降(X番目から最後まで)

:nth-of-type(n+X)
ある要素のX番目以降(X番目から最後まで)

:nth-child(-n+X)
X番目以前(最初からX番目まで)

:nth-of-type(-n+X)
ある要素のX番目以前(最初からX番目まで)

最後からX個

:nth-last-child(-n+X)
最後からX個

:nth-last-of-type(-n+X)
ある要素の最後からX個

最後からX番目以前

:nth-last-child(n+X)
最後からX番目以前

:nth-last-of-type(n+X)
ある要素の最後からX番目以前

奇数と偶数

:nth-child(odd) または :nth-child(2n+1)
奇数の要素

:nth-child(even) または :nth-child(2n)
偶数の要素

:nth-of-type(odd) または :nth-of-type(2n+1)
ある要素の奇数の要素

:nth-of-type(even) または :nth-of-type(2n)
ある要素の偶数の要素

タイトルとURLをコピーしました