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

668

私がスタイリングしているこれらのdiv .tocolorがありますが、一意の識別子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;
}

css css-selectors wildcard

— ツイッター
ソース

1

これがセレクターに関する公式のCSS3サイトです：w3.org/TR/css3-selectorsそして互換性リスト：findmebyip.com/litmus

— GarfieldKlon

1215

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

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

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

[class^="tocolor-"]—「tocolor-」で始まります。
[class*=" tocolor-"]—スペース文字の直後に出現する部分文字列「tocolor-」が含まれています。

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

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

— ソチリス
ソース

2

クールな情報。唯一の注意点は、パフォーマンスが問題である場合、ほとんどのCSSリンターは、正規表現に類似した属性セレクター（たとえば、「*」を使用）を拒否し、パフォーマンスが低下します。プリプロセッサ（Sassなど）の使用を除いて、これを行う他の可能な方法はありますか？

— CodeFinity 2014

2

クラス属性に複数の部分文字列が含まれているかどうかを確認する方法はありますか？多分何かdiv[class*="foo"][class="bar"]？

— コナー2017年

「contains」の例のそのスペースはかなりキラーです。私が見ることができるものから、それはそこにあるべきではない、正しい？

— トーマス

1

@Thomas class="foo tocolor-red"一致を確実にするために必要ですが、必須ではありませんclass="foo fromtocolor-red-blue"

— aleclarson '28

これをありがとう。私はこの手法を数年間使用してきましたが、class ^ =がHTMLクラスエントリの先頭にのみ適用されることに気づきませんでした。HTMLタグに定義されたすべてのクラス名に適用されると思いました。

— BevansDesign

108

はい、できます。

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

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

これを行わない理由については、この方法を選択する方が好ましいと思います。スタイルに関しては、私は自分でやるつもりはありませんが、それは可能です。

— thomas.han
ソース

IDだけでなく、このベースの補遺に感謝しますclass。

— Khom Nazid

26

代替ソリューション：

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

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

<div class="foo tocolor-">

リファレンス：https : //www.w3.org/TR/css3-selectors/#attribute-representation

[att|=val]

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

— アドロイテック
ソース

12

これは、class属性がで始まらない他のクラスで始まっている場合は機能しませんtocolor。

— BoltClock

1

これはQtのウィジェットstyleSheetsでも美しく機能します。たとえば、という名前のすべてのラベルにスタイルを適用するためにfoo*、あなたがしたいQLabel[objectName|='foo'] { ... }

— 復活モニカ

@BoltClockが言ったように、要素に複数のクラスがあり、OPが探しているクラスで開始されていない場合、このソリューションは機能しません。

— Dan Dascalescu 2017

Chrome 78では機能しませんが、*と^は機能します。

— Gordon Mohrin

3

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

— DKSan
ソース