この章では子孫セレクタについて説明します。
子孫セレクタとは
例えばp要素の中のstrongタグにだけCSSを適用させる時に使用します。
pはブロック要素であり、strongはインライン要素なので、pの方が上位の階層になります。
では例を見てみましょう。
この例は設定する箇所だけを書き、他は省略します。
この例ではp要素のstrongタグにだけ
この構造において上の階層にある要素を親要素、親要素からみて下の階層にある要素を子要素、さらに子要素の下の階層が孫要素と言います。
そしてプロパティの値が親要素から子要素に引き継がれていくことを継承と言います。
では例を見てみましょう。
ですので、結果を見ると以下のようにbody要素内が赤くなっていることが分かります。
そこでbodyの中の特定の箇所、例えばh1を変更したい場合には
それが以下の箇所です。
結果的にbodyの中のh1だけが青くなります。
結果は以下の通りです。