CSSの未来：クラスプレフィックスセレクタで複数のクラスをターゲットにする

同じプレフィックスを共有する複数のクラスをターゲットにするには、通常、脆弱な属性セレクタに頼るか、マークアップに余分なベースクラスを追加する必要があります。物事を容易にするために、CSSには新しいセレクタが追加されます。クラスプレフィックスセレクタ（.prefix-*）です。 〜⚠️ この投稿は、今後のCSS機能に関するものです。まだ使用できません…今のところ。この機能はプレスされたばかりで、わずか2週間前に解決されたばかりで、現在は仕様テキストにのみ存在します。ブラウザが実装できるようになる前に、仕様は変更される可能性が高いです。 〜問題：複数のプレフィックス付きクラスのターゲット設定 クラス属性で使用するクラス名を考案する際、一般的なプラクティスは、ある程度のグループ化または階層を維持するためにプレフィックスを使用することです。たとえば、.btn-primary、.btn-secondary、.btn-dangerなどのクラスに慣れているかもしれません。これらすべてのボタンに今日のベーススタイルを適用するには、通常、すべてをリストアップするか、別の.btnベースクラスを導入する必要があります。 /* ベースクラスの追加 */ .btn { padding: 0.5rem 1rem; border-radius: 4px; } /* またはすべてをリストアップ…うわー！ */ .btn-primary, .btn-secondary, .btn-danger { padding: 0.5rem 1rem; border-radius: 4px; } 一部の人は、部分文字列マッチング属性セレクタに頼ることもありますが、これらは複数のクラスが単一の要素にある場合に、壊れやすく醜くなる可能性があります。 /* 動作しますが、空白の処理でエラーが発生しやすい可能性があります */ [class^="btn-"], [class*=" btn-"] { padding: 0.5rem 1rem; } 〜解決策：クラスプレフィックスセレクタ わずか2週間前、ベルリンで開催されたCSSワーキンググループF2F会議（2026年8月）で、CSSセレクタレベル5仕様に専用のクラスプレフィックスセレクタを追加することが決議されました。このアイデアは、もともとLea Verouによって2024年（w3c/csswg-drafts/#10001）に提案されました。構文は非常に簡単です。 .btn-* { padding: 0.5rem 1rem; border-radius: 4px; } それだけです！末尾の-*の部分がセレクタをクラスプレフィックスセレクタにし、そのハイフンで区切られたプレフィックスで始まる任意のクラスに一致しようとします。ユーティリティクラスやデザインシステムにとって大きな勝利であり、HTMLペイロードを肥大化させたり、壊れやすい属性セレクタを作成したりすることなく、関連要素のグループを簡単にターゲットにできます。 〜空文字列はどうなるか？ 議論中に浮上した興味深い質問は、.foo-*が空文字列（w3c/csswg-drafts/#14291）に一致するかどうかです。つまり、.foo-*は単に.foo-クラスを持つ要素にも一致するかどうかです。正確なデフォルトの動作はまだ検討中ですが、現在のところ、セレクタはプレフィックスで始まり、プレフィックスの後に少なくとも1文字があり（そして、プレフィックスの後の最初のそのような文字がハイフンではない）クラスにのみ一致するように指定されています。したがって、いいえ、class="foo-"は.foo-*では一致しません。これは良いことだと思います。同じセレクタはclass="foo--"にも一致しません。これもおそらく良いことです。 〜ハイフン以外の文字はどうなるか？ クラスプレフィックスセレクタは、少なくとも最初はハイフンで区切られたプレフィックスに限定されています。将来、著者からのリクエストに応じて、_のような他の区切り文字が可能性として追加されるかもしれません。現時点でかなり明確なのは、少なくとも何らかの区切り文字が必要であるということです。任意のプレフィックス（.foo*のような）は、少なくとも2つの理由で許可されません。 過剰選択する可能性があります：.foo*は.footerにも一致します。 セレクタのパフォーマンス：ブラウザは通常、高速なセレクタマッチングのためにクラスセレクタのバケットを作成します。任意のワイルドカードを追加すると、その最適化が無効になります。同様に、セレクタの中央にあるワイルドカード（.card-*-primaryのような）も許可されません。 # ブラウザサポート 💡この投稿は元々2026年8月に公開されましたが、以下のリストは常に更新されています。最終更新：2026年8月20日。 これはわずか2週間前にCSSWG F2Fで決議されたばかりなので、ブラウザサポートは現在存在しません。進捗（もしあれば）を追跡するには、これらのブラウザの問題をフォローできます。 Chromium (Blink) ❌ サポートなし CrBug #543356377 を購読してフォローしてください。 Firefox (Gecko) ❌ サポートなし これに関するバグトラッキングはありません。 Safari (WebKit) ❌ サポートなし これに関するバグトラッキングはありません。 この機能はまだ初期段階であり、さらに検討が必要なため、本番環境で使用できるようになるまで数年かかる可能性があります。 # 機能検出 通常の@supportsルールで機能検出をサポートできます。 @supports selector(.foo-*) { /* ブラウザはサポートしています */ } 以下のCodePenはこれを使用しており、ブラウザがサポートしている場合は緑色に点灯します。 See the Pen CSS Class Prefix Selector Support test by Bramus (@bramus) on CodePen. 情報を広めましょう 以下の投稿のいずれかをソーシャルメディアで再共有して、情報を広めるのに役立ててください。 🦋 Bluesky 🦣 Mastodon 〜🔥 気に入りましたか？ループに留まりたいですか？方法は次のとおりです。 🦋 @bram.us をBlueskyでフォロー 🔸 RSSを使用してbram.usをフォロー 私は𝕏 Twitterや🐘 Mastodonでも見つけることができますが、そこでは散発的にしか投稿しません。 Bramus！によって公開されました Bramusはベルギー出身のフロントエンドウェブ開発者で、GoogleでChrome Developer Relations Engineerとして働いています。14歳（1997年）でview-sourceを発見した瞬間から、彼はウェブに夢中になり、それ以来ずっといじり続けています（もっと…）。 雇用主の見解ではなく、私の個人的な見解です。特に明記されていない限り、この投稿の内容はCreative Commons Attribution 4.0 Licenseの下でライセンスされており、コードサンプルはMIT Licenseの下でライセンスされています。