[解決済み】クラスの接頭辞によるCSSセレクタはありますか？

質問

指定したプレフィックスにクラスが一致する要素に、あるCSSルールを適用したい。

例：divのクラスが以下のように始まる場合に適用されるルールが欲しい。 status- (以下のスニペットではAとC、Bは除く)。

<div id='A' class='foo-class status-important bar-class'></div>
<div id='B' class='foo-class bar-class'></div>
<div id='C' class='foo-class status-low-priority bar-class'></div>

何らかの組み合わせで

div[class|=status] と div[class~=status-]

CSS 2.1では可能ですか？どのCSS仕様でも可能ですか？

注：jQueryを使ってエミュレートできることは知っています。

どのように解決するのですか？

CSS2.1では不可能ですが、CSS3の属性部分一致セレクタ（これは は はIE7+でサポートされています)。

div[class^="status-"], div[class*=" status-"]

2つ目の属性セレクタにあるスペース文字に注目してください。これは div 要素で、その class 属性は、これらの条件のいずれかを満たします。

• [class^="status-"] - は "status-"で始まります。

• [class*=" status-"] - は、空白文字の直後に発生する "status-" という部分文字列を含みます。クラス名は空白文字で区切られる HTMLの仕様に基づき そのため、空白文字が重要です。複数のクラスが指定されている場合、最初のクラスの後にある他のクラスもチェックされます。 と は、属性値がスペースで埋め尽くされている場合、最初のクラスをチェックするというボーナスを追加します。 class 属性を動的に使用します)。

もちろん、これはjQueryでも動作します。 ここで .

上記のように2つの属性セレクタを組み合わせる必要があるのは、以下のような属性セレクタがあるからです。 [class*="status-"] は次の要素にマッチしてしまうので、好ましくないかもしれません。

<div id='D' class='foo-class foo-status-bar bar-class'></div>

もし、そのようなシナリオを確実に実現できるのであれば 決して が発生する場合は、簡略化のため、そのようなセレクタを使用することもできます。しかし、上記の組み合わせの方がはるかに堅牢です。

もしあなたがHTMLソースやマークアップを生成するアプリケーションをコントロールできるのであれば、単純に status- プレフィックスは、それ自身の status クラスの代わりに ガンボが提案するように .