CSSに新セレクタ「クラスプレフィックス」登場、複数クラスを一括指定可能に
The Future of CSS: Target Multiple Classes with the Class Prefix Selector
CSSに、同じプレフィックスを持つ複数のクラスをまとめて指定できる「クラスプレフィックスセレクタ」（例: `.btn-*`）が追加される予定です。2026年8月のCSSWG会合で仕様が承認され、現在はドラフト段階。従来の属性セレクタやベースクラスの追加に代わる、より簡潔で堅牢な方法として注目されています。ただし、ブラウザでの利用はまだ先のことです。
「`.foo-*` は、プレフィックスを超えて少なくとも1文字以上を持つクラスのみにマッチし、その最初の文字がハイフンであってはなりません。」
HNでの議論
14- jjcm
彼らの例では、btn-* を .btn-primary|secondary|danger のキャッチオールセレクタとして挙げている。なぜ単に .btn.primary のようなクラス名にして、.btn をセレクタで指定するだけにしないのかと思ってしまう。誤解しないでほしい、この便利さはありがたいと思うが、いずれ実質的に正規表現になるであろうセレクタの速度低下が心配だ。これが必要なのか疑問だ。
- dymk
個人的には、これはCSSの変更としてはあまり良いとは思わない。識別子をgrepして使用箇所を確認できる方が好ましい。これではそれに頼れなくなる——ルールがプレフィックスセレクタでカバーされるかもしれないからだ。
- graypegg
*[class*=btn-] { ... }
クラス属性に対してマッチすることになるのは分かっているが、この構文機能への需要があれば、実際にもっと多く見かけることになるのではないだろうか？
`some-other-btn-primary` もルールにマッチしてしまう問題はかなり不便だが、人々がこのようなスタイルルールを書くことを好むなら、間違いなく許容できるだろう。