générique * dans le CSS pour les classes

Question

J'ai ces divs que je suis au style .tocolor, mais j'ai aussi besoin de l'identifiant unique 1,2,3,4 etc. donc, je suis en ajoutant que c'est 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;
}

Est-il possible d'avoir seulement 1 tocolor-*. J'ai essayé d'utiliser un caractère générique * comme en css, mais ça ne fonctionne pas.

.tocolor-*{
  background: red;
}

Answer 1

Ce que vous avez besoin est appelé sélecteur d'attributs. Un exemple, à l'aide de votre structure html, est le suivant:

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

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

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

Plus d'informations sur l'attribut CSS sélecteurs, vous pouvez le trouver ici et ici.

Answer 2

Juste à réfuter Ivan réponse.

Oui, vous pouvez à présent.

*[id*='term-']

Cela permet de sélectionner tous les id de démarrer avec 'terme-'

Comme pour la raison de ne pas le faire, je vois de raison où il serait préférable de choisir comme celles-ci. Comme pour le style, je ne ferais pas moi-même c'est possible.

Answer 3

Une solution alternative:

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

Références: http://www.w3.org/TR/CSS2/selector.html#matching-attrs

Answer 4

Si vous n'avez pas besoin de l'identifiant unique pour plus de style de la balise div et sont à l'aide de HTML5, vous pourriez essayer et aller avec des Attributs de Données personnalisés. Lire sur ici ou essayez une recherche sur google pour HTML5 Custom Data Attributes