292 votos

comodín * en CSS para las clases

Tengo estos divs que yo estoy peinado con .tocolor , pero también necesito el identificador único 1,2,3,4 etc. así que estoy añadiendo así como otra clase de 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 tocolor-* . He intentado utilizar un carácter comodín * como esto en el css, pero no funcionó.

.tocolor-*{
  background: red;
}

529voto

Sotiris Puntos 16807

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

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

En el lugar de div puede agregar cualquier elemento o eliminar por completo, y en el lugar de class puede agregar cualquier atributo del elemento especificado.

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

Más información sobre el atributo CSS selectores, usted lo puede encontrar aquí y aquí.

49voto

kyungeui Puntos 363

Sólo refutar respuesta de Ivan.

Si puede hacerlo.

*[id*='term-']

Esto seleccionará todas las identificaciones con comienzo con 'término-'

En cuanto a la razón de no hacer esto, veo por donde sería preferible seleccionar como estos. Como para el estilo no lo haría yo mismo es posible.

14voto

adroitec Puntos 131

Una solución alternativa:

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

Referencias: http://www.w3.org/TR/CSS2/selector.html#matching-attrs

2voto

DKSan Puntos 2545

Si usted no necesita el identificador único para más estilo de los divs y está utilizando HTML5 podrías probar y ve con atributos de datos personalizados. Leer aquí o intentar una búsqueda en google paraHTML5 Custom Data Attributes

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X