.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;
}
必要なのは属性セレクタと呼ばれるものです。例えば、あなたのhtml構造を使って、次のようになります。
div[class^="tocolor-"], div[class*=" tocolor-"] {
color:red
}
divの代わりに任意の要素を追加したり、完全に削除したりすることができ、
class`の代わりに指定した要素の任意の属性を追加することができます。
[class^="tocolor-"]
- "tocolor-"で始まります。
class*="tocolor-"]` - スペース文字の直後にある部分文字列"tocolor-"を含みます。
Demo:
CSS属性セレクタの詳細については、こちらおよびこちらを参照してください。 また、MDN DocsからはMDN Docsがあります。
はい、できます。
*[id^='term-']{
[css here]
}
これは、'term-'
で始まるすべてのIDを選択します。
このようにしない理由としては、このようにして選択することが望ましいということです。スタイルについては、私自身はしませんが、可能です。
別の解決策があります。
div[class|=='tocolor']` は、"class". 属性の値が"tocolor-"で始まるもので、"tocolor-1"、"tocolor-2"などが含まれます。
これはマッチしないので注意してください。
<div class="foo tocolor-">
参考にしてください。 https://www.w3.org/TR/css3-selectors/#attribute-representation
[att|=val]
です。 gt. att属性を持つ要素を表し、その値は正確には"val". であるか、"val"で始まるかのいずれかです。 で始まるか、その直後に"-"が続くかのいずれかです。 (U+002D)