HTML & CSS

基礎

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>
表示例
表示例

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。