Pseudo-Classes e Pseudo-Elementos
Tags: braziliandevs, beginners, css, html
Published: 2023-03-02 18:45:21

O <abbr title="Cascading Style Sheets">CSS</abbr> por si só pode ser um grande entrave pra quem adentra o mundo do Front-End, ainda mais quando as páginas que você desenvolve vão ficando cada vez mais complexas. E aí, além dos seletores de `elemento`, `.classe` e `#id`, começamos a lidar com seletores mais específicos, como o seletor de elementos-filhos (`pai > filho`), seletor adjacente (`elemento + adjacente`), seletor de atributo (`elemento[atributo]`) e os famigerados <code>**::pseudo-elementos**</code> e <code>**:pseudo-classes**</code>.

E é sobre esses dois últimos que tratamos nesse artigo. Quem são, o que comem e onde vivem?

> **_Sumário:_**
> _[Uma breve introdução](#uma-breve-introdução)_
> _[:pseudo-classes](#pseudoclasses)_
> _[::pseudo-elementos](#pseudoelementos)_
> _[Conclusão](#conclusão)_

![Pseudo-elementos vs pseudo-classes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z4a396hokd5ro63ul0hb.gif)

---

### Uma breve introdução

Tenho certeza que em seus trabalhos desenvolvidos você já usou muitos seletores que se iniciam com `:` ou `::` , como um `:hover` num botão ou um `::after` na sua **div**… Mas você já se perguntou qual deles é pseudo-classe e qual é pseudo-elemento? Já ficou _matutando_ porque um tem apenas um `:` enquanto o outro tem `::`, ou ainda, porque alguns funcionam tanto com `:` quanto com `::`? Se suas respostas para as perguntas acima foram “sim”, então você veio ao lugar certo!

Vamos abordar individualmente <mark>pseudo-elementos e pseudo-classes</mark> logo abaixo para que fique mais fácil identificá-los e diferenciá-los.

![Keep calm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92u1qwx3ygqwhmw2396m.JPG)

---

### :pseudo-classes

Começando pelo que parece ser o mais “complicado” de entender, segundo o [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes), as **pseudo-classes** são “palavras-chave adicionadas ao seletor que especificam um <mark>estado especial</mark> do elemento selecionado.” Esse estado (ou condição) pode ser um link que se encontra _visitado_ (`:visited`), ou um botão _ativado_ (`:active`) ou um elemento que seja o _primeiro de seu tipo_ em uma lista de elementos (`:first-of-type`).

As pseudo-classes são sempre escritas com um único `:` entre si e o seletor:

```css
seletor:pseudo-classe {
  propriedade: valor;
}
```

Existe uma quantidade enorme de pseudo-classes no CSS. Só no CSS3 foram adicionados 16 novos (e acredito que existam quase 40 no total) e, com essa adição, [a W3C criou uma classificação das pseudo-classes](https://www.w3.org/TR/selectors-3/#pseudo-classes) em 3 grupos principais:

- **Pseudo-classes dinâmicas:** classifica elementos com base em características diferentes de seus nomes, atributos ou conteúdo, ou seja, características que não podem ser deduzidas a partir do DOM. Ex: `:link`, `:visited`, `:hover`, `:focus` e `:active`;

- **Pseudo-classes de estados da UI:** literalmente classifica elementos de acordo com o estado em que eles se encontram. Ex: `:enabled` (ativado), `:disabled` (desativado) e `:checked` (marcado);

- **Pseudo-classes estruturais:** permite a seleção com base em informações extras do DOM, mas que não podem ser representadas por simples seletores e suas combinações. Com eles, podemos selecionar dinamicamente elementos baseados em sua posição no documento. Ex: `:nth-child()`, `:first-of-type`, `:only-child` e `:root`.

Importante enfatizar que as <mark>pseudo-classes afetam o elemento em que são usadas como um todo.</mark> Se a sua intenção é selecionar e estilizar apenas uma parte de um elemento existente, então você precisa usar pseudo-elementos!

---

### ::pseudo-elementos

Segundo o [MDN Web Docs](https://developer.mozilla.org/pt-BR/docs/Web/CSS/Pseudo-elements), **pseudo-elementos** são “palavras-chave adicionadas a um seletor que permitem que você estilize <mark>uma parte específica do elemento selecionado”.</mark> Nesse caso, nós não lidamos com estados ou condições dos elementos, nós apenas queremos estilizar <u>um pedacinho de algo que já existe</u> sem ter que criar um novo elemento no DOM pra isso. Bem mais simples, não?

Se você quiser estilizar a primeira letra de um parágrafo com tamanho, fonte e peso de fonte diferente do restante do parágrafo, por exemplo, você consegue esse efeito facilmente utilizando o pseudo-elemento `::first-letter` na tag `<p>` da sua página e acrescentando a estilização desejada!

![Exemplo de primeira letra estilizada](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/chvoa7597p3udhcw2gcf.JPG)

Os pseudo-elementos no geral são escritos com `::` entre si e o elemento que se deseja estilizar:

```css
elemento::pseudo-elemento {
  propriedade: valor;
}
```

Porém, você já deve ter reparado que alguns pseudo-elementos aceitam tanto `:` quanto `::`, não? O que acontece é que até o **CSS2**, tanto pseudo-elementos quanto pseudo-classes eram escritos apenas com `:`. Com o lançamento de novos seletores no **CSS3**, foi criada a regra do uso de `::` para diferenciar os dois pseudos. Então, devido à **retrocompatibilidade** dos browsers, os pseudo-elementos mais antigos, como `::after` e `::before` ainda aceitam o uso com apenas `:`, mas é interessante que você mantenha as boas práticas e escreva cada um com sua sintaxe correta. 😉

---

### Conclusão

Se a gente procurar o significado da palavra “pseudo” no [Dicionário Online de Português](https://www.dicio.com.br/pseudo/), temos:

> _De teor falso; cujo conteúdo não corresponde à realidade._

No caso do CSS, podemos considerar como “teor falso” o fato de que, ao usarmos pseudo-classes e pseudo-elementos, estamos basicamente trabalhando com estados ou elementos que <mark>não existem no <abbr title="Document Object Model">DOM</abbr></mark>, ou seja, não existem na árvore de elementos do seu <abbr title="Hyper Text Markup Language">HTML</abbr>, como vimos ao longo do artigo.

> _Mas eu "tou" pegando meu botão lá no HTML e colocando um `:hover` nele… Como assim ele não existe?_

O seu botão existe, sim, no HTML. Mas o `:hover` em si é um **estado** daquele botão, <mark>que só existe após a interação do usuário na página</mark>. É como se fosse um “estilo fantasma” que só vai existir quando a página identificar que alguma condição foi atendida.

O mesmo é válido, por exemplo, quando você usa `::first-letter` pra estilizar a primeira letra de um parágrafo: você **não** está criando um elemento específico apenas para essa letra. Você está pegando apenas uma parte de um elemento existente e **tratando-o como se fosse um elemento isolado**.

---

Pseudo-classes e pseudo-elementos são seletores extremamente importantes no CSS e que podem trazer muitas vantagens com seu uso correto. Em breve pretendo falar por aqui de alguns pseudo-elementos e pseudo-classes em mais detalhes! Um xero!

**_Fontes:_**
- _[MDN Web Docs: Pseudo-elementos](https://developer.mozilla.org/pt-BR/docs/Web/CSS/Pseudo-elements)_
- _[MDN Web Docs: Pseudo-classes](https://developer.mozilla.org/pt-BR/docs/Web/CSS/Pseudo-classes)_
- _[MDN Web Docs: Pseudo-classes and pseudo-elements](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)_
- _[Smashing Magazine: How To Use CSS3 Pseudo-Classes](https://www.smashingmagazine.com/2011/03/how-to-use-css3-pseudo-classes/)_
- _[POWELL, Kevin: Do you know the difference? pseudo-classes vs pseudo-elements](https://www.youtube.com/watch?v=RmDh3m8b9cU)_