Pregunta 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 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 alguna manera de tener solo 1 clase tocolor-*. Intenté usar un comodín * como en este css, pero no funcionó.

.tocolor-*{
  background: red;
}

539
2018-02-24 20:46


origen


Respuestas:


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

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

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


988
2018-02-24 20:53



Sí puedes esto.

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

Esto seleccionará todas las identificaciones que comienzan con 'term-'.

En cuanto a la razón 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.


91
2018-04-17 21:45



Una solución alternativa:

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

Ten en cuenta que esto no coincidirá con `

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

[att|=val]

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


21
2018-02-20 23:03



Si no necesita el identificador único para un mayor diseño de los divs y está utilizando HTML5, puede intentarlo con atributos de datos personalizados. Sigue leyendo aquí o prueba una búsqueda en Google para HTML5 Custom Data Attributes


3
2018-02-24 20:55