偶数番目? 後ろから2番目? ピシッと指定したい! — 擬似クラスを使った子要素の指定

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

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

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

詳しくは分からないのですが、~(一般兄弟結合子)を使用して兄弟要素を指定してどうこうしている場合に、子要素のpositionあるいはz-indexが効かなくなってしまう現象が発生しました。
ちゃんとpositionz-indexも設定しているのに意図した状態にならない場合、~を使っていれば使わない方法に切り替えるといいかもしれません。

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

まずは 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(An) :nth-last-of-type(An)
A番目以降、最後まですべて :nth-child(n+A) :nth-child(n+A)
後ろからA番目以前すべて :nth-last-child(n+A) :nth-last-child(n+A)
1個だけ :only-child :only-of-type
子要素の指定まとめのデモページ

カッコ内の計算について

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

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

追記211018: サイト運営を休眠したようで、JSが効かなくなってしまいました。。

否定擬似クラス :not

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

最初ではない :not(:first-child) :not(:first-of-type)
最後ではない :not(:last-child) :not(:last-of-type)
back to top