search
LoginSignup
747

More than 3 years have passed since last update.

posted at

updated 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番目以前

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
747