いつも忘れてググるので、いい加減まとめてみた。自分用メモ。
目次
セレクタを使った要素の指定おさらい
| 要素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 |
子要素の指定まとめのデモページ
カッコ内の計算について
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) |
