css - 特定の文字列で始まるクラス名を持つすべての要素に一致

Question

CSS3で特定の文字列で始まるクラス名を持つ要素に「ワイルドカード」を使用することは可能ですか?

例：

<div class="myclass-one"></div>
<div class="myclass-two"></div>
<div class="myclass-three"></div>

そして、魔法のように上記divの s を一度にすべて赤に設定します。

.myclass* { color: #f00; }

Answer 1

次のようにしてください。

div[class^='myclass'], div[class*=' myclass']{
    color: #F00;
}

---

*編集：デビッドが提案したようにワイルドカード（）を追加しました

Answer 2

質問に対する直接的な答えではありませんが、ほとんどの場合、各要素に複数のクラスを設定することをお勧めします。

<div class="myclass one"></div>
<div class="myclass two></div>
<div class="myclass three"></div>

このようにして、すべての要素にルールを設定してから、 、 、およびmyclassのより具体的なルールを設定できます。onetwothree

.myclass { color: #f00; }

.two { font-weight: bold; }

etc.

Answer 3

複数のクラスをdivに簡単に追加できます...だから：

<div class="myclass myclass-one"></div>
<div class="myclass myclass-two"></div>
<div class="myclass myclass-three"></div>

次に、共有クラスへの CSS 呼び出しで同じスタイルを適用します。

.myclass {...}

そして、次のように他のクラスを引き続き使用できます。

.myclass-three {...}

または、次のように CSS をより具体的にしたい場合:

.myclass.myclass-three {...}