llamar - que es un selector en css




comodín*en CSS para las clases (3)

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 .

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;
}

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.


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)





wildcard