CSS: Conheça o seletor :where
Em css, às vezes você pode acabar com longas listas de seletores para especificar vários elementos com os mesmos estilos. Por exemplo, se você deseja definir a cor de quaisquer <a>
que estiverem presentes em um elemento de título, você poderia fazer dessa forma:
h1 > a,
h2 > a,
h3 > a,
h4 > a,
h5 > a,
h6 > a {
color: orangered;
}
O exemplo acima é bastante cansativo, porém temos uma maneira mais simples de escrever...
:WHERE
O pseudo-selector :where
recebe uma lista de seletores como argumento e seleciona qualquer elemento que possa ser selecionado por um dos seletores nessa lista.
:where(h1, h2, h3, h4, h5, h6) a {
color: orangered;
}
Observe que nosso código acima ficou muito mais curto, além de ter melhorado bastante a legibilidade do mesmo. Porém, além destas vantagens já citadas, podemos ainda observar mais algumas.
Forgiving Selector
Forgivin selector pode ser traduzido como seletor perdoador. Um seletor perdoador permite que haja tolerância em expressões onde exista um ou mais seletores inválidos ou não reconhecidos pelo navegador. Normalmente, o css não perdoa expressões caso haja algum seletor inválido.
Isto quer dizer que, se dentro do :where
for definido um seletor inválido ou não suportado, apenas o o válido será considerado.
Exemplo:
:where(h1, h2, isso:falso) {
/* Isto vai ser tolerado. O h1 e h2 será selecionado */
}
h1, h2, isso:falso{
/** Não há tolerância. Nada será aplicado **/
}