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

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

目次

1つのCSS命令群に対して複数のセレクタを指定する

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

コード

2行目は、波括弧{}で囲まれた1つのCSS命令群に対して、複数のセレクタ(#p11と#p12と#p13)を指定しています。(カンマ区切り)
8,10,11行目がCSSの適用対象になります。

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

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

</body>

サンプル

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

あいうえお

かきくけこ

さしすせそ

たちつてと

 

複数のセレクタで対象を絞り込む

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

※複数のセレクタが空白で区切られているのは子孫セレクタです。
階層構造でセレクタを指定するサンプル(子孫/子/隣接/一般兄弟セレクタ)

コード

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

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

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

</body>

サンプル

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

あいうえお

かきくけこ

さしすせそ

たちつてと

 

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

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

コード

2行目は、角括弧[]で複数の属性セレクタ(hrefとtitle)を指定して対象を絞り込んでいます。
9行目は、属性のhrefはありますが、titleがないので適用対象外です。
10行目は、属性のhrefとtitleがあるのでCSSの適用対象になります。
CSS 属性セレクタのサンプル(要素名[属性名="値"])

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

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

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

</body>

サンプル

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

 

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

2行目は、擬似クラスa:lilnkと属性セレクタを指定して対象を絞り込んでいます。
8行目は、aタグはありますが、属性セレクタ(class)がないので適用対象外です。
10行目は、aタグと属性セレクタ(class="p41")があるのでCSSの適用対象になります。
CSS 疑似クラスのサンプル(:link/:visited/:hover/:active/:focus/:target/:lang/:enabled/:disabled/:checked)
CSS 属性セレクタのサンプル(要素名[属性名="値"])

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

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

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

</body>

サンプル

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

テスト1

テスト2

 

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

2行目は、擬似クラスのa:lilnkと擬似要素の::beforeを指定しています。
11行目は、aタグがあり疑似要素の::beforeの箇所がCSSの適用対象になります。
CSS 疑似クラスのサンプル(:link/:visited/:hover/:active/:focus/:target/:lang/:enabled/:disabled/:checked)
CSS 疑似要素のサンプル(::first-line/::first-letter/::before/::after)

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

	<p>テスト1</p>

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

</body>

サンプル

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

 

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

2行目は、属性セレクタp[class="p62"]の後に、擬似要素の::beforeを指定しています。
11行目は、クラスセレクタがあり疑似要素の::beforeの箇所がCSSの適用対象になります。
CSS 属性セレクタのサンプル(要素名[属性名="値"])
CSS 疑似要素のサンプル(::first-line/::first-letter/::before/::after)

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

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

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

</body>

サンプル

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

テスト1

テスト2

関連の記事

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)



△上に戻る