Selector de CSS"(A ou B) E "C"?
Digamos que tenho isto:
<div class="a c">Foo</div>
<div class="b c">Bar</div>
em CSS, Como posso criar um selector que corresponda a algo que corresponda" (.um bo .b) and .c"?
Eu sei que posso fazer isto..a.c,.b.c {
/* CSS stuff */
}
mas, assumindo que eu vou ter que fazer este tipo de lógica muito, com uma variedade de combinações lógicas, existe uma sintaxe melhor?
4 answers
Não. O operador CSS'Existe uma sintaxe melhor?
or (,) não permite agrupamentos. É essencialmente o operador lógico de menor precedência em selectores, então você deve usar .a.c,.b.c.
Ainda não, mas há o selector experimental :matches() que faz exactamente isso:
:matches(.a .b) .c {
/*stuff goes here */
}
Você pode encontrar mais informações sobre ele aqui e aqui. Atualmente, a maioria dos navegadores suporta a sua versão inicial :any(), que funciona da mesma forma, mas será substituída por :matches(). Nós só temos que esperar um pouco mais antes de usar isso em todos os lugares (eu surelly vai).
Se tiver isto:
<div class="a x">Foo</div>
<div class="b x">Bar</div>
<div class="c x">Baz</div>
E só quer seleccionar os elementos que têm .x e (.a ou .b), pode escrever:
.x:not(.c) { ... }
Seleccionar apenas uma sub-classe (por exemplo:.a): .a.x
Seleccionar duas subclasses (por exemplo .a e .b): .x:not(.c)
Seleccionar as três subclasses: .x
No entanto, pode querer vermenos eSASS .
Estes são dois projectos que visam estender a sintaxe padrão CSS introduzindo recursos adicionais, incluindo variáveis, regras aninhadas e outras melhorias.
Eles permitem-lhe escrever um código CSS muito mais estruturado, e qualquer um deles irá quase certamente resolver o seu caso de uso particular.
Claro., nenhum dos navegadores suporta sua sintaxe estendida (especialmente desde que os dois projetos cada um tem sintaxe e características diferentes), mas o que eles fazem é fornecer um "compilador" que converte o seu código menos ou SASS em CSS padrão, que você pode então implantar em seu site.