CSSで複数のセレクタを指定する方法【現役エンジニアが解説】
今回は、CSSで複数のセレクタを指定する方法について、複数のセレクタを対象にする場合と複数のセレクタで絞り込む場合に分け、簡単に解説していきます。
複数のセレクタを対象にする場合
複数のセレクタを対象にする場合は、カンマで区切ります。
“セレクタ1,セレクタ2″とすることで、セレクタ1とセレクタ2が対象になります。
.hoge1,.hoge2{
color:red;
}
上記のコードでは、hoge1もしくはhoge2というクラスを持つ要素の文字色を赤色にしています。
複数の属性セレクタで絞り込む場合
複数の属性セレクタで絞り込むには、属性セレクタを連続で書きます。
“要素[属性名1][属性名2]”とした場合は、属性名1と属性名2を持つ要素が対象となります。
a[href][title]{
color:green;
}
上記のコードでは、href属性とtitle属性の両方の属性を持つa要素の文字色を緑色にしています。
複数のクラスセレクタで絞り込む場合
複数のクラスセレクタで絞り込むためには、クラスセレクタを続けて記述します。
“.クラス名1.クラス名2″と指定すると、クラス名1とクラス名2を併せ持つ要素を絞り込めます。
.hoge1.hoge2{
color:blue;
}
上記のコードでは、hoge1とhoge2という2つのクラスをいずれも持っている要素の文字色を青色にしています。