おお、これはかなり便利になる！ 複数のセレクタをまとめて対象にできるCSSの新機能クラスプレフィックスセレクタ

CSSで複数のセレクタをまとめて記述できたら楽なのに、と思ったことがある人も多いと思います。

.btn-primary, .btn-secondary, .btn-danger といった同じプレフィックスを持つ複数のクラスをまとめて、.btn-*でスタイルを設定できるようにするクラスプレフィックスセレクタ（-*）の仕様が固まったので、紹介します。

Target Multiple Classes with the Class Prefix Selector
by Bramus!

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• 課題: 複数のプレフィックス付きクラスを対象にする
• 解決方法: CSSのクラスプレフィックスセレクタ
• 空の文字列について
• ダッシュ以外について
• |=セレクタを再利用してはどうでしょうか
• ブラウザのサポート

はじめに

CSSで同じプレフィックスを持つ複数のクラスを対象にする場合、通常はすべてクラスにスタイルを設定するか、余分なベースクラスを追加するか、パフォーマンスの低い属性セレクタを使用するしかありませんでした。

この状況を改善するために、CSSに新しいセレクタ「クラスプレフィックスセレクタ（.preix-*）が導入されます。

この機能はつい最近（2週間前）に仕様が確定したばかりで、現時点では仕様書の文面にのみ存在しています。ブラウザでの実装に向けて準備が整うまでに、仕様が変更される可能性があります。

課題: 複数のプレフィックス付きクラスを対象にする

CSSのclass属性で使用するクラス名を決める際、グループ化や階層構造を明確にするためにプレフィックス（接頭辞）を使用するのが一般的です。たとえば、.btn-primary, .btn-secondary, .btn-danger といったクラス名を目にしたことがあると思います。

現在、これらのボタンすべてに共通のスタイルを設定するときには、通常はそれらのクラス名を列挙するか、別の.btnというベースクラスを導入する必要があります。

また、部分文字列一致の属性セレクタを使用する人もいると思いますが、これはパフォーマンスが劣ります。

解決方法: CSSのクラスプレフィックスセレクタ

2026年8月にベルリンで開催されたCSSワーキンググループの対面会議において、CSSセレクタレベル5の仕様に「クラスプレフィックスセレクタ（Class Prefix Selector）」を追加することが決定されました。このアイデアは、2024年にLea Verou氏によって提案されたものです（w3c/csswg-drafts/#10001）。

その構文は極めてシンプルです。

末尾に-*を付けるだけで、そのセレクタは「クラスプレフィックスセレクタ」になり、ハイフンで区切られたプレフィックスで始まるすべてのクラスにマッチするようになります。

これはユーティリティクラスやデザインシステムにとって大きなメリットです。HTMLのコード量を肥大化させたり、壊れやすい属性セレクタを記述することなく、関連する要素のグループを簡単にターゲットに設定できます。

空の文字列について

議論中に浮上した興味深い問題は、.foo-*が空文字列と一致すべきかどうかです（w3c/csswg-drafts/#14291）。つまり、単に.foo-*というクラスを持つだけの要素にも.foo-*がマッチすべきか、ということです。

デフォルトの正確な挙動についてはまだ調整中ですが、現時点の仕様ではこのセレクタはプレフィックスで始まり、かつプレフィックスの後に少なくとも1文字が続くクラス（ただし、その最初の文字がハイフンでないもの）にのみマッチするように規定されています。

したがって、class="foo-"は、.foo-*にマッチしません。これは妥当な仕様だと思います。同様に、class="foo--"にもマッチしませんが、これもおそらく問題ないでしょう。

ダッシュ以外について

「クラスプレフィックスセレクタ」は少なくとも当初は、ハイフンで区切られたプレフィックスに限定されるでしょう。アンダースコア（_）など他の区切り文字については、皆さまからの要望次第で将来的には選択肢として追加される可能性はあります。

現時点で明確なのは、何らかの区切り文字が必須であることです。任意のプレフィックス（.foo*など）は認められません。それには少なくとも2つの理由があります。

1. 意図せずにマッチの範囲を広げてしまう可能性があります。たとえば、.foo*をOKにしてしまうと、.footerにもマッチします。
2. セレクタのパフォーマンス。ブラウザは通常、セレクタのマッチングを高速化するためにクラスセレクタ用のバケットを作成します。任意のワイルドカードを追加すると、その最適化が機能しなくなります。

同様に、セレクタの途中にワイルドカードがあるクラス（たとえば.card-*-primary）を使用することも許可されません。

|=セレクタを再利用してはどうでしょうか

また、会議では既存の「ダッシュマッチ属性セレクタ（|=）」を再利用するという案も提起されました。新しく「.foo-*」という構文を導入する代わりに、単に「[class|="foo"]」と記述してはどうか、というものです。

私も当初はそれが良い案だと思いましたが、ワーキンググループは最終的に妥当な理由からこの案を却下しました。

まず第一に、|=セレクタにはいくつかの問題があり、ワイルドカードによるクラスマッチングの即座に適用可能な解決策とはなり得ないからです。

• |=演算子は、本来[lang|="en"]のような言語属性のために作成されました。その仕様上、ハイフンで区切られたプレフィックス（en-usなど）だけでなく、完全一致する値（en）にもマッチします。会議でも指定された通り、これはユーティリティクラスにおいて重大なトラブル（意図せぬ副作用）を招く原因となります。たとえば、.bi-*というアイコンすべてを対象にしたい場合、それらのスタイルが誤って独立した.biベースクラスにまで適用されてしまうことは避けねばなりません。
• |=セレクタをクラスのマッチングで機能させるには、その動作を変更させる必要があります。現在このセレクタは、属性の文字列の先頭部分のみをチェックする仕組みになっています。たとえば、<div class="card btn-primary">のように複数のクラスが設定された要素がある場合、btn-primaryがclass属性の先頭には位置していないため、[class|="btn"]というセレクタではマッチしません。
• セレクタのパフォーマンス（これについては上記の通りです）。

しかし、もっとも重要な理由は、CSSにおけるワイルドカードの大きな意義にあります。CSSWG内では（Lea氏も推進）、CSS全体でワイルドカードを標準化するための大規模な取り組みが進行中です。

プレフィックスの構文として、-*を選択することで、この構文は将来的にワイルドカード属性名（たとえば、[data-*]）やワイルドカード（カスタム）要素名（たとえば、custom-framework-*）といった拡張機能にも再利用できます。

|=は、属性値に対してのみ機能するため、それ以外のユースケースでは事実上行き止まりになります。

ブラウザのサポート

CSSの「クラスプレフィックスセレクタ」は2週間前にベルリンで開催されたCSSWGの対面会議（F2F）で決まったばかりのことなので、現時点はどのブラウザにもサポートされていません。

そしてこの機能はまだ初期段階であるため、さらに詳細を詰める必要があります。本番環境で利用できるようになるまでには、あと数年かかる可能性があります。

ただし、通常の@supportsルールを使用して、サポート状況を検出できます。

以下のCodePenでは、ブラウザがクラスプレフィックスセレクタに対応すればグリーンに点灯します。

See the Pen
CSSのクラスプレフィックスセレクタのサポートテスト by coliss (@coliss)
on CodePen.