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.

