Essas adições aparentemente pequenas à sintaxe do seletor CSS vão ter um grande impacto.
Ao escrever CSS, às vezes você pode acabar com listas de seletores longas para segmentar
vários elementos com as mesmas regras de estilo. Por exemplo, se você quiser ajustar a cor
de todas as tags <b>
encontradas em um elemento de título, escreva:
h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
color: hotpink;
}
Em vez disso, use :is()
e melhore a legibilidade, evitando um seletor
longo:
:is(h1,h2,h3,h4,h5,h6) > b {
color: hotpink;
}
A legibilidade e a conveniência de seletores mais curtos são apenas parte do valor que
:is()
e :where()
trazem para o CSS. Neste post, você vai descobrir a sintaxe
e o valor desses dois pseudoseletores funcionais.
Compatibilidade com navegadores
:is()
:where()
Conheça :is()
e :where()
Esses são seletores de pseudoclasse funcionais. Observe o ()
no final e a
maneira como eles começam com :
. Pense nelas como chamadas de função dinâmicas de execução que
correspondem aos elementos. Ao escrever CSS, eles permitem agrupar elementos no meio, no início ou no final de um seletor. Eles também podem mudar a especificidade,
dando a você o poder de anular ou aumentar a especificidade.
Agrupamento de seletores
:where()
pode fazer tudo o que :is()
pode fazer em relação ao agrupamento. Isso
inclui ser usado em qualquer lugar no seletor, aninhamento e empilhamento. A
flexibilidade total do CSS que você conhece e adora. Confira alguns exemplos:
/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
color: hotpink;
}
/* in the middle */
article :is(header,footer) > p {
color: gray;
}
/* at the end */
.dark-theme :where(button,a) {
color: rebeccapurple;
}
/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
color: rebeccapurple;
}
/* stacked */
:is(h1,h2):where(.hero,.subtitle) {
text-transform: uppercase;
}
/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {
font-weight: 900;
}
Cada um dos exemplos de seletor acima demonstra a flexibilidade dessas duas
pseudoclasses funcionais. Para encontrar áreas do código que podem se beneficiar de
:is()
ou :where()
, procure seletores com várias vírgulas e repetição
de seletor.
Como usar seletores simples e complexos com :is()
Para mais informações sobre seletores, confira o módulo de seletores em "Aprenda sobre CSS. Confira alguns exemplos de seletores simples e complexos para ajudar a ilustrar a capacidade:
article > :is(p,blockquote) {
color: black;
}
:is(.dark-theme.hero > h1) {
font-weight: bold;
}
article:is(.dark-theme:not(main .hero)) {
font-size: 2rem;
}
Até agora, :is()
e :where()
são sintaticamente intercambiáveis. É hora de
analisar as diferenças entre eles.
A diferença entre :is()
e :where()
Quando se trata de especificidade, :is()
e :where()
divergem muito. Para
mais detalhes, consulte o módulo de especificidade em Aprender a
CSS.
Em resumo
:where()
não tem especificidade.:where()
comprime todas as especificidades na lista de seletores transmitidas como parâmetros funcionais. Esse é o primeiro recurso de seletor do tipo.:is()
usa a especificidade do seletor mais específico.:is(a,div,#id)
tem uma pontuação de especificidade de um ID, 100 pontos.
Usar o seletor de especificidade mais alto da lista foi uma armadilha para mim quando eu estava muito animado com o agrupamento. Sempre consegui melhorar a legibilidade movendo o seletor de alta especificidade para um seletor próprio, que não causava tanto impacto. Confira um exemplo:
article > :is(header, #nav) {
background: white;
}
/* better as */
article > header,
article > #nav {
background: white;
}
Com :where()
, estou esperando que as bibliotecas ofereçam versões sem
especificidade. A competição de especificidade entre estilos de autores e de
bibliotecas pode chegar ao fim. Não haveria maneira específica de competir ao escrever CSS.
O CSS está trabalhando em um recurso de agrupamento como esse há algum
tempo, ele está aqui e ainda é um território pouco explorado. Divirta-se fazendo folhas de estilo
menores e removendo vírgulas.
Foto de Markus Winkler no Unsplash