[解決済み】CSSでclassにワイルドカード*を使用する場合

質問

次のようなdivでスタイル付けをしています。 .tocolor しかし、1,2,3,4 などのユニークな識別子も必要なので、それを別のクラスとして追加しています。 tocolor-1 .

<div class="tocolor tocolor-1">   tocolor 1   </div>
<div class="tocolor tocolor-2">   tocolor 2   </div>
<div class="tocolor tocolor-3">   tocolor 3   </div>
<div class="tocolor tocolor-4">   tocolor 4   </div>

.tocolor{
  background: red;
}

1つのクラスだけを持つ方法はありますか？ tocolor-* . ワイルドカードを使用してみました * をこのcssのようにしましたが、うまくいきませんでした。

.tocolor-*{
  background: red;
}

解決方法は？

必要なのは属性セレクタと呼ばれるものです。あなたのhtmlの構造を例にとると、次のようになります。

div[class^="tocolor-"], div[class*=" tocolor-"] {
    color:red 
}

の代わりに div の場所には、任意の要素を追加したり、完全に削除したりすることができます。 class を指定すると、指定した要素の任意の属性を追加することができます。

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

[class*=" tocolor-"] - は、スペース文字の直後に発生する "tocolor-" という部分文字列を含んでいます。

デモです。 http://jsfiddle.net/K3693/1/

CSSの属性セレクタの詳細については、以下を参照してください。 ここで と こちら . そして MDN Docs から MDNドキュメント