:is() を使ってセレクタの記述を簡潔にする方法【CSS入門】

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回は、CSSで複数の要素に同じスタイルを適用したいときにとっても便利な、:is() というCSSの書き方についてご紹介します。

HTMLやCSSを書いていて、こんなことを感じたことはありませんか？

「h1, h2, h3 すべてに同じ margin を入れたいけど、毎回セレクタが長くなって面倒…」
「カードやセクションごとに、似たようなセレクタが何行も並んでしまって見づらい…」

そんなときに活躍するのが、CSSの擬似クラス :is() です。
これを使えば、CSSの記述がスッキリと簡潔になり、メンテナンス性もグンと上がります。

この記事では、:is() の基本的な使い方から、具体的な活用例、さらには注意点まで、わかりやすく解説していきます。

初心者の方はもちろん、CSSの整理整頓に悩んでいる方にもおすすめの内容です。
それではさっそく見ていきましょう！

---

:is()とは？基本の使い方

:is() は、CSSで複数のセレクタをまとめて扱うことができる擬似クラスです。
これまではカンマで区切って複数指定していた部分を、:is() にまとめてスッキリ記述できます。

 :is(h1, h2, h3) { margin-bottom: 1em; } 

このように、:is() 内に複数のセレクタをカンマ区切りで記述すると、どれかにマッチすればスタイルが適用されます。
複数セレクタをまとめて扱いたいときに非常に便利です。

---

:is()を使うメリット

たとえば、.box h1, .box h2, .box h3 のように、繰り返し同じ親セレクタを使っていたコードも、:is() を使えば簡潔にできます。

---

実用例：ネストしたセレクタをスッキリ書く

例えば .card クラス内のタイトル要素すべてに同じ色を適用したいとします。従来の書き方はこちら：

 .card h1, .card h2, .card h3 { color: #333; } 

:is() を使えば、次のようにスッキリ書けます。

 .card :is(h1, h2, h3) { color: #333; } 

このように、冗長な記述を減らして保守性を高めることができます。

---

注意点：is()の使いすぎに注意

便利な :is() ですが、万能ではありません。以下の点には注意が必要です。

補足ですが、:is() はセレクタの詳細度（specificity）をそのまま保持しますが、:where() は 0 になります。
この違いが効き方に影響することもあるので、使い分けに注意しましょう。

:where()との違いを知っておこう

:is() とよく似たセレクタに :where() があります。
どちらもセレクタをまとめて簡潔に書くための構文ですが、大きな違いは「詳細度（specificity）」です。

 :is(h1, h2) { color: red; } :where(h1, h2) { color: blue; } 

この例では、h1 や h2 に対して、より詳細度が高い :is() の赤い色が優先されます。
一方、:where() は常に詳細度0として扱われるため、他のセレクタに簡単に上書きされてしまいます。

適材適所で使い分けることで、CSSのコントロール性が高まります。

---

is()のNG使用例と注意点

便利な :is() ですが、使い方を間違えると逆にコードがわかりにくくなったり、意図しないスタイルの衝突が起こることもあります。

 :is(.box:is(.highlight, .alert)) { background: yellow; } 

:is() の中にさらに :is() を入れると、可読性が大きく下がります。
この場合はクラスを分けて明示的に記述した方が明快です。

 :is(header, footer, section) p { font-size: 14px; } 

このような書き方をすると、header内・footer内・section内のすべての p 要素に一括でスタイルが適用されてしまいます。
本当にその3つすべてに適用したいか？をよく確認してから使うべきです。

これらを踏まえたうえで、:is() を取り入れることで、CSSを美しく・効率的に整えることができます。

---

まとめ：is()でCSSをもっとスマートに

:is() を使えば、CSSの記述がコンパクトになり、読みやすさ・保守性がぐっと上がります。
特に、複数の要素に同じスタイルを適用する場面や、セクション・カードなどの構造が増える大規模なサイトでは大活躍します。

「CSSがゴチャゴチャしてきたな」と感じたら、ぜひ:is()を取り入れてみてください。
ちょっとした工夫が、デザインの質と開発効率を大きく変えるかもしれません。

 

satokotadesignキャンペーン実施中！