As pseudo-classes e os pseudo-elementos

O CSS tem diversas coisas legais. Uma quantidade de propriedades, valores e funcionalidades, que por inúmeras vezes me fogem da memória. Uma das coisas mais interessantes do CSS, mas que geralmente me confunde, são as pseudo-classes e os pseudo-elementos.

Então eu resolvi escrever este post, e nele vou explicar a diferença e aplicabilidade dos dois. Espero colaborar com outras mentes tão preguiçosas na arte da lembrança, quanto a minha :)

Pseudo-classes

As pseudo-classes são muito úteis para fazermos manipulações estruturais, ou alterações de estilos de forma dinâmica. Uma forma interessante de pensarmos sobre pseudo-classes é que o seu resultado pode ser obtido com Javascript, através de eventos ou de seletores (como o :eq). Com a ajuda deste artifício, conseguimos entregar uma solução muito simples e funcional. Exemplo:

#menu a {
  color: blue;
}

#menu a:hover {
  color: red;
}

Veja o exemplo no jsFiddle.

Na demonstração acima, utilizamos a pseudo-classe :hover para alterar a cor do link de azul para vermelho. O evento “hover” acontece quando estamos com o mouse sobre o elemento. Outros eventos podem acontecer, como o :active (quando pressionamos o botão do mouse sobre o link), e :visited.

Outro exemplo muito bom, é se precisássemos que apenas o primeiro item fosse de cor laranja:

#menu li:first-child a {
  color: orange;
}

Veja o exemplo no jsFiddle.

Note que o caso poderia ser resolvido adicionando uma classe “first” ao primeiro elemento da lista, e atribuindo a propriedade color à esta classe. Mas com o uso de pseudo-classes, é possível economizar todo esse esforço.

Pseudo-elementos

Os pseudo-elementos, assim como as pseudo-classes, levam à economia de esforço, de interpretação de Javascript, e de elementos “não-semânticos”. Por exemplo, queremos que a primeira letra de um parágrafo ganhe destaque:

<p>
  <span>L</span>orem ipsum dolor sit amet, consectetur adipiscing elit.
  Pellentesque in scelerisque quam...
</p>

O CSS ficaria mais ou menos assim:

p {
  font-size: 14px;
}

p span {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 3px;
}

Veja exemplo no jsFiddle.

Podemos alcançar o mesmo resultado, sem necessitar do span, através do pseudo-elemento first-letter:

p {
  font-size: 14px;
}

p::first-letter {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 3px;
}

Veja o exemplo no jsFiddle.

Outros pseudo-elementos interessantes são os clássicos after e before, o first-line e o selection.

Considerações finais

Os pseudo-elementos e pseudo-classes não são nenhum “bicho de sete cabeças”, e podem economizar preciosas linhas de código (e tempo de processamento do usuário).

Quando bater aquela dúvida sobre qual utilizar, lembre-se: Quando o resultado pode ser obtido através de uma classe, use pseudo-classes; Quando o resultado pode ser obtido através de elementos não-semânticos, use pseudo-elementos.

Até a próxima…

Referências