Novos seletores funcionais de pseudoclasse CSS :is() e :where()

Essas adições aparentemente pequenas à sintaxe do seletor CSS vão ter um grande impacto.

Adam Argyle

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