子孫セレクタ、子セレクタ
HTMLでは要素のネスト(入れ子)がよく使われています。
入れ子とは要素の中に要素が入っている状態、マトリョーシカのような状態で設定されています。
入れ子構造では、外側を囲む要素が親、内側の要素が子という親子関係のような構造になっています。
ネストと親子関係のイメージ
入れ子構造のタグに対しては、子セレクタ・子孫セレクタによるCSSの記述がとても便利です。
子セレクタ
子セレクタは、親要素の中にある子要素に対しスタイルを適用します。
セレクタ部分に「>」を使って「親要素A > 子要素B」のように繋ぎます。
▼CSS
section > p{
color:red;
}
▼HTML
<section>
<p>sectionの子要素です</p>
<p>sectionの子要素です
<p>sectionの孫要素です</p>
</section>
子セレクタの場合、子要素の子要素、つまり孫要素には適用されません。
セレクタ部分にはもちろんクラスや属性(id)で設定することも可能です。
▼CSS
section > .exsample{
color:red;
}
と記述した場合は、
▼HTML
<section>
<p class="exsample">sectionの子要素です</p>
<p>sectionの子要素です
<p>sectionの孫要素です</p>
</section>
<p class="exsample">class="exsample"は適用されません</p>
子孫セレクタ
要素セレクタに半角スペースを区切って、設定すると、親要素内の子要素に対して、スタイルを適用することができます。
子孫セレクタは、親要素の中にある全ての要素Bに対しスタイルを適用します。
セレクタ部分で「親要素A 子要素B」と半角スペースで繋ぎます。
クラスセレクタの場合
▼CSS
.example2 p {
color: red;
}
<div class="example">
<p>このテキストにスタイルが適用されます</p>
<p>このテキストにスタイルが適用されます</p>
</div>
属性(id)セレクタの場合
▼CSS
p #example {
color: red;
}
▼HTML
<div id="example">
<p>このテキストにスタイルが適用されます</p>
<p>このテキストにスタイルが適用されます</p>
</div>