のCss

Question

私はそれが内部で一つの例外を除いイテレータと同じ名前を持つ複数のクラスのCSSを使用することが可能ですかどうかを知りたいのです：どのように私は私のCSSを使用する必要があり、それが可能だ場合

<div class="elem-1"></div> 

<div class="elem-2"></div> 

これらの2つのクラスを実装するには（2つ以上のことができます）？

Answer 1

あなたは、CSSは次のように属性セレクタを使用することができます

[class^="elem-"], [class*=" elem-"] { 
    /* style properties */ 
} 

しかし、私はむしろ、n番目の子のようなカウントセレクタを使用するかもしれないこの

<div class="elem specialStuffClass">...</div> 

別のオプションのような2つのクラスを使用することをお勧めします。

Answer 2

一般に、HTMLでは複数のクラスを使用する必要があります。

<div class="shape shape-3-corners"></div> 
<div class="shape shape-4-corners"></div> 

両方のdivは、図形を表すdivのグループ内にあります。

特定のコーナー数を持つ図形を表す1つのdivのみがグループに含まれます。

---

また、pattern matching with attribute selectorsを見ることもできます。残念ながら、シンタックスはいくぶん限定されています。

[class*="elem-"]あなたの特定の例では動作しますが、class="not-elem-3"には誤認があります。

[class^="elem-"]は、特定の例では機能しますが、class="another-class and elem-3"には偽のネガティブを与えます。

---

あなたは可能性もgroupあなたのセレクタ：

.elem-1, 
.elem-2 { } 

...しかし、あなたはより多くを追加した場合、あなたはすべての番号を指定して、CSSを更新しなければなりません。もしあなたがたくさんいたなら、それはかなり扱いにくくなるでしょう。