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

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

目次

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

波括弧{}で囲まれた1つのCSS命令(群)に対して複数のセレクタを対象にするサンプルです。
カンマで区切ります

コード

2行目は、1つのCSSに複数のセレクタ(#p11と#p12と#p13)を指定しています。(カンマ区切り)
7,9,10行目がCSSの適用対象になります。

<style>
#p11,#p12,#p13{
	color:red;
}
</style>

<p id="p11">あいうえお</p>
<p>かきくけこ</p>
<p id="p12">さしすせそ</p>
<p id="p13">たちつてと</p>

サンプル

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

あいうえお

かきくけこ

さしすせそ

たちつてと

 

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

複数のセレクタで対象を絞り込むサンプルです。
区切り文字は指定しません。空白も入れません。

※複数のセレクタが空白で区切られているのは子孫セレクタです。
CSS 子孫セレクタ/子セレクタ/隣接セレクタ/一般兄弟セレクタのサンプル

コード

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

<style>
.p21.a2{
	color:red;
}
</style>

<p class="p21 a1">あいうえお</p>
<p>かきくけこ</p>
<p class="p21 a2">さしすせそ</p>
<p class="p21 a3">たちつてと</p>

サンプル

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

あいうえお

かきくけこ

さしすせそ

たちつてと

 

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

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

コード

2行目は、角括弧[]で複数の属性セレクタ(hrefとtitle)を指定して対象を絞り込んでいます。
7行目は、属性のhrefはありますが、titleがないので適用対象外です。
9行目は、属性のhrefとtitleがあるので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行目は、擬似クラスa:lilnkと属性セレクタを指定して対象を絞り込んでいます。
7行目は、aタグはありますが、属性セレクタ(class)がないので適用対象外です。
9行目は、aタグと属性セレクタ(class="p41")があるのでCSSの適用対象になります。

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

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

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

サンプル

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

テスト1

テスト2

 

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

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

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

<p>テスト1</p>

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

サンプル

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

 

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

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

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

<p class="p61">テスト1</p>

<p class="p62">テスト2</p>

サンプル

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

テスト1

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

△上に戻る