caractère générique * en CSS pour les classes

670

J'ai ces divs avec lesquels je stylise .tocolor, mais j'ai également besoin de l'identifiant 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 d'avoir une seule 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;
}
css css-selectors wildcard Twitter
la source
1
Voici le site officiel CSS3 sur les sélecteurs: w3.org/TR/css3-selectors Et une liste de compatibilité
GarfieldKlon

Réponses:

1216

Ce dont vous avez besoin est appelé sélecteur d'attributs. Un exemple, en utilisant votre structure html, est le suivant:

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

À la place de divvous pouvez ajouter n'importe quel élément ou le supprimer complètement, et à la place de classvous 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 espace.

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 de MDN Docs MDN Docs

Sotiris
la source
2
Info cool. La seule mise en garde est que si les performances sont un problème, la plupart des linters CSS rejetteront les sélecteurs d'attributs qui ressemblent à des expressions régulières (par exemple en utilisant '*') b / c de performances lentes. À l'exception de l'utilisation d'un préprocesseur (par exemple Sass), existe-t-il une autre manière de procéder?
CodeFinity
2
Existe-t-il un moyen de vérifier si l'attribut de classe contient plusieurs sous-chaînes? Peut-être quelque chose comme ça div[class*="foo"][class="bar"]?
Connor
Cet espace dans notre exemple "contient" est assez tueur. D'après ce que je peux voir, cela ne devrait pas être là, n'est-ce pas?
Thomas
1
@Thomas Cela est nécessaire pour assurer les class="foo tocolor-red"matchs, mais pasclass="foo fromtocolor-red-blue"
aleclarson
Merci pour cela. J'utilise cette technique depuis quelques années, mais je n'ai jamais réalisé que class ^ = ne s'applique qu'au début de l'entrée de classe HTML. Je pensais que cela s'appliquait à tous les noms de classe définis pour la balise HTML.
BevansDesign
108

Oui, c'est possible.

*[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 cette façon; quant au style, je ne le ferais pas moi-même, mais c'est possible.

thomas.han
la source
Merci pour cet IDaddenda basé, pas seulement pour class.
Khom Nazid
26

Une solution alternative:

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

Attention, cela ne correspondra pas 

<div class="foo tocolor-">

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 suivi de "-" (U + 002D)

adroitec
la source
12
Cela ne fonctionnera pas si l' classattribut commence par une autre classe qui ne commence pas par tocolor.
BoltClock
1
Cela fonctionne également à merveille dans les feuilles de style de widget de Qt. Par exemple, pour appliquer un style à toutes les étiquettes nommées foo*, vous feriezQLabel[objectName|='foo'] { ... }
Rétablir Monica
Comme l'a dit @BoltClock, cette solution se casse si l'élément a plusieurs classes et qu'elles ne commencent pas avec la classe OP recherchée.
Dan Dascalescu
Ne fonctionne pas dans Chrome 78, * et ^ fonctionnent cependant.
Gordon Mohrin
3

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

DKSan
la source