この辺のはなし。
種類 | -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番目以前