CSSの子要素を指定するセレクタ【現役エンジニアが解説】
今回は、CSSの子要素を指定するセレクタについて、子要素と子孫要素に分け、簡単に解説していきます。
子要素のセレクタ
子要素を指定するセレクタの書き方は、”親要素 > 子要素”です。
この場合、親要素の直下の階層にある子要素のみにスタイルが適用されます。
.hoge > div{
color:red;
}
上記のコードでは、hogeというクラスを持つ要素の子要素であるdiv要素の文字色を赤色にしています。
子孫要素のセレクタ
“親要素 子孫要素”という書き方は、子孫要素を指定するセレクタです。
この書き方では、親要素の下の階層にある子孫要素のみにスタイルが適用されます。
.hoge div{
color:green;
}
上記のコードでは、hogeというクラスを持つ要素の子孫要素であるdiv要素の文字色を緑色にしています。
直後の隣接要素のセレクタ
直後の隣接要素を指定するには、”要素 + 後続要素”というセレクタになります。
隣接要素といっても、ある要素の直後にある要素のみにスタイルが適用されるセレクタです。
.hoge + div{
color:blue;
}
上記のコードでは、hogeというクラスを持つ要素の直後の隣接要素であるdiv要素の文字色を青色にしています。