comodín * en CSS para las clases
Tengo estos divs que estoy estilizando con .tocolor, pero también necesito el identificador único 1,2,3,4, etc. así que lo añado como otra clase 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;
}¿Hay una manera de tener sólo 1 clase color-*. Traté de usar un comodín * como en este css, pero no funcionó.
.tocolor-*{
background: red;
}
638
3
Lo que necesitas se llama selector de atributos. Un ejemplo, utilizando su estructura html, es el siguiente:
En el lugar de
divpuedes añadir cualquier elemento o eliminarlo por completo, y en el lugar declasspuedes añadir cualquier atributo del elemento especificado.[class^="tocolor-"]- comienza con "tocolor-".[class*=" tocolor-"]- contiene la subcadena "tocolor-" que aparece directamente después de un carácter de espacio.Demo: http://jsfiddle.net/K3693/1/
Para más información sobre los selectores de atributos CSS, puedes encontrar aquí y aquí. Y en MDN Docs MDN Docs
Sí se puede esto.
Esto seleccionará todos los ids que empiecen por
'término-'.En cuanto a la razón para no hacerlo, veo dónde sería preferible seleccionar de esta manera; en cuanto al estilo, yo no lo haría, pero es posible.
Si no necesita el identificador único para el estilo de los divs y está usando HTML5, puede intentar usar atributos de datos personalizados. Sigue leyendo aquí o intenta buscar en Google
HTML5 Custom Data Attributes.