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;
}
Leandro
編集された質問 1日 8月 2013 в 1:14
プログラミング
css wildcard css-selectors
24日 2月 2011 в 8:46
16 ビュー
質問へのコメント (1)
ソリューション

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

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

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

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

Demo: http://jsfiddle.net/K3693/1/

CSS属性セレクタの詳細については、こちらおよびこちらを参照してください。 また、MDN DocsからはMDN Docsがあります。

davidhartman00
編集した答え 22日 11月 2018 в 12:29
解説 (5)

はい、できます。

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

これは、'term-'で始まるすべてのIDを選択します。

このようにしない理由としては、このようにして選択することが望ましいということです。スタイルについては、私自身はしませんが、可能です。

user3071284
編集した答え 9日 2月 2017 в 4:27
解説 (1)

別の解決策があります。

div[class|=='tocolor']` は、"class&quot. 属性の値が"tocolor-"で始まるもので、"tocolor-1"、"tocolor-2"などが含まれます。

これはマッチしないので注意してください。

<div class="foo tocolor-">

参考にしてください。 https://www.w3.org/TR/css3-selectors/#attribute-representation

[att|=val] です。 gt. att属性を持つ要素を表し、その値は正確には"val&quot. であるか、"val"で始まるかのいずれかです。 で始まるか、その直後に"-&quotが続くかのいずれかです。 (U+002D)

PierreDuc
編集した答え 25日 9月 2019 в 1:37
解説 (3)

もし、HTML5を使用していて、divのスタイリングに固有の識別子を必要としないのであれば、カスタムデータ属性を使用してみてはいかがでしょうか。詳しくはこちらをご覧いただくか、Googleで「HTML5 Custom Data Attributes」を検索してみてください。

解説 (0)