¿Selector CSS "(A o B) y C"?
Esto debería ser simple, pero tengo problemas para encontrar los términos de búsqueda.
Digamos que tengo esto:
<div class="a c">Foo</div>
<div class="b c">Bar</div>
En CSS, ¿cómo puedo crear un selector que coincida con algo que coincida con "(.a o .b) y .c"?
Sé que podría hacer esto:
.a.c,.b.c {
/* CSS stuff */
}
Pero, suponiendo que voy a tener que hacer mucho este tipo de lógica, con una variedad de combinaciones lógicas, ¿existe una sintaxis mejor?
¿Existe una mejor sintaxis?
No. orEl operador de CSS ( ,) no permite agrupaciones. Es esencialmente el operador lógico de prioridad más baja en los selectores, por lo que debes usar .a.c,.b.c.
Para aquellos que lean esto >= 2021:
Encontré el éxito usando el :is()selector:
*:is(.a, .b).c{...}
Todavía no, pero existe el selector de pseudoclase experimental :is()(anteriormente ) que hace precisamente eso::matches()
:is(.a, .b).c {
/* style properties go here */
}
Puedes encontrar más información al respecto aquí y aquí . Actualmente, la mayoría de los navegadores soportan su versión inicial :any(), que funciona de la misma manera, pero será reemplazada por :is(). Sólo tenemos que esperar un poco más antes de usar esto en todas partes (seguramente lo haré).
