セレクタを使った要素の指定おさらい
以下のデモを使用して、該当要素が赤枠、白背景、赤文字になるようにcssで設定します。
| 要素Eおよび要素F | E, F | |
|---|---|---|
| 要素Eの子孫要素F | E F | |
| 要素Eの子要素F(直下の階層) | E > F | |
| 要素Eの直後に隣接している要素F | E + F | |
| 要素Eの後にある要素F(同じ階層) | E ~ F | |
| デフォルト | - |
デフォルトの状態です。どの要素も該当していません。
Demo
親要素E
Eの子要素F
Eの孫要素F
Eの子要素F
Eの子要素F
親要素F
Fの子要素F
親要素F
子要素の指定まとめ
以下のデモを使用して、該当要素が赤枠、白背景、赤文字になるようにcssで設定します。
ここでは親要素Eの中に子要素はFしかないため、childでもof-typeでも同じ子要素Fが指定されます。
| 最初 | :first-child | |
|---|---|---|
| 最後 | :last-child | |
| 偶数番目 | :nth-child(even) | |
| 奇数番目 | :nth-child(odd) | |
| 前からA番目 | :nth-child(A) | |
| 後ろからA番目 | :nth-last-child(A) | |
| 前からA倍数番目 | :nth-child(An) | |
| 後ろからA倍数番目 | :nth-last-child(An) | |
| A番目以降、最後まですべて | :nth-child(n+A) | |
| 後ろからA番目以前すべて | :nth-last-child(n+A) | |
| 最初からA番目以前まですべて | :nth-child(-n+A) | |
| 後ろからA番目以降すべて | :nth-last-child(-n+A) | |
| １個だけ | :only-child | |
| デフォルト | - |
デフォルトの状態です。どの要素も該当していません。
Demo
F
F
F
F
F
F
F
F
F
F