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;
}
Lo que necesitas se llama selector de atributos. Un ejemplo, utilizando su estructura html, es el siguiente:
div[class^="tocolor-"], div[class*=" tocolor-"] {
color:red
}
En el lugar de div
puedes añadir cualquier elemento o eliminarlo por completo, y en el lugar de class
puedes 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:
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.
*[id^='term-']{
[css here]
}
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
.