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

以下のデモを使用して、該当要素が赤枠、白背景、赤文字になるように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-child(n+A)
最初からA番目以前まですべて :nth-child(-n+A)
1個だけ :only-child
デフォルト -

デフォルトの状態です。どの要素も該当していません。

Demo

F

F

F

F

F

F

F

F

F

F