【CSS】複数セレクタをシンプルにまとめる:is() と :where() の使い方を解説
皆さん、こんにちは。ひらくです。
今回は、CSSの便利な疑似クラス、:is() について解説します。
CSSを書いていると、例えば「ヘッダーとメインとフッター、全部のH1を赤くしたい！」という時に、セレクタを何度も書いて長くなってしまうことはありませんか？
:is() を使うと、そんな記述をスッキリとグループ化できます。また、似た機能である :where() との違い（詳細度の罠）についても詳しく触れていきます。
動画で確認したい方はこちら↓
従来の書き方 vs :is() を使った書き方
まずは、よくあるHTML構造を例に見てみましょう。
HTML例
<header> <h1>こんにちは</h1> <p>サンプル</p> <h2>タイトル</h2> </heade> <main> <h1>こんにちは</h1> <p>サンプル</p> <h2>タイトル</h2> </main> <footer> <h1>こんにちは</h1> <p>サンプル</p> <h2>タイトル</h2> </footer>
【CSS】今までの書き方（冗長になりがち）
header、main、footer の中にある h1 すべてを赤文字にしたい場合、従来はこのようにカンマ区切りで書いていました。
/* 記述が長くて読みにくい... */
header h1,
main h1,
footer h1 {
color: red;
}
これだと、修正する時に記述量が多くて大変ですし、改行しないと可読性も下がります。
:is() を使った書き方（スッキリ！）
そこで、:is() を使うと、共通部分をまとめてグループ化できます。
/* :is() でまとめてスッキリ！ */
:is(header, main, footer) h1 {
color: red;
}
これだけで、「header または main または footer の中の h1」という意味になります。記述量が減り、直感的に分かりやすくなりました。
応用：複数の要素をかけ合わせる
:is() の真骨頂は、組み合わせができる点です。
例えば、「各エリアの h1 だけでなく h2 も赤くしたい」という場合を考えてみましょう。
今までの書き方
header h1, header h2,
main h1, main h2,
footer h1, footer h2 {
color: red;
}
どんどん長くなってしまいますね。
:is() を使った書き方
親要素だけでなく、子要素側も :is() でまとめることができます。
:is(header, main, footer) :is(h1, h2) {
color: red;
}
非常にシンプルになりました！
注意点として、:is(…) と次のセレクタの間には、通常のCSSと同じように半角スペース（子孫セレクタの場合）が必要です。
- 書き方のポイント
例えば「header の中にある text クラス」を指定するときは、「header .text」のように要素とクラスの間にスペースを入れますよね。それと同じように、:is() の後ろにも関係性を示すスペースを忘れないようにしましょう。
:is() と :where() の決定的な違い「詳細度」
:is() とほぼ同じ機能を持つ :where() という疑似クラスがあります。
書き方は全く同じです。
/* 書き方は同じ */
:where(header, main, footer) h1 {
color: red;
}
では、何が違うのでしょうか？それは 「CSSの詳細度（Specificity）」 です。
:is() の詳細度
:is() 内にある一番強いセレクタの詳細度が適用されます。
例えば、:is(#id, p) と書いた場合、IDが含まれているため、このセレクタ全体が「ID並みの強さ（詳細度）」を持ちます。
:where() の詳細度
:where() の詳細度は常に 0 です。
中身にIDが含まれていようがクラスが含まれていようが、:where() 自体は優先順位を持ちません。
実験：優先順位の逆転
以下のコードを見てみましょう。CSSは通常、下に書いたものが優先されます。
/* 1. :is() を使って赤色指定（IDを含んでいるため詳細度が高い）*/
:is(#test, p) {
color: red;
}
/* 2. :where() を使って青色指定（詳細度は0）*/
:is(#test, p) {
color: blue;
}
コードは書いた順に読み込まれていきますので、この場合、通常なら下に書いた blue が適用されるはずですが、表示結果は「赤（red）」になります。
- :is() は #test (ID) の詳細度を引き継ぐため、優先度が高くなります。
- :where() は詳細度が0なので、優先順位負けしてしまいます。
どっちを使えばいい？
- 基本は :is() を使う
通常のコーディングでは :is() の方が直感的で、意図しないスタイル崩れ（詳細度不足による上書き不可など）を防ぎやすいです。
- :where() はリセットCSSなどに
「後から簡単に上書きさせたい」というベーススタイルやリセットCSSを作る場合は、詳細度を持たない :where() が便利です。
まとめ
:is() と :where() は、CSSをすっきり書くために役立つ便利な疑似クラスです。詳細度の仕組みを理解しながら、状況に応じて使い分けていくことで、CSSコードの可読性と保守性がグッと上がります。日々のコーディングの中で、ぜひ柔軟に取り入れてみてください。