基礎
CSS
CSSセレクタの結合子を使った階層指定
CSSセレクタと結合子を組み合わせて階層指定を行う方法について解説します。
この記事のポイント
- セレクタの階層指定について知る
- 階層指定でCSSを適用したい要素を特定する
目次
CSSを適用する要素を絞り込むセレクタ
CSSのセレクタには、次の4種類の階層指定を行うことができます。
階層形式 | 名前 |
---|---|
セレクタA セレクタB | 子孫結合子 |
セレクタA > セレクタB | 子結合子 |
セレクタA + セレクタB | 隣接兄弟結合子 |
セレクタA ~ セレクタB | 一般兄弟結合子 |
今回はこれらのセレクタの階層指定について、コードを交えながら解説していきます。
子孫結合子
セレクタを半角スペースで繋ぐ、一番多く使う階層指定です。
要素の親子関係をそのまま記述する形のため、直感的に理解もしやすく扱いやすい指定方法です。
コード例
<style>
section p {
margin-bottom: 15px;
}
section div p {
font-weight: bold;
color: green;
}
</style>
<section>
<p>テキスト1</p>
<div>
<p>テキスト2</p>
</div>
<p>テキスト3</p>
</section>

子結合子
セレクタを「>(右アングルブラケット)」で繋げる階層指定です。
次のようなHTMLの場合、section要素の直接の子孫となるp要素にのみスタイルを適用します。
コード例
<style>
section p {
margin-bottom: 15px;
}
section > p {
font-weight: bold;
color: blue;
}
</style>
<section>
<p>テキスト1</p>
<div>
<p>テキスト2</p>
</div>
<p>テキスト3</p>
</section>
div要素内のp要素にはfont-weightプロパティとcolorプロパティが適用されません。

隣接兄弟結合子
セレクタを「+(プラス)」で繋げる階層指定です。
次のようなHTMLの場合、h1要素に隣接するp要素にのみスタイルを適用します。
コード例
<style>
section p {
margin-bottom: 15px;
}
h1 + p {
font-weight: bold;
color: blue;
}
</style>
<section>
<h1>見出し</h1>
<p>テキスト1</p>
<p>テキスト2</p>
<p>テキスト3</p>
</section>

一般兄弟結合子
セレクタを「~(チルダ)」で繋げる階層指定です。
次のようなHTMLの場合、h1要素と同階層にあるp要素にのみスタイルを適用します。
コード例
<style>
section p {
margin-bottom: 15px;
}
h1 ~ p {
font-weight: bold;
color: #c00;
}
</style>
<section>
<h1>見出し</h1>
<p>テキスト1</p>
<div>
<p>テキスト2</p>
</div>
<p>テキスト3</p>
</section>

こちらの記事は役に立ちましたか?
コメントありがとうございます!
運営の参考にさせていただきます。
ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。