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

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

Adam Argyle

Ao escrever CSS, às vezes você pode acabar com longas listas de seletores para segmentar vários elementos com as mesmas regras de estilo. Por exemplo, para ajustar por cor as tags <b> encontradas em um elemento de título, insira:

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
  color: hotpink;
}

Em vez disso, você pode usar :is() e melhorar a legibilidade, evitando um seletor longo:

:is(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

A legibilidade e a conveniência do seletor mais curto são apenas uma parte do valor que :is() e :where() trazem para o CSS. Nesta postagem, você 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 nisso como chamadas de função dinâmica de tempo 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, oferecendo a você o poder de anular ou aumentar a especificidade.

Agrupamento de seletores

Tudo o que o :is() pode fazer em relação ao agrupamento, assim como a :where(). Isso inclui ser usado em qualquer lugar no seletor, o aninhamento e o empilhamento deles. Flexibilidade de CSS total que você conhece e adora. Aqui estão 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 seu código que podem se beneficiar de :is() ou :where(), procure seletores com várias vírgulas e repetição de seletores.

Como usar seletores simples e complexos com :is()

Para relembrar os seletores, confira o módulo sobre seletores em "Aprenda CSS". Veja 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 ver como elas são diferentes.

A diferença entre :is() e :where().

Quando se trata de especificidade, :is() e :where() divergem totalmente. Para saber mais sobre a especificidade, consulte o módulo de especificidade em "Aprender 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 de 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.

Assumir o seletor de maior especificidade da lista é apenas um pegadinha para mim quando estava ficando muito animada com o agrupamento. Sempre consegui melhorar a legibilidade movendo o seletor de alta especificidade para seu próprio seletor, em que isso não teria tanto impacto. Aqui está um exemplo do que quero dizer:

article > :is(header, #nav) {
  background: white;
}

/* better as */
article > header,
article > #nav {
  background: white;
}

Com :where(), estou esperando para que as bibliotecas ofereçam versões sem especificidade. A competição de especificidade entre estilos de autor e de biblioteca pode chegar ao fim. Não há especificidade para concorrer ao criar CSS. O CSS vem trabalhando em um recurso de agrupamento como esse há algum tempo, ele já está disponível e ainda é um território inexplorado. Divirta-se criando folhas de estilo menores e removendo vírgulas.

Foto de Markus Winkler no Unsplash (em inglês)