A pseudo-classe :is() serve para simplificar a escrita em CSS e para evitar "quebras" de layout.

Ela pode ser bem útil de se usar quando temos que estilizar muitos elementos dentro de um outro elemento.

Vamos adicionar esse código HTML como exemplo:

<header>
  <a href="#!">Header Link</a><br />
  <h1>olá mundo</h1>
  <h2>olá mundo 2</h2>
  <p>Header Paragraph</p>
</header>

E inicialmente, vamos adicionar esse código em CSS:

header a,
header h1,
header h2,
header :p {
  color: green;
}

Note que, todos os elementos estão sendo chamados no CSS corretamente menos o elemento :p

Quando temos vários elementos sendo estilizados de uma vez só e erramos na chamada de apenas um elemento CSS, toda a estilização não funciona

Para evitar esse tipo de erro usaremos a pseudo-classe :is():

header :is(a, h1, h2, :p) {
  color: green;
}

Se errarmos na chamada de um elemento, os outros elementos ainda serão estilizados:

Outra vantagem de se utilizar a :is() é que não precisamos escrever o mesmo elemento diversas vezes. Por exemplo:

Sem :is():

section h1, section h2, section h3, section h4, section h5, section h6, 
article h1, article h2, article h3, article h4, article h5, article h6, 
nav h1, nav h2, nav h3, nav h4, nav h5, nav h6, 
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
  color: #BADA55;
}

Com :is():

:is(section, article, nav, .content) :is(h1, h2, h3, h4, h5, h6) {
  color: #BADA55;
}

Conclusão

E chegamos ao fim desse post.😁

Espero que tenha gostado. Se quiser saber mais sobre a pseudo-classe :is() dê uma olhada na documentação.

Até mais!👋