Pseudo-elementos e pseudo-classes em CSS

Toda vez que temos que modificar um estilo CSS em nossa web, Toni e eu jogamos pedra-papel-tesoura para ver quem é o “sorteado” que consegue fazer a tarefa. Como assim, você pode perguntar? Bem, por muito tempo trabalhar com HTML e CSS tem sido uma dor de cabeça, pois consertar algo em uma ponta quebrou muitas coisas em outros lugares.

Mas a verdade é que o CSS mudou muito nos últimos anos e se você tirar proveito de suas novas funcionalidades, é muito mais fácil fazer o layout e o estilo do seu site de maneira adequada e eficaz. Na minha opinião, dois dos grandes avanços em CSS que vimos recentemente são a inclusão, primeiro, do flex (para layout de linhas e colunas) e, um pouco mais tarde, grid (para layout de grades).

CSS está cheio de recursos que podem simplificar seu trabalho . E hoje vamos ver dois deles: pseudo-elementos e pseudo-seletores.

Como “Criar Conteúdo” com Pseudo-Elementos CSS

Os pseudo-elementos CSS são um mecanismo para acessar partes do HTML que não possuem um nó associado no DOM . Por exemplo, uma “parte do nosso documento” pode ser “a primeira linha de um parágrafo”, “a primeira letra de um parágrafo” ou “a seleção feita pelo usuário”, nenhuma das quais tem um nó associado. Mas os pseudo-elementos também são uma forma de criar conteúdo antes ou depois de um elemento existente por meio de CSS.

Os pseudoelementos disponíveis no CSS3 são:

• ::before : adiciona conteúdo antes de um elemento
• ::afte r: adiciona conteúdo após um elemento
• ::first-letter : seleciona a primeira letra do elemento “block” (ou seja, aqueles cuja propriedade display é definida como block , inline-block , table-cell , etc.)
• ::first-line : seleciona a primeira linha de um elemento “block”
• ::selection : refere-se às partes do documento que o visitante selecionou

Como você pode ver, os pseudo-elementos são caracterizados por começarem com um par de dois pontos ( :: ). E é assim que você os usa.

Selecionando Partes do Documento

Suponha, por exemplo, que queremos que um determinado parágrafo tenha a primeira linha em laranja e sublinhada. Bem, basta fazer algo assim:

 p::first-line { color: orange; text-decoration: underline; }

e você obterá o resultado correto:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis leo em turpis interdum, em pharetra velit elementum. Nam eget lacus sed lacus dictum scelerisque. Proin porta ligula sed mi sempre, vel interdum massa auctor. Pellentesque et massa congue, tincidunt erat ac, tincidunt elit. Sed ac dolor metus. Nam comodo metus sed ligula consectetur interdum. Curabtur odio est, tempor id egestas nec, aliquam at nisl.

Se, por outro lado, você deseja modificar a seleção, a abordagem é exatamente a mesma. Apenas tenha em mente que o número de propriedades CSS que podemos ajustar é limitado a color , plano de background , cursor e outline :

 p::selection { background: #21acde; color: white; }

Você pode ver o resultado no parágrafo a seguir, supondo que você selecione algo:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis leo em turpis interdum, em pharetra velit elementum. Nam eget lacus sed lacus dictum scelerisque. Proin porta ligula sed mi sempre, vel interdum massa auctor. Pellentesque et massa congue, tincidunt erat ac, tincidunt elit. Sed ac dolor metus. Nam comodo metus sed ligula consectetur interdum. Curabtur odio est, tempor id egestas nec, aliquam at nisl.

Criando novo conteúdo

Você também tem a opção de adicionar conteúdo dinamicamente à sua página. Por exemplo, imagine que você tenha uma lista de itens como esta:

 <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul>

Normalmente, é assim que as listas se parecem:

• Um
• Dois
• Três

mas você pode ajustá-lo para que cada elemento seja separado do próximo usando uma barra azul:

• Um
• Dois
• Três

usando o pseudo-elemento ::after em cada item da lista da seguinte forma:

 ul li { display: inline; } ul li::after { color: #21acde; content: " | "; display: inline-block; }

Com os pseudo-elementos ::before e ::after você pode fazer muitas coisas boas . Por exemplo, você pode combinar vários fundos em um único elemento, exibir os URLs dos links quando a página for impressa, ordenar os elementos flutuantes, rotular blocos, embelezar sua tipografia e assim por diante.

Como aplicar estilos com mais precisão usando pseudoclasses

As pseudoclasses CSS nos permitem selecionar elementos do nosso site que estão em um estado específico ou possuem alguma propriedade especial que os diferencia. O exemplo mais comum (e mais antigo) é provavelmente as pseudoclasses de link:

• a:link são aqueles links que você ainda não visitou
• a:visited é qualquer link que você já visitou
• a:hover é o link que você está passando
• a:focus corresponde ao link que está focado no momento (que é semelhante a passar o mouse, mas usando o teclado em vez do mouse)
• a:active corresponde ao link em que você está clicando no momento

Em CSS existem cerca de 60 pseudo-classes. A grande maioria deles permite que você filtre itens com base em seu estado (por exemplo, você pode selecionar elementos somente leitura usando, você adivinhou, a pseudo-classe :read-only ). Mas há algumas “exceções” interessantes a essa regra que vale a pena mencionar.

Mas antes de fazermos, apenas uma observação rápida: observe como você pode distinguir uma pseudoclasse de um pseudoelemento porque a primeira começa com dois pontos ( : ) enquanto a segunda começa com dois ( :: ).

Selecionando os Filhos de um Elemento Usando Pseudoclasses “filho” e “do tipo”

Lembra do exemplo que vimos anteriormente, onde adicionamos uma barra vertical para separar os elementos de uma lista? Bem, se você olhar de perto, verá que a regra que definimos não funciona muito bem:

• Um
• Dois
• Três

porque o último elemento também inclui uma barra vertical, embora não devesse. Se quisermos removê-lo, podemos fazer algo assim:

 ul li { display: inline; } ul li::after { color: #21acde; content: " | "; display: inline-block; } ul li:last-child::after { display: none; }

que funciona exatamente como você imagina:

• Um
• Dois
• Três

Como você pode ver, tudo o que estamos fazendo é adicionar uma nova regra usando a pseudo-class :last-child , que nos permite selecionar o último elemento li em nossa lista ul e, assim que o tivermos, ocultar seu pseudo-elemento ::after com a propriedade display definida como none .

Recursos especiais de * -child e * -of-type

Existem três variações da pseudo-classe *-child :

• :first-child corresponde ao primeiro filho de um elemento (duh!)
• :last-child faz o mesmo, mas com o último
• :nth-child(i) , você adivinhou, seleciona o i -ésimo elemento (assim, por exemplo, :nth-child(2) corresponde ao segundo filho)

Então, vamos olhar e pensar sobre o seguinte CSS:

 li strong:first-child { color: orange; text-decoration: underline; }

e o seguinte trecho de HTML:

 <ol> <li>Lorem <strong>ipsum</strong> dolor <strong>sit</strong> amet.</li> <li><em>Lorem</em> <strong>ipsum</strong> dolor <strong>sit</strong> amet.</li> <li>Lorem <strong>ipsum</strong> dolor <em><strong>sit</strong></em> amet.</li> </ol>

O que você acha que acontecerá? Em princípio, parece que em todos os três casos, a palavra ipsum será laranja e sublinhada, porque ipsum é o primeiro filho strong em cada elemento li , certo? Vamos ver:

1. Lorem ipsum dolor sit amet.
2. Lorem ipsum dolor sit amet.
3. Lorem ipsum dolor sit amet.

Bem, perto o suficiente. Você consegue adivinhar por que isso aconteceu?

A :first-child se aplica ao primeiro filho de um elemento. Na primeira frase, ipsum é a primeira marca strong , que por acaso é o primeiro filho. Na segunda frase, o primeiro nó filho é em (com a palavra Lorem ) e depois vem uma tag strong com a palavra ipsum . Portanto, essa marca forte não é o “primeiro filho”. Por fim, na terceira frase há duas tags que correspondem à nossa regra: ipsum (é como a primeira frase) e sit . Observe como sit é uma tag strong que é o primeiro filho de sua tag pai ( em ).

Então, e se quiséssemos sublinhar a primeira marca strong de cada item li ? Bem, temos que usar uma pseudoclasse diferente e garantir que apenas correspondamos a elementos que são filhos diretos de li :

 li > strong:first-of-type { color: orange; text-decoration: underline; }

que funciona como esperado:

1. Lorem ipsum dolor sit amet.
2. Lorem ipsum dolor sit amet.
3. Lorem ipsum dolor sit amet.

Muito incrível, hein? Novamente, existem três variações desta pseudo-classe:

• x:first-of-type corresponde ao primeiro irmão cujo tipo é x
• x:last-of-type seleciona o último
• x:nth-of-type(i) corresponde ao i -ésimo irmão cujo tipo é x

Selecionando o oposto com :not

Finalmente, a pseudo-classe sobre a qual eu queria falar com você hoje é :not . :not é uma pseudo-classe que corresponde aos elementos que não atendem a uma determinada propriedade. Por exemplo, vamos voltar ao nosso exemplo anterior:

• Um
• Dois
• Três

Para resolver o problema da barra que aparece no último elemento, basicamente (1) adicionamos a barra a todos os elementos li e (2) sobrescrevemos a regra no último elemento e a ocultamos:

 ul li { display: inline; } ul li::after { color: #21acde; content: " | "; display: inline-block; } ul li:last-child::after { display: none; }

Mas isso não parece muito ideal, não é? Estamos ultrapassando a primeira tule e precisamos corrigir nossos estilos no último elemento. O que realmente queríamos era adicionar a barra a todos os elementos, exceto ao último…

Bem, podemos conseguir isso aplicando a pseudo-classe :not e combinando-a com :last-child :

 ul li { display: inline; } ul li:not(:last-child)::after { color: #21acde; content: " | "; display: inline-block; }

que aplica o estilo a todos os elementos li que não são o último elemento ( :not(:last-child) ), que descreve perfeitamente nosso objetivo e assim resolve nosso problema:

• Um
• Dois
• Três

Em suma

Os pseudo-elementos e pseudo-classes CSS nos permitem ser muito precisos ao acessar os diferentes elementos do nosso site. Com eles, podemos escrever regras CSS mais concisas e específicas, o que simplifica sua manutenção e evita a possibilidade de ter que sobrescrever continuamente regras genéricas para casos específicos.

Espero que tenha gostado do post e, se gostou, compartilhe com seus amigos!

Imagem em destaque por JFL no Unsplash.