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

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

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

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

おさらいのデモページ

詳しくは分からないのですが、~（一般兄弟結合子）を使用して兄弟要素を指定してどうこうしている場合に、子要素のpositionあるいはz-indexが効かなくなってしまう現象が発生しました。
ちゃんとpositionもz-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)
１個だけ	:only-child	:only-of-type

子要素の指定まとめのデモページ

:nth-child()のカッコ内の計算について

Flexboxがまだ一般的ではなかった時代に、子要素を指定するこの:nth-child()のカッコ内で3n+2というように計算して上手く指定していく技をよく見かけました。更新作業を引き継いだサイトがそうだったりすると、作業する側としてはちょっと混乱します。
以前海外サイトで:nth-child()の指定を確認できる便利なサイトがあったのですが、数年前から管理されてない状態で試すことができなくなっていました。
だったら自分でデモページ作るわよ！ と作ったのが以下です。

子要素を擬似要素:nth-child()で指定するときの確認デモ

フォームの中に調べたいカッコ内の数値を入れて反映ボタンをクリックすると、指定された子要素がハイライトされ、どういう意図でそんな数値を入れたのかパッと分かります。

否定擬似クラス :not

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

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