comodín * en CSS para clases

670

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

css css-selectors wildcard

— gorjeo
fuente

1

Aquí está el sitio oficial de CSS3 sobre selectores: w3.org/TR/css3-selectors Y una lista de compatibilidad: findmebyip.com/litmus

— GarfieldKlon

1216

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 su lugar div, puede agregar cualquier elemento o eliminarlo por completo, y en su lugar 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

— Sotiris
fuente

2

Información genial La única advertencia es que si el rendimiento es un problema, la mayoría de las listas de CSS rechazarán los selectores de atributos que se asemejan a expresiones regulares (por ejemplo, usando '*') b / c de rendimiento lento. Con la excepción de usar un preprocesador (por ejemplo, Sass), ¿hay alguna otra forma posible de hacerlo?

— CodeFinity

2

¿Hay alguna manera de verificar si el atributo de clase contiene múltiples subcadenas? Tal vez algo como div[class*="foo"][class="bar"]?

— Connor

Ese espacio en nuestro ejemplo "contiene" es bastante asesino. Por lo que puedo ver, no debería estar allí, ¿correcto?

— Thomas

1

@Thomas Eso es necesario para asegurar class="foo tocolor-red"partidos, pero noclass="foo fromtocolor-red-blue"

— aleclarson

Gracias por esto. He estado usando esta técnica durante algunos años, pero nunca me di cuenta de que la clase ^ = solo se aplica al comienzo de la entrada de la clase HTML. Pensé que se aplicaba a todos los nombres de clase definidos para la etiqueta HTML.

— BevansDesign

108

Sí puedes esto.

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

Esto seleccionará todos los identificadores 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.

— thomas.han
fuente

Gracias por este IDapéndice basado, no solo por class.

— Khom Nazid

26

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 coincidirá

<div class="foo tocolor-">

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" seguido inmediatamente por "-" (U + 002D)

— adroitec
fuente

12

Esto no funcionará si el classatributo comienza con otra clase que no comienza con tocolor.

— BoltClock

1

Esto también funciona muy bien en las hojas de estilo de widgets de Qt. Por ejemplo, para aplicar un estilo a todas las etiquetas nombradas foo*, lo haríaQLabel[objectName|='foo'] { ... }

— reinstale Mónica el

Como dijo @BoltClock, esta solución se rompe si el elemento tiene varias clases y no comienzan con la clase que está buscando OP.

— Dan Dascalescu

Sin embargo, no funciona en Chrome 78, * y ^ funcionan.

— Gordon Mohrin el

3

Si no necesita el identificador único para un estilo adicional de los divs y está utilizando HTML5, puede probar con atributos de datos personalizados. Siga leyendo aquí o intente una búsqueda en Google paraHTML5 Custom Data Attributes

— DKSan
fuente