Classe CSS générique [dupliquer]
Cette question a déjà une réponse ici:
alors je me demandais s'il y avait un moyen de jeter un joker dans ma CSS?
j'ai plusieurs classes qui sont .button-0,.button-1, .button-2,.button-3, etc. dans un button élément. Je veux obtenir tous les .button-* classes à définir.
Est-il possible de faire quelque chose comme:
button .button-[=*] {
margin-right: 2rem;
}2 réponses
utilisez un sélecteur d'attribut:
button [class*="button-"] {
margin-right: 2rem;
}
MDN:
[attr*=value]- représente un élément avec un attribut de nom d'attr et dont la valeur contient au moins une occurrence de chaîne "valeur" comme substrat.
button [class*="button-"] {
color: red;
}<button>
<span class="button-0">text</span>
<span class="button-1">text</span>
<span class="button-2">text</span>
</button> Chad souligne, il est entièrement possible qu'un élément peut contenir une classe telle que this-is-my-button-class. Dans ce cas, cet élément indésirable serait sélectionné. Afin d'éviter cela, vous pouvez utiliser une combinaison de deux sélecteurs:
button [class^="button-"],
button [class*=" button-"] {
margin-right: 2rem;
}
Le sélecteur button [class^="button-"] assure que l'élément est sélectionnée si elle commence par button-. Comme il est possible que la première classe de l'élément ne commence pas avec button-, le sélecteur [class*=" button-"] (la des espaces), assure qu'il sera sélectionné.
Vous pouvez le faire comme ceci
button[id|=button]{
color:red;
}
tous les boutons dont l'id contient le mot bouton seront affectés. Par exemple,http://jsfiddle.net/czp28jpb/