接頭辞つきのクラス名にマッチする CSS セレクター

Kraken というフロントエンドのフレームワークのコードを見ていたら、なるほどと感心する CSS セレクターの書き方を見つけた。grid-one、grid-two みたいな接頭辞つきのクラス名にマッチするセレクターで、こんな感じ:

[class^="grid-"],
[class*=" grid-"] {
    /* ... */
}

単純に考えると [class*="grid-"] でいけそうな気がするけど、それだと foo-grid- みたいに頭に余計なものがついていてもマッチしてしまう。そこでホワイトスペースを接頭辞の前に置いて [class*=" grid-"] とすることでそれを避けている。すると今度は class="grid-one" みたいに class 属性の先頭で頭にホワイトスペースがない場合にマッチしないので、[class^="grid-"] という前方一致のルールを追加。

ひょっとすると [class|="grid"] でスマートに解決できそう、とか思うけど、それだと接頭辞ではない grid クラスもマッチしてしまうし、複数のクラスがあった場合に先頭のものしかマッチしない。| は基本的に言語コード用と考えたほうが良さそう。

この接頭辞パターンの ^ を $ にしてホワイトスペースとハイフンの位置を入れ替えれば接尾辞にマッチするパターンも作れる。

[class$="-item"],
[class*="-item "] {
    /* ... */
}

簡単なデモも書いてみた。

• CSS selector matches class prefix/suffix - CodePen

こういう正規表現みたいなの日本語で説明するのすごく面倒…