web-dev-qa-db-ja.com

クラス用のCSSのワイルドカード*

私は.tocolorでスタイリングしているこれらのdivを持っていますが、私はまたユニークな識別子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;
}
csscss-selectorswildcard
603
twitter

あなたが必要とするものは属性セレクタと呼ばれます。 html構造を使用した例は次のとおりです。

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

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

[class^="tocolor-"] - "tocolor-"で始まります。
[class*=" tocolor-"] - スペース文字の直後に現れる部分文字列 "tocolor-"を含みます。

デモ： http://jsfiddle.net/K3693/1/ /

CSS属性セレクタについての詳細は、 here および here を参照してください。そしてMDN Docs からMDN Docs

1119
Sotiris

はい、できます。

*[id^='term-']{
    [css here]
}

これにより、'term-'で始まるすべてのIDが選択されます。

これをしない理由としては、この方法を選択することが望ましいと思われる箇所がわかります。スタイルに関しては、私は自分ではしないでしょうが、それは可能です。

98
thomas.han

別の解決策：

div[class|='tocolor']は、 "tocolor-1"、 "tocolor 2"など、 "tocolor-"で始まる "class"属性の値に一致します.

これが一致しないことに注意してください

参照： https://www.w3.org/TR/css3-selectors/#attribute-representation

[att|=val]

Att属性を持つ要素を表し、その値は正確に "val"であるか、または "val"で始まり " - "が直後に続く（U + 002D）

25
adroitec

Divのスタイルをさらに細かく設定するために一意の識別子が必要なく、HTML 5を使用している場合は、カスタムのData Attributesを試してみることもできます。 ここを読む またはHTML5 Custom Data AttributesのGoogle検索をお試しください

3
DKSan