CSS 複数のセレクタを指定する/絞り込むサンプル

CSSの複数のセレクタを指定するサンプルと絞り込むサンプルです。

目次

子セレクタ等は以下を参照願います。
CSS 子孫セレクタ/子セレクタ/隣接セレクタ/一般兄弟セレクタのサンプル

1つのCSSで複数のセレクタを対象にする(カンマ区切り)

1つのCSSで複数のセレクタを対象にするサンプルです。
カンマで区切ります。

<style>
.p1,.p3{
	color:red;
}
</style>

<div class="d1">
	<p class="p1">あいうえお</p>
	<p class="p2">かきくけこ</p>
	<p class="p3">ABCDE</p>
</div>

2行目は、文字の色を赤くするという1つのCSSに複数のセレクタを指定しています。.p1と.p3の区切り文字はカンマです。
8行目のp1クラスと10行目のp3クラスがCSSの適用対象になります。

結果

上記コードの実行結果です。
CSSの適用対象の文字の色が赤になっています。

 

複数のセレクタで対象を絞り込む(区切り文字が空白)

複数のセレクタで対象を絞り込むサンプルです。
区切り文字が空白です。子孫セレクタといいます。

<style>
.d1 .p2{
	color:red;
}
</style>

<div class="d1">
	<p class="p1">あいうえお</p>
	<p class="p2">かきくけこ</p>
</div>
<div class="d2">
	<p class="p1">ABCDE</p>
</div>

2行目は、複数のセレクタを指定して絞り込んでいます。.d1と.p2の区切り文字は空白です。
7行目にd1クラスがあり9行目にp2クラスがあるので9行目がCSSの適用対象になります。

結果

上記コードの実行結果です。
CSSの適用対象の文字の色が赤になっています。

 

複数のセレクタで対象を絞り込む(区切り文字なし)

複数のセレクタで対象を絞り込むサンプルです。
区切り文字や空白はありません。

<style>
.p1.s1{
	color:red;
}
</style>

<div class="d1">
	<p class="p1 s1">あいうえお</p>
	<p class="p2 s2">かきくけこ</p>
</div>
<div class="d2">
	<p class="p1">ABCDE</p>
</div>

2行目は、複数のセレクタを指定して絞り込んでいます。.p1と.s1の間に区切り文字はありません。
8行目にp1クラスとs1クラスがあるので8行目がCSSの適用対象になります。

結果

上記コードの実行結果です。
CSSの適用対象の文字の色が赤になっています。

 

複数の属性セレクタで対象を絞り込む([ ])

複数の属性セレクタを指定して対象を絞り込むサンプルです。
角括弧[]を並べて記述します。

<style>
a[href][title]{
	background-color:LightSkyBlue;
}
</style>

<p><a href="javascript:void(0);" >テスト1</a></p>
<p><a href="javascript:void(0);" title="example1">テスト2</a></p>

2行目は、角括弧[]で複数の属性セレクタ(hrefとtitle)を指定して対象を絞り込んでいます。
7行目は、属性のhrefはありますが、titleがないので適用対象外です。
8行目は、属性のhrefとtitleがあるのでCSSの適用対象になります。

結果

上記コードの実行結果です。
CSSの適用対象の背景色が青になっています。

 

擬似クラスと属性セレクタで絞り込む

擬似クラスと属性セレクタで絞り込むサンプルです。

<style>
a:link[class="p1"]{
	background-color:LightSkyBlue;
}
</style>

<p><a href="javascript:void(0);">テスト1</a></p>
<p><a class="p1" href="javascript:void(0);">テスト2</a></p>

2行目は、擬似クラスa:lilnkと属性セレクタを指定して対象を絞り込んでいます。
7行目は、aタグはありますが、属性セレクタ(class)がないので適用対象外です。
8行目は、aタグと属性セレクタ(class="p1")があるのでCSSの適用対象になります。

結果

上記コードの実行結果です。
CSSの適用対象の背景色が青になっています。

 

擬似クラスと擬似要素を指定する

擬似クラスと擬似要素を指定するサンプルです。

<style>
a:link::before {
	content:" こんにちは "; 
	background-color:LightSkyBlue;
}
</style>

<p>テスト1</p>
<p><a href="javascript:void(0);">テスト2</a></p>

2行目は、擬似クラスのa:lilnkと擬似要素の::beforeを指定しています。
9行目のaタグで対象になり疑似要素の::beforeの箇所がCSSの適用対象になります。

結果

上記コードの実行結果です。
テスト2という文字の前にこんにちはという文字が追加され背景色が青になっています。

 

属性セレクタと擬似要素を指定する

属性セレクタと擬似要素を指定するサンプルです。

<style>
p[class="p2"]::before {
	content:" こんにちは "; 
	background-color:LightSkyBlue;
}
</style>

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

2行目は、属性セレクタp[class="p2"]の後に、擬似要素の::beforeを指定しています。
9行目のP2クラスで対象になり疑似要素の::beforeの箇所がCSSの適用対象になります。

結果

上記コードの実行結果です。
テスト2という文字の前にこんにちはという文字が追加され背景色が青になっています。

関連の記事

CSSの書き方とセレクタの一覧
CSS 子孫セレクタ/子セレクタ/隣接セレクタ/一般兄弟セレクタのサンプル
CSS 属性セレクタのサンプル(要素名[属性名="値"])
CSS 疑似要素のサンプル(::first-line/::first-letter/::before/::after)
CSS 疑似クラスのサンプル(:link/:visited/:hover/:active/:focus/:target/:lang/:enabled/:disabled/:checked)
CSS 疑似クラスのサンプル(:nth-child/:nth-last-child/:empty/:not)

△上に戻る