Edited at

何番目系の便利なCSSまとめ

この辺のはなし。

種類
-child
-of-type

最初
:first-child
:first-of-type

最後
:last-child
:last-of-type

n番目
:nth-child(n)
:nth-of-type(n)

後ろからn番目
:nth-last-child(n)
:nth-last-of-type(n)

1個だけ
:only-child
:only-of-type


最初


: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番目

デモ:5番目


:nth-of-type(X)

ある要素のX番目

デモ:5番目


:nth-child(Xn)

Xの倍数

デモ:2の倍数


:nth-of-type(Xn)

ある要素のXの倍数

デモ:2の倍数


最後からX番目


:nth-last-child(X)

最後からX番目

デモ:最後から5番目


:nth-last-of-type(X)

ある要素の最後からX番目

デモ:最後から5番目


X番目からYまで


:nth-child(n+X)

X番目以降(X番目から最後まで)

デモ:5番目から最後まで


:nth-of-type(n+X)

ある要素のX番目以降(X番目から最後まで)

デモ:5番目から最後まで


:nth-child(-n+X)

X番目以前(最初からX番目まで)

デモ:5番目以前


:nth-of-type(-n+X)

ある要素のX番目以前(最初からX番目まで)

デモ:5番目以前


最後からX個


:nth-last-child(-n+X)

最後からX個

デモ:最後から5個


:nth-last-of-type(-n+X)

ある要素の最後からX個

デモ:最後から5個


最後からX番目以前


:nth-last-child(n+X)

最後からX番目以前

デモ:最後から5番目以前


:nth-last-of-type(n+X)

ある要素の最後からX番目以前

デモ:最後から5番目以前


参考