Selector CSS "(A o B) y C"?
Esto debería ser simple, pero estoy teniendo problemas para encontrar los términos de búsqueda para ello.
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 " (.a quirófano .b) y .c"?
Sé que podría hacer esto:
.a.c,.b.c {
/* CSS stuff */
}
Pero, suponiendo que voy a tener que hacer este tipo de lógica mucho, con una variedad de combinaciones lógicas, ¿hay una mejor sintaxis?
4 answers
¿Hay una sintaxis mejor?
No. El operador CSS ' or (,) no permite agrupaciones. Es esencialmente el operador lógico de menor precedencia en los selectores, por lo que debe usar .a.c,.b.c.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-09-22 15:37:07
Todavía no, pero existe el selector experimental :matches() que hace precisamente eso:
:matches(.a .b) .c {
/*stuff goes here */
}
Puedes encontrar más información sobre ella 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 :matches(). Solo tenemos que esperar un poco más antes de usar esto en todas partes (seguramente lo haré).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-05-22 11:25:11
Si tienes esto:
<div class="a x">Foo</div>
<div class="b x">Bar</div>
<div class="c x">Baz</div>
Y solo desea seleccionar los elementos que tienen .x y (.a o .b), puede escribir:
.x:not(.c) { ... }
Pero eso es conveniente solo cuando tiene tres "subclases" y desea seleccionar dos de ellas.
Seleccionando solo una subclase (por ejemplo .a): .a.x
Seleccionando dos subclases (por ejemplo .a y .b): .x:not(.c)
Seleccionando las tres subclases: .x
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-09-22 15:40:44
No. CSS estándar no proporciona el tipo de cosa que usted está buscando.
Sin embargo, es posible que desee buscar en LESS y SASS.
Estos son dos proyectos que tienen como objetivo extender la sintaxis CSS predeterminada mediante la introducción de características adicionales, incluidas variables, reglas anidadas y otras mejoras.
Le permiten escribir código CSS mucho más estructurado, y cualquiera de ellos casi seguramente resolverá su caso de uso particular.
Por supuesto, ninguno de los navegadores admiten su sintaxis extendida (especialmente porque los dos proyectos tienen sintaxis y características diferentes), pero lo que hacen es proporcionar un "compilador" que convierte su código LESS o SASS en CSS estándar, que luego puede implementar en su sitio.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-09-22 15:45:43