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

  • 217
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

この辺のはなし。

種類 -child -of-type
最初 :first-child :first-of-type
最後 :last-child :last-of-type
X番目 :nth-child(n) :nth-of-type(n)
後ろからX番目 :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番目
デモ

:nth-of-type(X)

ある要素のX番目
デモ

:nth-child(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番目以降
デモ

:nth-child(-n+X)

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

:nth-of-type(-n+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番目以前
デモ

参考