ホームへ

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

2020年04月03日

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

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

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

or条件(AまたはB)はカンマ区切り

.A,.B

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

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

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

Aかかる

Bかかる

ABかかる

<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>

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。

and条件(AかつB)は密接

.A.B

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

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

Aかからない

Bかからない

ABかかる

<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

div.Aかからない

p.Cかからない

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タグ

<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)で複数指定する方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ