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 uma 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 a elementos. Ao escrever CSS, eles oferecem uma maneira de agrupar elementos no meio, no início ou no fim de um seletor. Eles também podem mudar a especificidade, a você o poder de anular ou aumentar a especificidade.

Agrupamento de seletor

:where() pode fazer tudo o que :is() pode fazer em relação ao agrupamento. Isso inclui o uso em qualquer lugar do 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 relembrar sobre seletores, consulte o módulo de seletores no Learn 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()

No que diz respeito à especificidade, :is() e :where() divergem bastante. Para aprender mais sobre especificidade, consulte o módulo de especificidade no Learn CSS.

Em resumo

• :where() não tem especificidade.
  :where() reduz toda a especificidade na lista de seletores transmitida 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 empolgado com o agrupamento. Sempre consegui melhorar a legibilidade movendo o seletor de alta especificidade para o próprio seletor, onde ele não teria 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 especificidade para 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 criando estilo de folhas menores e removendo vírgulas.

Foto de Markus Winkler no Unsplash