comodín * en CSS para clases
Tengo estos divs con los que estoy diseñando .tocolor, pero también necesito el identificador único 1,2,3,4, etc., así que lo agregaré 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 alguna manera de tener solo 1 clase tocolor-*? Intenté usar un comodín *como en este CSS, pero no funcionó.
.tocolor-*{
background: red;
}
Lo que necesitas se llama selector de atributos. Un ejemplo, usando su estructura html, es el siguiente:
div[class^="tocolor-"], div[class*=" tocolor-"] {
color:red
}
En lugar de divpuede agregar cualquier elemento o eliminarlo por completo, y en lugar de classpuede 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/
Puede encontrar más información sobre los selectores de atributos CSS aquí y aquí . Y de MDN Docs MDN Docs
Sí, usted puede hacer esto.
*[id^='term-']{
[css here]
}
Esto seleccionará todos los identificadores que comiencen con 'term-'.
En cuanto al motivo para no hacer esto, veo dónde sería preferible seleccionar de 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 "clase" que comienzan con "tocolor-", incluidos "tocolor-1", "tocolor-2", etc.
Cuidado que esto no coincidirá
<div class="foo tocolor-">
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" seguido inmediatamente de "-" (U+002D)
