Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

この辺のはなし。

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

参考

ituki_b
Contribution2000目指し中。 何かを理解/ジェネレーションするための自分用ツールを作るのが大好きです。 例→https://qiita.com/ituki_b/items/62a752389385de7ba4a2
http://mania-ku.info/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away