こんにちは、wdtチームの山本です。
最近CSSセレクタを調べていく中で「:is()」という書き方を見かけることが増えてきました。
今回はこのセレクタについて実際の挙動を確認しながら整理していきます。
前回の記事
:is()とは
:is()は、複数のセレクタをまとめて指定できる関数型セレクタです。
例えば次のように書くことで、同じスタイルを複数要素に適用できます。
CSS
:is(h1, h2, h3) {
color:black ;
}これはそれぞれの見出しに対して、同じスタイルをまとめて適用している形になります。
一方で、次のように書いても同じ結果になります。
CSS
h1, h2, h3 {
color: black;
}参考の結果画像
では、:is()は本当に必要なのでしょうか？？？
結論から言うと、単純なケースでは不要です。
ただし、設計次第では非常に便利な場面があります。
今回のような単純な指定であれば、どちらも同じ見た目・同じ結果になるため、無理に:is()を使う必要はありません。
なぜ:is()が存在するのか
:is()の本質は「セレクタの整理」と「複雑な指定の簡略化」にあります。
特に親要素と組み合わせることで真価を発揮します
CSS
.card :is(h1, h2, h3) {
color: #00adb5;
}これを通常の書き方にすると次のようになります。
CSS
.card h1,
.card h2,
.card h3 {
color: #00adb5;
}
要素が増えるほど記述量が増えていきますが、:is()を使うことでまとめて管理でき、可読性が上がります。
また、複数のブロックに対して同じルールを適用したい場合にも有効です
HTML
<article>
<h2>article の H2</h2>
</article>
<section>
<h2>section の H2</h2>
</section>
<main>
<h2>main の H2</h2>
</main>CSS
:is(article, section, main) h2 {
margin-top: 40px;
}
このように、「複数の領域に共通するスタイル」を一行で表現できます。
さらに、将来的な拡張にも強いという特徴があります
CSS
:is(h1, h2, h3, h4, h5, h6) {
line-height: 1.4;
}見出しが追加された場合でも、この1箇所を修正するだけで対応できます。
【補足】:is()と:where()の違い
:is()と似たものに:where()があります。
違いはシンプルで、:where()はCSSの詳細度※（specificity）が常に0として扱われる点です。
つまり、:where()は後からの上書きがしやすい設計になります。
一方:is()は、含まれるセレクタの中で最も詳細度の高いものが適用されます。
CSS
h1 {//優先度：高
color: green;
}
:is(h1, h2) {//優先度：中
color: black;
}
:where(h1, h2, h3) {//優先度：低
margin: 0;
line-height: 1.4;
color: red;
}
※CSSには「詳細度（specificity）」というルールがあり、通常は id > class > tag の順で強くなります。:where()は詳細度が0として扱われるため、他のCSSと競合した場合でも優先されず、常に上書きされる前提のスタイルになります。
まとめ
:is()は単体では必須の機能ではありません。
しかし、複数要素のグルーピングや構造が複雑になる場面では、記述量の削減と可読性の向上に大きく貢献します。
単純な指定では従来のセレクタで十分ですが、設計を意識する場面では:is()を使うことでCSSを整理しやすくなります。
