Chap10-4 セレクタの種類と指定方法

Chap10-4 セレクタの種類と指定方法

Chap10-4のまとめです。

いくつかあるセレクタの種類や記述の方法から、便利で使えるセレクタをピックアップして紹介します。
どんなプロパティがあるのか知ることが目的です。
そこから、積極的に使って覚えていきましょう。

特定の子・孫・ひ孫要素にデザインする時

「半角スペース」で区切る

ある親要素の、特定の子・孫・ひ孫要素全てをセレクタで指定できる(親 子孫セレクタ)

See the Pen 10-4-4 by Rayout-gw (@Rayout-gw) on CodePen.

特定の子要素だけデザインする時

「>」で区切る

指定した親要素内にある、特定の子要素だけをセレクタで指定できる(親>子セレクタ)

See the Pen 10-4 by Rayout-gw (@Rayout-gw) on CodePen.

「+」で区切る

ある子要素の次に記述した、子要素だけをセレクタで指定できる(兄+弟セレクタ)

See the Pen 10-4-2 by Rayout-gw (@Rayout-gw) on CodePen.

「~」で区切る

ある子要素と同じ親要素を持つ、特定の子要素だけをセレクタで指定できる(兄~弟セレクタ)

See the Pen Untitled by Rayout-gw (@Rayout-gw) on CodePen.