CSS疑似クラス :is() の実用例と活用パターン

はじめに

CSSの:is()擬似クラスは、複数のセレクタをまとめて指定できる便利な構文です。コードを短く保ち、メンテナンス性を高める効果があります。本記事では、実務で役立つ具体的な利用例を紹介します。

基本構文

:is(selector1, selector2, selector3) {
  /* スタイル */
}

• 複数のセレクタを一括指定できる
• ネストや長いセレクタの記述を省略可能

実用例

1. 複数の見出しスタイルをまとめる

:is(h1, h2, h3) {
  font-family: "Noto Sans JP", sans-serif;
  margin-bottom: 1rem;
}

→ 見出しタグごとに同じ指定を繰り返す必要がない。

2. ボタンのホバー・フォーカス時の共通デザイン

button:is(:hover, :focus) {
  background: #2c7be5;
  color: #fff;
}

→ ホバーとフォーカスの状態をまとめて指定できる。

3. ナビゲーション内の特定要素

nav :is(a, button) {
  padding: 0.5rem 1rem;
  text-decoration: none;
}

→ ナビゲーション内のリンクとボタンを共通スタイルに。

4. 長いセレクタの簡略化

.article :is(h2, h3, h4) + p {
  margin-top: 0;
}

→ .article h2 + p, .article h3 + p, .article h4 + p をまとめられる。

注意点

• 古いブラウザ（特にIE）では未対応
• 対応状況を確認して使うことが重要

まとめ

:is()を活用すれば、冗長になりがちなCSSをシンプルにできます。特に複数の状態や要素に同じスタイルを当てたい場合に便利です。今後のスタイル設計では、積極的に取り入れることで可読性と保守性が向上します。