擬似クラスを使った子要素の指定のまとめ(覚えの悪い自分のためにデモページまで用意してみた)

Pocket
LINEで送る

いつも忘れてググるので、いい加減まとめてみた。自分用メモ。

セレクタを使った要素の指定おさらい

要素Eおよび要素F E, F
要素Eの子孫要素F E F
要素Eの子要素F(直下の階層) E > F
要素Eの直後に隣接している要素F E + F
要素Eの後にある要素F(同じ階層) E ~ F
おさらいのデモページ

擬似クラスを使った子要素の指定まとめ

まずは child と -of-type の違いについて

child …… 親要素から見た、子要素すべてを指してカウントする。
of-type …… 親要素から見た、特定の子要素を指してカウントする。

例えば、E F:nth-child(2)の場合、親要素Eの中で2番目にある子要素がFだったとき該当します。子要素F以外の子要素G、H、I…なども引っくるめてカウントします。
E F:nth-of-type(2)の場合は、親要素Eの中にある子要素Fの2番目が該当します。子要素Fのみをカウントするので、他の子要素はカウントされません。

最初 :first-child :first-of-type
最後 :last-child :last-of-type
偶数番目 :nth-child(even) :nth-of-type(even)
奇数番目 :nth-child(odd) :nth-of-type(odd)
前からA番目 :nth-child(A) :nth-of-type(A)
後ろからA番目 :nth-last-child(A) :nth-last-of-type(A)
前からA倍数番目 :nth-child(An) :nth-of-type(An)
A番目以降、最後まですべて :nth-last-child(n+A) :nth-last-of-type(n+A)
1個だけ :only-child :only-of-type
子要素の指定まとめのデモページ

カッコ内の計算について

Flexboxがまだ一般的ではなかった時代に、この子要素のカッコ内で3n+2というように計算して上手く指定していく技が多かったのですが、更新作業を引き継いだサイトがそうだったりすると作業する側としてはちょっと混乱します。
そういうときは下記のサイトがオススメ。

リンク先のView the Nth-Child Visual Calculator »ボタンから進み、フォームの中に調べたいカッコ内の数値を入れてSubmitボタンをクリックすると、指定されている部分がハイライトされ、どういう意図でそんな数値を入れたのかパッと分かります。

否定擬似クラス :not

上記とは逆に、○○ではない要素で指定したいときは:not( )で包む。

最初ではない :not(:first-child) :not(:first-of-type)
最後ではない :not(:last-child) :not(:last-of-type)
Pocket
LINEで送る

back to top