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 疑似クラスのサンプル1
CSS 疑似クラスのサンプル2(n番目にCSSを適用等)
CSS 疑似要素のサンプル




△上に戻る