CSSセレクタでor条件(AまたはB)and条件(AかつB)で複数指定する方法

CSSセレクタにおいて、クラスAにもクラスBにも指定したいとき、クラスAとクラスB両方指定されている場合のみ指定したいときがあるかと思います。

CSSセレクタでor条件(AまたはB)、and条件(AかつB)で複数指定する方法を説明します。

セレクタの基礎はこちら↓

or条件（AまたはB）はカンマ区切り

AにもBにも指定する場合です。

クラス（セレクタ）と クラス（セレクタ） のあいだに「,（カンマ）」を記述します。「,」の前後には空白があってもOKです。

ただし「{」の直前に「,」があってはいけません。

<style>
.A,.B{
color:red;
border:1px solid #000;
}
</style>
<p class="A">Aかかる</p>
<p class="B">Bかかる</p>
<p class="A B">ABかかる</p>

and条件（AかつB）は密接

AとB両方が指定されているタグにのみ指定する場合です。

クラス（セレクタ）と クラス（セレクタ） を密接させます。空白も「,」もあってはいけません。

<style>
.A.B{
color:red;
border:1px solid #000;
}
</style>
<p class="A">Aかからない</p>
<p class="B">Bかからない</p>
<p class="A B">ABかかる</p>

セレクタはクラス以外にも複数あり、それらにもand条件を使うことで必要以上にクラスを付与しないことができます。

以下で具体例を挙げてさらに説明します。

なお、そもそもどんなセレクタがあるのかわからないというかたはこちらをご確認ください。

要素セレクタとクラス　div.C

<style>
div.C{
color:red;
border:1px solid #000;
}
</style>
<div class="A">div.Aかからない</div>
<p class="C">p.Cかからない</p>
<div class="C">div.Cかかる</div>

上記のようにクラスCのdivのみに指定できます。

要素セレクタは必ず最初に指定しそのあとクラスなどを密接させます。

属性セレクタとクラス　input[type="text"].D

<style>
input[type="text"].D{
border="2px solid red"
}
</style>
<input type="text" class="D" value="テキスト">

これまで同様セレクタ同士を密接させます。

ちなみに「input[type="text"].D」も「input.D[type="text"]」も同じです。

クラスと疑似クラス　.E:link

<style>
.E:link{
color:red;
}
</style>
<a href="#" class="E">リンク</a>

これまで同様セレクタ同士を密接させます。

ちなみに「.E:link」も「:link.E」も同じです。

属性セレクタと疑似クラス　a[href="index.php"]:visited

<style>
a[href="index.php"]:visited{
color:red;
}
</style>
<a href="index.php">リンク</a>

これまで同様セレクタ同士を密接させます。

ちなみに「a[href="index.php"]:visited」も「a:visited[href="index.php"]」も同じです。

クラスと疑似要素　.F::after

<p class="F">Pタグ</p>
<style>
.F::after{
content:"after";
}
</style>

疑似クラスと属性セレクタと疑似要素　a[href="index2.php"]:link::after

いっぺんにやってみましょう。

<a href="index2.php">リンク</a>
<style>
a[href="index2.php"]:link::after{
content:"after";
color:orange;
}
</style>

これまで同様セレクタ同士を密接させます。

疑似要素は必ず最後です。入れ替えると効きません。

複数クラス指定するメリット

or条件（AまたはB）の場合

CSS修正が楽

デザイン上AとB両方同じ数値を指定することが明らかなときは「AまたはB」の形で指定しておくと微調整・CSS修正が楽です。

<style>
.A{
color:red;
border:1px solid #000;
}
.B{
color:red;
border:1px solid #000;
}
</style>
<p class="A">Aかかる</p>
<p class="B">Bかかる</p>

↑↓どちらもまったく同じ結果になります。

<style>
.A,.B{
color:red;
border:1px solid #000;
}
</style>
<p class="A">Aかかる</p>
<p class="B">Bかかる</p>

コードが少なくて済む

コードが少ないということはそれだけミスが減ります。

and条件（AかつB）の場合

クラスを指定することなく条件指定できる

疑似クラスや属性セレクタを指定することでクラスの指定が不要になる場合があります。コードが少なくて済む分ミスも減ります。

まとめ

or条件（AまたはB）の場合

クラス（セレクタ）と クラス（セレクタ） のあいだに「,（カンマ）」を記述します。

and条件（AかつB）の場合

クラス（セレクタ）と クラス（セレクタ） を密接させます。

　

以上、CSSセレクタでor条件(AまたはB)、and条件(AかつB)で複数指定する方法でした。