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

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

サンプル	複数のセレクタを対象にする(セレクタをカンマ区切り)
	階層構造の対象を絞り込む(セレクタの区切り文字が空白)
	対象を絞り込む(セレクタの区切り文字なし)
	テーブルのセル(td)内の文字を中央寄せにする
	複数の属性セレクタで対象を絞り込む([ ])
	擬似クラスと属性セレクタで絞り込む
	擬似クラスと擬似要素を指定する
	属性セレクタと擬似要素を指定する
	CSS 階層構造でセレクタを指定(子孫/兄弟)※別ページ

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

セレクタ1,セレクタ2

複数のセレクタを対象にする場合、セクレタをカンマで区切ります。

<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の適用対象の文字の色が赤になっています。

階層構造の対象を絞り込む(セレクタの区切り文字が空白)

セレクタ1 セレクタ2

階層構造の対象を絞り込む場合、セレクタの区切り文字を半角スペースにします。
子孫セレクタといいます。

<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の適用対象の文字の色が赤になっています。

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

セレクタ1セレクタ2

対象を絞り込む場合、セレクタの区切り文字は無しにします。

<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の適用対象の文字の色が赤になっています。

テーブルのセル(td)内の文字を中央寄せにする

table td

テーブルのセル(td)内の指定は、セレクタをtable tdにします。

<style>
    table td {
        text-align: center;
        border: 1px solid;
        width: 100px;
    }
    table {
        border-collapse: collapse;
    }
</style>
<table>
    <tbody>
        <tr>
            <td>abc</td>
            <td>123</td>
            <td>test</td>
        </tr>
    </tbody>
</table>

上記コードの実行結果は以下のようになります。

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

[セレクタ1][セレクタ2]

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

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

<p><a href="javascript:void(0);" >テスト１</a></p>
<p><a href="javascript:void(0);" title="example1">テスト２</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);">テスト１</a></p>
<p><a class="p1" href="javascript:void(0);">テスト２</a></p>

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

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

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

疑似クラス疑似要素

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

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

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

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

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

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

属性セレクタ疑似要素

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

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

<p class="p1">テスト１</p>
<p class="p2">テスト２</p>

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

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