Joker * en CSS pour les classes
J'ai ces divs avec lesquels je stylise .tocolor, mais j'ai aussi besoin de l'identifiant unique 1,2,3,4 etc. j'ajoute donc 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;
}
Est-il un moyen d'avoir seulement 1 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;
}
4 réponses
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
}
Au lieu 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é.
[class^="tocolor-"] - commence par "tocolor-".[class*=" tocolor-"] - contient la sous-chaîne "tocolor-" se produisent directement après un caractère d'espace.
Démo: http://jsfiddle.net/K3693/1/
Plus informations sur le CSS sélecteur d'attribut, vous pouvez trouver ici et ici.
Oui, vous pouvez cela.
*[id^='term-']{
[css here]
}
Cela sélectionnera tous les ID qui commencent par 'term-'.
Quant à la raison de ne pas faire cela, je vois où il serait préférable de choisir de cette façon; quant au style, Je ne le ferais pas moi-même, mais c'est possible.
Une solution alternative:
div[class|='tocolor'] va correspondre à des valeurs de l'attribut "class" qui commencent par "tocolor-", y compris "tocolor-1", "tocolor-2", etc.
Attention, cela ne correspond 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 suivi de "-" (U + 002D)
Si vous n'avez pas besoin de l'identifiant unique pour un style ultérieur des DIV et que vous utilisez HTML5, vous pouvez essayer d'utiliser des attributs de données personnalisés. Lire sur ici, ou essayez une recherche google pour les HTML5 Custom Data Attributes