Entendendo CSS: Pseudo-Classes e Pseudo-Elementos

O CSS 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 ::pseudo-elementos e :pseudo-classes.

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

Sumário:
Uma breve introdução
:pseudo-classes
::pseudo-elementos
Conclusão

Uma breve introdução

Tenho certeza que em seus trabalhos desenvolvidos você já usou muito CSS com os 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 pseudo-elementos e pseudo-classes logo abaixo para que fique mais fácil identificá-los e diferenciá-los.

Foto por Cory no Unsplash

:pseudo-classes

Começando pelo que parece ser o mais “complicado” de entender, segundo o MDN Web Docs, as pseudo-classes são “palavras-chave adicionadas ao seletor que especifica um estado especial 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:

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 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 , :disabled e :checked;
• 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 pseudo-classes selecionam o elemento em que são usadas como um todo. 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, pseudo-elementos são “palavras-chave adicionadas a um seletor que permitem que você estilize uma parte específica do elemento selecionado”. Nesse caso, nós não lidamos com estados ou condições dos elementos, nós apenas queremos estilizar um pedacinho de algo que já existe sem ter que criar um novo elemento no DOM pra isso. Bem mais simples, não?

Se você for ao primeiro parágrafo deste artigo, pode ver que a primeira letra possui tamanho, fonte e peso de fonte diferente do restante do parágrafo. Esse efeito poderia ser facilmente alcançado utilizando o pseudo-elemento ::first-letter na tag <p> da sua página e acrescentando a estilização desejada!

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

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 um :. 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, 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 não existem no DOM, ou seja, não existem na árvore de elementos do seu HTML, como vimos ao longo do artigo.

Mas, Angela, como assim? 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 no HTML. Mas o :hover em si é um estado daquele botão, que só existe após a interação do usuário na página. É 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!

Espero que esse artigo lhe tenha sido útil. Se sim, que tal deixar algumas palminhas aqui embaixo? Comentários também são bem vindos! Até a próxima!

Fontes:
MDN Web Docs: Pseudo-elementos
MDN Web Docs: Pseudo-classes
MDN Web Docs: Pseudo-classes and pseudo-elements
Smashing Magazine: How To Use CSS3 Pseudo-Classes
POWELL, Kevin: Do you know the difference? pseudo-classes vs pseudo-elements