web-dev-qa-db-fra.com

wildcard * en CSS pour les classes

J'ai ces divs que j’ai stylisés avec .tocolor, mais j’ai également besoin de l’identificateur unique 1,2,3,4, etc., donc j’ajoute cela comme une autre classe 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;
}

Existe-t-il un moyen de n’avoir qu’une classe tocolor-*. J'ai essayé d'utiliser un caractère générique * comme dans ce css, mais cela n'a pas fonctionné.

.tocolor-*{
  background: red;
}
csscss-selectorswildcard
624
twitter

Ce dont vous avez besoin s'appelle sélecteur d'attribut. Voici un exemple utilisant votre structure HTML:

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

À la place de div, vous pouvez ajouter n'importe quel élément ou le supprimer complètement et à la place de class, vous pouvez ajouter n'importe quel attribut de l'élément spécifié.

[class^="tocolor-"] - commence par "tocolor-".
[class*=" tocolor-"] - contient la sous-chaîne "tocolor-" apparaissant directement après un caractère d'espacement.

Démo: http://jsfiddle.net/K3693/1/

Plus d'informations sur les sélecteurs d'attributs CSS, vous pouvez trouver ici et ici . Et à partir des documents MDN Documents MDN

1150
Sotiris

Oui vous pouvez ça.

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

Cela sélectionnera tous les identifiants commençant par 'term-'.

Quant à la raison de ne pas le faire, je vois où il serait préférable de choisir de cette façon; en ce qui concerne le style, je ne le ferais pas moi-même, mais c'est possible.

103
thomas.han

Une solution alternative:

div[class|='tocolor'] correspondra aux valeurs de l'attribut "class" commençant par "tocolor-", y compris "tocolor-1", "tocolor-2", etc.

Attention, cela ne correspondra pas `

Référence: https://www.w3.org/TR/css3-selectors/#attribute-representation

[att|=val]

Représente un élément avec l'attribut att, sa valeur étant exactement "val" ou commençant par "val" immédiatement suivie de "-" (U + 002D)

25
adroitec

Si vous n'avez pas besoin de l'identifiant unique pour un style supplémentaire des divs et utilisez HTML5, vous pouvez essayer d'utiliser des attributs de données personnalisés. Lisez la suite ici ou essayez une recherche google pour HTML5 Custom Data Attributes

3
DKSan