[CSS]ちょっとだけ複雑なセレクタの指定方法

ちょっとだけ複雑なセレクタの指定方法には、下記の4パターンがあります。

a,b（複数のセレクタをカンマで区切る）
a b（複数のセレクタを半角スペースで区切る）
a>b（複数のセレクタの間に>をつける）
ab（複数のセレクタを並べて記述する）

以下のようなHTMLがあると仮定して、説明していきます。

<ul class="class1">
<li class="class2">アメリカンショートヘア</li>
<li>ねこって<span class="class2">かわいい</span>な</li>
<li>これはCSSの話ですよ</li>
</ul>
<div class="class2">犬もいいよね</div>

a,b（複数のセレクタをカンマで区切る）

複数のセレクタをカンマで区切った場合、それぞれに同じプロパティと値が適用されます。

.class1,.class2{
color:blue;
}

このように指定すると、class1とclass2の両方にcolor:blue;が適用されます。

a b（複数のセレクタを半角スペースで区切る）

セレクタをスペースで区切った場合、「aの配下にあるbにスタイルを適用する」という意味になります。

以下のようにCSSを記述すると、class1の配下にあるclass2にだけcolor:yellow;を適用します。

.class1 .class2{
color:yellow;
}

この場合、「アメリカンショートヘア」と「かわいい」は黄色になりますが、「犬もいいよね」は黄色になりません。

a>b（複数のセレクタの間に>をつける）

セレクタの間に>をつけると、「aの子要素にあるbにスタイルを適用する」という意味になります。

半角スペースで区切った時と似ていますが、aの直下にあるbにしかスタイルが適用されないので、さらにその配下にある要素には適用されません。

.class1>.class2{
color:green;
}

この場合、「アメリカンショートヘア」だけ緑色になります。

ab（複数のセレクタを並べて記述する）

セレクタを並べて記述した場合、「aとb両方の属性を持つ要素にスタイルを適用する」という意味になります。

span.class2{
color:red;
}

このように記述することで、span要素のうちクラスclass2を持った要素にだけcolor:red;を適用します。

そのため、リストの中の「かわいい」は文字が赤色になりますが、同じクラスを持っているdiv要素の「犬もいいよね」は、条件に合致しないので文字色は変わりません。

あとがき

セレクタの指定方法には、様々な方法があることがおわかりいただけたと思います。これらの指定方法を工夫していくことで、より柔軟なスタイルの変更ができるようになりますので、ぜひ覚えてください。