☰

CSS のクラス用のワイルドカード * 質問する

tag-icon • tag-icon css css-selectors wildcard
CSS のクラス用のワイルドカード * 質問する

スタイルを設定している 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;
}

ベストアンサー1

必要なのは属性セレクターと呼ばれるものです。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 ドキュメント

おすすめ記事