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

nas

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

目次

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

セレクタ1  セレクタ2

コード

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

<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

サンプル

上記コードのサンプルです。

テスト1-1

テスト2-1

テスト3-1

 

２．子セレクタ(>)

セレクタ1 > セレクタ2

コード

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

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

サンプル

上記コードのサンプルです。

テスト1-1

テスト2-1

テスト3-1

 

３．隣接セレクタ(+)

セレクタ1  +  セレクタ2

コード

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

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

サンプル

上記コードのサンプルです。

テスト1-1

テスト1-2

テスト2-1

テスト

テスト2-2

 

４．一般兄弟セレクタ(~)

セレクタ1  ~  セレクタ2
  • 一般兄弟セレクタは、~を使用します。
  • セレクタ1とセレクタ2が同じ親要素を持つ兄弟の要素で、セレクタ1の後にあるセレクタ2の要素が対象になります。
  • セレクタ1とセレクタ2の間に別の要素があっても影響しません。
  • 以下はMDNの一般兄弟セレクタのリンクです。
    https://developer.mozilla.org/ja/docs/Web/CSS/General_sibling_selectors

コード

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

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

サンプル

上記コードのサンプルです。

テスト1-1

テスト1-2

テスト2-1

テスト

テスト2-2

関連の記事

CSSの書き方とセレクタの一覧
CSS 複数のセレクタを指定する/絞り込むサンプル
CSS 属性セレクタのサンプル(要素名[属性名="値"])
CSS 疑似クラスのサンプル(:link/:visited/:hover/:active/:focus/:target/:lang/:enabled/:disabled/:checked)
CSS 疑似クラスのサンプル(:nth-child/:nth-last-child/:empty/:not)
CSS 疑似要素のサンプル(::first-line/::first-letter/::before/::after)

△上に戻る