CSS 子孫/子/隣接/一般兄弟セレクタのサンプル

CSSの子孫セレクタ/子セレクタ/隣接セレクタ/一般兄弟セレクタのサンプルです。
階層構造でセレクタを指定します。

目次

セレクタ 子孫セレクタ(空白区切り)
  子セレクタ(>)
  隣接セレクタ(+)
  一般兄弟セレクタ(~)
  CSS 複数のセレクタを指定する/絞り込むサンプル※別ページ

子孫セレクタ(空白区切り)

セレクタ1 セレクタ2
  • 子孫セレクタは、空白区切りを使用します。
  • セレクタ1を祖先として、子孫のセレクタ2の要素が対象になります。
<style>
.div1 .p1{
	color:red;
}
</style>

<div class="div1">
	<p class="p1">テスト1-1</p>
</div>

<div class="div1">
	<div class="div1a">
		<p class="p1">テスト2-1</p>
	</div>
</div>

<p class="p1">テスト3-1

2行目は、.div1 .p1となっています。
8行目は、.div1の(.p1)のためCSSが適用されます。
13行目は、.div1の(.p1)のためCSSが適用されます。
17行目は、.div1の子孫ではないのでCSSは適用されません。

上記コードの実行結果です。

テスト1-1

テスト2-1

テスト3-1

以下はMDNの子孫セレクタのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/Descendant_selectors

子セレクタ(>)

セレクタ1 > セレクタ2
  • 子セレクタは、>を使用します。
  • セレクタ1を親として、子のセレクタ2の要素が対象になります。
<style>
.div2 > .p1{
	color:red;
}
</style>

<div class="div2">
	<p class="p1">テスト1-1</p>
</div>

<div class="div2">
	<div class="div2a">
		<p class="p1">テスト2-1</p>
	</div>
</div>

<p class="p1">テスト3-1</p>

2行目は、.div2 > .p1となっています。
8行目は、.div2の(.p1)のためCSSが適用されます。
13行目は、.div2 の子ではないためCSSは適用されません。
17行目は、.div2の子ではないためCSSは適用されません。

上記コードの実行結果です。

テスト1-1

テスト2-1

テスト3-1

以下はMDNの子セレクタのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/Child_selectors

隣接セレクタ(+)

セレクタ1 + セレクタ2
  • 隣接セレクタは、+を使用します。
  • セレクタ1とセレクタ2が同じ親要素を持つ兄弟の要素で、セレクタ1の直後にあるセレクタ2の要素が対象になります。
<style>
.div3 .p1 + .p2{
	color:red;
}
</style>

<div class="div3">
	<p class="p1">テスト1-1</p>
	<p class="p2">テスト1-2</p>

	<p class="p1">テスト2-1</p>
	<p>テスト</p>
	<p class="p2">テスト2-2</p>
</div>

2行目は、.div3 .p1 + .p2となっています。
8-13行目は、同じ親要素(.div3)を持つ兄弟の要素です。
9行目は、セレクタ1(.p1)の直後にセレクタ2(.p2)があるのでセレクタ2(.p2)にCSSが適用されます。
13行目は、11行目のセレクタ1(.p1)の直後にないので文字の色は変わりません。

上記コードの実行結果です。

テスト1-1

テスト1-2

テスト2-1

テスト

テスト2-2

以下はMDNの隣接セレクタのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/Adjacent_sibling_selectors

一般兄弟セレクタ(~)

セレクタ1 ~ セレクタ2
  • 一般兄弟セレクタは、~を使用します。
  • セレクタ1とセレクタ2が同じ親要素を持つ兄弟の要素で、セレクタ1の後にあるセレクタ2の要素が対象になります。
  • セレクタ1とセレクタ2の間に別の要素があっても影響しません。
<style>
.div4 .p1 ~ .p2{
	color:red;
}
</style>

<div class="div4">
	<p class="p1">テスト1-1</p>
	<p class="p2">テスト1-2</p>

	<p class="p1">テスト2-1</p>
	<p>テスト</p>
	<p class="p2">テスト2-2</p>
</div>

2行目は、.div4 .p1 ~ .p2となっています。
8-13行目は、同じ親要素(.div4)を持つ兄弟の要素です。
9行目は、セレクタ1(.p1)の直後にセレクタ2(.p2)があるのでセレクタ2(.p2)にCSSが適用されます。
13行目は、11行目のセレクタ1(.p1)の後にあるのでCSSが適用されます。12行目に別の要素Pがありますが影響しません。

上記コードの実行結果です。

テスト1-1

テスト1-2

テスト2-1

テスト

テスト2-2

以下はMDNの一般兄弟セレクタのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/General_sibling_selectors

関連の記事

CSSの書き方/コメントとセレクタの一覧
CSS 複数のセレクタを指定する/絞り込むサンプル
CSS 属性セレクタのサンプル(要素名[属性名="値"])
CSS 擬似クラス(:link/:visited/:hover/:active/:focus)
CSS 奇数/偶数行(nth-child)と否定(not)
CSS 疑似要素の::beforeと::afterのサンプル

△上に戻る