CSS 階層構造でセレクタを指定するサンプル(子孫/子/隣接/一般兄弟セレクタ)

CSSの階層構造でセレクタを指定するサンプルです。

目次

1.空白区切りを使用するサンプル (子孫セレクタ)

セレクタ1  セレクタ2

コード

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

<style>
.div1 .p1{
	color:red;
}
</style>
<body >
<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
</body>

サンプル

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

テスト1-1

テスト2-1

テスト3-1

 

2.>を使用するサンプル (子セレクタ)

セレクタ1 > セレクタ2

コード

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

<style>
.div2 > .p1{
	color:red;
}
</style>
<body >
<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>
</body>

サンプル

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

テスト1-1

テスト2-1

テスト3-1

 

3.+を使用するサンプル (隣接セレクタ)

セレクタ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>
<body >
<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>
</body >

サンプル

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

テスト1-1

テスト1-2

テスト2-1

テスト

テスト2-2

 

4.~を使用するサンプル (一般兄弟セレクタ)

セレクタ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>
<body >
<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>
</body >

サンプル

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

テスト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)



△上に戻る