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 listas de seletores longas para segmentar vários elementos com as mesmas regras de estilo. Por exemplo, se você quiser colorir ajustar as tags <b> encontradas em um elemento "heading", você pode escrever:

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 as conveniências de seletor mais curto são apenas uma parte do valor que :is() e :where() levam ao CSS. Nesta postagem, você descobrirá a sintaxe e o valor desses dois pseudosseletores funcionais.

Um visual infinito de antes e depois usando :is()

Compatibilidade com navegadores

:is()

Compatibilidade com navegadores

• 88
• 88
• 78
• 14

Origem

:where()

Compatibilidade com navegadores

• 88
• 88
• 78
• 14

Origem

Conheça :is() e :where()

Esses são seletores de pseudoclasse funcionais. Observe o () no final e a forma como elas começam com :. Pense nelas como chamadas de função dinâmica de ambiente de execução que elementos de correspondência. 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, que permitem anular ou aumentar a especificidade.

Agrupamento de seletor

Tudo o que :is() pode fazer em relação ao agrupamento, assim como :where(). Isso inclui o uso em qualquer lugar do seletor, aninhamento e empilhamento. Cheia a flexibilidade do CSS que você já 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 desses dois campos pseudoclasses funcionais. Encontrar áreas do código que podem se beneficiar :is() ou :where(), procure seletores com várias vírgulas e seletor repetição.

Como usar seletores simples e complexos com :is()

Para saber mais sobre os seletores, confira o módulo de seletores em Learn CSS. Estes são 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;
}

Normalmente, quando você usa um , para criar uma lista de seletores, se algum deles for inválido, todos os seletores serão invalidados e a lista não vai corresponder aos elementos. Isso significa que eles não toleram erros. :is() e :where(), no entanto, são tolerantes e podem ajudar você a sair de uma situação difícil.

Até agora, :is() e :where() são sintaticamente intercambiáveis. É hora de ver como eles são diferentes.

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

No que diz respeito à especificidade, :is() e :where() divergem bastante. Para um revise as especificidades, consulte o módulo de especificidade em 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 maior especificidade da lista é uma pegadinha quando eu estava ficando muito entusiasmada para agrupar. Eu sempre pude melhore a legibilidade movendo o seletor de alta especificidade para o próprio seletor em que 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 que as bibliotecas ofereçam versões sem especificidade. A competição de especificidade entre os estilos de autor e a biblioteca estilos podem chegar ao fim. Não haveria maneira específica de competir ao escrever CSS. O CSS vem trabalhando em um recurso de agrupamento como esse há alguns ainda é um território pouco explorado. Divirta-se criando folhas de estilo menores e removendo vírgulas.

Foto de Markus Winkler no Unsplash