CSSセレクタの結合子を使った階層指定

CSSを適用する要素を絞り込むセレクタ

CSSのセレクタには、次の4種類の階層指定を行うことができます。

今回はこれらのセレクタの階層指定について、コードを交えながら解説していきます。

子孫結合子

セレクタを半角スペースで繋ぐ、一番多く使う階層指定です。
要素の親子関係をそのまま記述する形のため、直感的に理解もしやすく扱いやすい指定方法です。

コード例

<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>

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。