llamar - comodín*en CSS para las clases

llamar clase css

Question

Tengo estos divs que estoy .tocolor con .tocolor , pero también necesito el identificador único 1,2,3,4, etc., así que lo agrego 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 solo 1 clase tocolor-* . Intenté usar un comodín * como en este css, pero no funcionó.

.tocolor-*{
  background: red;
}

Answer 1

Lo que necesitas se llama selector de atributo. Un ejemplo, utilizando su estructura html, es el siguiente:

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

En lugar de div puede agregar cualquier elemento o eliminarlo por completo, y en el lugar de class puede agregar 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.

Demostración: http://jsfiddle.net/K3693/1/

Más información sobre los selectores de atributos CSS, puede encontrar here y here .

Answer 2

Sí, puedes hacerlo.

*[id^=''term-'']{
    [css here]
}

Esto seleccionará todos los identificadores que comiencen con ''term-'' .

En cuanto a la razón para no hacer esto, veo dónde sería preferible seleccionar esta manera; En cuanto al estilo, no lo haría yo mismo, pero es posible.

Answer 3

Si no necesita el identificador único para un mayor estilo de los divs y está utilizando HTML5, puede probar los atributos de datos personalizados. Lea here o intente una búsqueda en google para HTML5 Custom Data Attributes

Answer 4

Una solución alternativa:

div[class|=''tocolor''] coincidirá con los valores del atributo "class" que comienzan con "tocolor-", incluidos "tocolor-1", "tocolor-2", etc.

Tenga en cuenta que esto no va a coincidir con

Referencia: https://www.w3.org/TR/css3-selectors/#attribute-representation

[att|=val]

Representa un elemento con el atributo att, cuyo valor es exactamente "val" o comienza con "val" inmediatamente seguido de "-" (U + 002D)