カテゴリー
お問い合わせ

【CSS】もう何度も同じセレクタを書かない！擬似クラス :is() の便利な使い方とメリット

HTML/CSS
目次

CSSを書いていて、「同じ親要素を持つ複数の要素に、同じスタイルを当てたい」という場面はありませんか？ 例えば、header h1, header p, header a { ... } のように、何度も同じ親セレクタ（header）を繰り返して書くのは少し面倒ですし、コードも冗長になってしまいますよね。（SCSSを使えばネストで解決できますが、素のCSSでは長くなりがちです）

そんな時に大活躍するのが、CSSのモダンな擬似クラス :is() です！

:is() を使うと、複数のセレクタをカッコ内にまとめて記述でき、コードの重複を減らしてスッキリと読みやすくすることができます。今回は、:is() の具体的な活用例と、知っておくべきメリット・注意点をご紹介します！

デモ動作

See the Pen CSS疑似クラス :is() の便利な使い方 by mikanbako (@mikanbako) on CodePen.

全画面でのデモ動作は以下のリンクからご確認下さい！（別タブで開かれます）

実装コードの紹介

【HTML】

<div class="l-wrap">
  <h2>1. 親要素が共通する要素のまとめ書き</h2>
  <article class="p-article">
    <h1>記事のタイトルです</h1>
    <p>記事の本文が入ります。</p>
    <ul>
      <li>リスト項目です</li>
    </ul>
  </article>

  <h2>2. 複数の状態（擬似クラス）のまとめ書き</h2>
  <button class="c-btn">ホバー or フォーカスしてみてね</button>

  <h2>3. 兄弟・子孫要素の複雑な指定の簡略化</h2>
  <div class="p-card">
    <h3 class="p-card__title">カードタイトル</h3>
    <p class="p-card__text">カードのテキストです。</p>
  </div>
</div>

【CSS】

.l-wrap {
  color: #3e3e3e;
  font-size: 16px;
  padding: 40px;
}

.l-wrap h2 {
  font-size: 18px;
  margin-top: 40px;
  border-bottom: 2px solid #1bb4d4;
  padding-bottom: 8px;
}

/* =========================================
   活用例1：親要素が共通する要素のまとめ書き
========================================= */
.p-article {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
}

/* ❌ 従来の書き方 */
/*
.p-article h1,
.p-article p,
.p-article ul {
  color: #c72c4c;
}
*/

/* ✨ :is() を使ったモダンな書き方 */
.p-article :is(h1, p, ul) {
  color: #c72c4c;
  margin-bottom: 10px;
}

/* =========================================
   活用例2：複数の状態（擬似クラス）のまとめ書き
========================================= */
.c-btn {
  padding: 12px 24px;
  background: #1bb4d4;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

/* ❌ 従来の書き方 */
/*
.c-btn:hover,
.c-btn:focus,
.c-btn:active {
  background: #138fa9;
  transform: translateY(2px);
}
*/

/* ✨ :is() を使ったモダンな書き方 */
.c-btn:is(:hover, :focus, :active) {
  background: #138fa9;
  transform: translateY(2px);
}

/* =========================================
   活用例3：複雑な指定の簡略化
========================================= */
.p-card {
  background: #fff;
  padding: 20px;
  border: 1px solid #ddd;
}

/* ❌ 従来の書き方 */
/*
.p-card .p-card__title,
.p-card .p-card__text {
  letter-spacing: 0.1em;
}
*/

/* ✨ :is() を使ったモダンな書き方 */
.p-card :is(.p-card__title, .p-card__text) {
  letter-spacing: 0.1em;
}

コードの解説・こだわったポイント

コードの重複を防ぎ、可読性を上げる（DRY原則）

上記のデモの通り、:is() の最大のメリットは「同じセレクタを何度も書かなくて済む」ことです。プログラミングの基本である「DRY（Don’t Repeat Yourself）原則」をCSSでも簡単に実現でき、後からクラス名を変更する際も1箇所の修正で済むため、メンテナンス性が格段に向上します。

エラーに強い（寛容なセレクタ解析）

通常のCSSでカンマ区切りのセレクタ（例：h1, p, :unknown）を書いた場合、その中に1つでもブラウザが理解できない無効なセレクタ（:unknownなど）があると、ルール全体が無効化されてしまいます。 しかし、:is(h1, p, :unknown) のように記述した場合、無効なセレクタだけが無視され、有効なもの（h1やp）にはちゃんとスタイルが適用されるという、エラーに強い（寛容な）仕様になっています！

【注意】詳細度は「カッコ内で最も高いもの」になる

:is() を使う上で一つだけ注意点があります。それは「詳細度（スタイルの優先順位）」の計算です。 :is() 自体は詳細度を持ちませんが、「カッコ内に指定されたセレクタの中で、最も高い詳細度」が全体の詳細度として扱われます。

例えば、:is(h1, .title, #header) と書いた場合、このセレクタ全体の詳細度は、最も強いIDセレクタ（#header）と同じになってしまいます。そのため、意図せず他のスタイルを上書きしてしまわないよう、カッコ内に入れるセレクタの種類（詳細度の強さ）には少し注意が必要です。

【注意】擬似要素（::before, ::after）には使えない

:is() を使う上で、もう一つ重要な注意点があります。それは、::before や ::after といった「擬似要素」はカッコ内に指定できないという仕様です。

/* ❌ これは無効になります（スタイルが適用されない） */
.p-box:is(::before, ::after) {
  content: "";
  display: block;
}

/* ⭕️ 擬似要素の場合は、従来通り分けて書く必要があります */
.p-box::before,
.p-box::after {
  content: "";
  display: block;
}

:hover などの「擬似クラス」には使えますが、「擬似要素」には使えないという違いをしっかり覚えておきましょう！

補足：ブラウザの対応状況について

:is() は非常に便利なモダンCSSの機能であり、現在では主要なブラウザ（Chrome, Safari, Edge, Firefoxなど）で完全にサポートされているため、安心して使用することができます。

より詳しい仕様や最新の対応状況については、以下の公式ドキュメント等をご参照ください。

・MDN: :is()
・Can I use: :is()

まとめ

今回は、モダンなCSSの擬似クラス :is() の便利な使い方とメリットをご紹介しました。

SCSSを使っている環境であればネスト（入れ子）機能で解決できることも多いですが、SCSSを使わないプレーンなCSSの環境や、フレームワークのカスタマイズ時などにおいて :is() は非常に強力な武器になります。

新しいCSSの機能を積極的に取り入れ、より美しく、保守性の高いコーディングを心掛けていきたいと思います！

Prev
Next

関連記事