Novas funcionalidades do CSS (:is() e :where())
Tags: html, css, webdev, frontend
Published: 2021-04-25 11:44:26

Recentemente chegou novas funcionalidades no CSS que facilitam demais a automatizar quando queremos selecionar listas de seletores para usar pseudo-classes em algum elemento. Portanto, hoje veremos sobre as funções :is() e :where(), o que elas são, como usar, principais características e compatibilidades.

## O que são pseudo-classes?
Antes de mais nada, vamos deixar claro o que são pseudo-classe. Então, pseudo-classe é uma palavra-chave do CSS que colocamos em seletores para alterar o estado inicial dele, por exemplo: o :hover é usado para alterar o estado de um elemento quando o mouse passa em cima dele.

{% codepen https://codepen.io/yasmimvieira/pen/oNBmyMG default-tab=js,result %}

Existem vários outros pseudo-classes, mas hoje iremos abordar dois em específico.

## O que é :is() e :where()?
:is() e :where() são funções pseudo-classes do CSS que nos possibilita colocar como argumento uma lista de seletores, sendo assim selecionamos tudo de uma vez só. Assim, o código fica muito mais limpo e fácil de manusear.

Elas são muito semelhantes e simples de usar, então agora vamos pensar em como coloríamos um hover em uma tag **p** que está em vários seletores diferentes, seria algo parecido com isso:

```
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}
```

A problemática de fazer dessa forma, é que estamos repetindo várias vezes a mesma coisa e o que essas novas funções fazem é deixar esse código mais enxuto, simples e limpo, pois com elas podemos selecionar vários seletores de uma só vez e fazer o hover. 

###### Exemplo de :is() e :where()

```
:is(header, main, footer) p:hover {
   color: red;
   cursor: pointer;
}

```

------

```
:where(header, main, footer) p:hover {
   color: red;
   cursor: pointer;
}

```
Ou seja, dessa forma juntamos todos os seletores em um lugar e conseguimos colocar o hover no **p**, sem precisar repetir.
Mas aparentemente eles não tem nada de diferente certo? **Errado**, a principal diferença entre os dois é a **especificidade**.

> Especificidade é quando os navegadores definem os valores que são mais relevantes naquele contexto, ou seja, quando um item tem maior especificidade ele se sobrepõe ao que tem menor prioridade.

Nesse caso, o :is() tem maior especificidade, enquanto o :where() tem 0, então quando utilizarmos os dois juntos, o :is() vai sobrepor o :where() quando estivermos indicando valores iguais. 

###### Por exemplo

{% codepen https://codepen.io/yasmimvieira/pen/KKaJRvo default-tab=js,result %}

Perceba, que a cor que prevalece é o azul já que o :is() tem maior relevância.

## Forgiving Selector Parsing
Essas funções também aceitam o termo: **Forgiving Selector Parsing** ou **_"Esquecer o seletor"_**. Esse conceito basicamente produz o efeito de passar por cada seletor analisando todos eles e verificando se são válidos ou não. Mas, invés de dar erro, ele simplesmente ignora aqueles que são inválidos e segue o jogo com os seletores válidos.

###### Exemplos

```
:is(header, footer, main, :selector) p: hover {}
```
Nesse caso, eu estou colocando como um "seletor" uma pseudo-classe, então ele é um seletor inválido, mas ele não estoura nenhum erro, apenas segue e prioriza os seletores válidos:

{% codepen https://codepen.io/yasmimvieira/pen/WNRPyxY default-tab=js,result %}

## Compatibilidade nos browsers
Por serem funcionalidades novas a compatibilidade é consideravelmente baixa em alguns browsers, porém pode ser interessante começar a usa-las caso isso não prejudique a usabilidade do seu software. Abaixo está uma tabela das duas funções e suas aceitações nos navegadores:

###### :is()
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93squq2ps3cnsdleb1q6.png)

##### :where()
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05hj1bu3di9zfeoj9r0j.png)


## Agradecimento

Por hoje é só galera, espero que tenham gostado, esse post é de uma série que estou iniciando, onde vou postar dicas de css.
Espero que tenham gostado e muito obrigada pela leitura!


# Gostou do post?
- Deixe seu like
- Deixe seu feedback e sugestões
- Compartilhe com seus amigos


# Você também pode me acompanhar em:

- [Medium](https://yasmimv.medium.com/)
- [Linkedin](https://www.linkedin.com/in/yasmim-barbosa/)
- [Github](https://github.com/YasmimVieira)
- [Behance](https://www.behance.net/yasmimvieira3)