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

CSSで複数のセレクタをまとめて記述できたら楽なのに、と思ったことがある人も多いと思います。 .btn-primary, .btn-secondary, .btn-danger といった同じプレフィックスを持つ複数のクラスをまとめて、.btn-*でスタイルを設定できるようにするクラスプレフィックスセレクタ（-*）の仕様が固まったので、紹介します。 Target Multiple Classes with the Class Prefix Selector by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 課題: 複数のプレフィックス付きクラスを対象にする 解決方法: CSSのクラスプレフィックスセレクタ 空の文字列について ダッシュ以外について |=セレクタを再利用してはどうでしょうか ブラウザのサ

[coliss]

複数のセレクタにスタイルをまとめて設定できるクラスプレフィックスセレクタ（-*）

[Knoa]

.btn-* と [class^="btn-"] において情報量の違いはないのだから、パフォーマンスについては賢いブラウザが解釈を最適化して差をなくすべきだろう。セレクタの文字数が少なくて済むという利点ならわかるけど。

[strawberryhunter]

これ [class^="btn-"] と似たような効果か。これがclass属性の2つ目以降のクラスにも適用できると。ユニークなprefixを設定しておいて [class*="prefix-foo-"] みたいなのでもすぐに同じことができるか。

[nekoline]

なるほど属性セレクタよりパフォーマンスが良い点がメリットなのか。

[nguyen-oi]

.btn-* みたいな書き方できるの便利そうだけど実際に主要ブラウザで使えるようになるの何年後になるんだろ