8.1 Conceitos básicos
Combinar pseudoclasses e pseudo-elementos em CSS permite criar seletores poderosos e flexíveis para estilizar elementos, dependendo do seu estado, estrutura e conteúdo. Isso abre muitas possibilidades para criar estilos complexos e dinâmicos que melhoram a interface do usuário e a experiência de interação com a página da web.
Noções básicas de combinação
Pseudoclasses
As pseudoclasses são indicadas por um único dois-pontos (:) e são aplicadas aos elementos dependendo do seu estado ou posição. Por exemplo:
:hover— aplicado quando o cursor passa sobre o elemento:first-child— seleciona o primeiro elemento filho do pai
Pseudo-elementos
Pseudo-elementos são indicados por dois-pontos duplos (::) e são usados para estilizar partes de elementos ou adicionar conteúdo. Por exemplo:
::before— adiciona conteúdo antes do elemento::first-letter— estiliza a primeira letra do elemento
Combinação
Pseudoclasses e pseudo-elementos podem ser combinados para criar seletores complexos que permitem aplicar estilos a elementos com base em seu estado e estrutura.
Sintaxe:
seletor:pseudoclasse::pseudo-elemento {
propriedades: valores;
}
8.2 Combinação para interatividade
Exemplo 1: Estilização da primeira letra ao passar o mouse
Neste exemplo, a primeira letra do parágrafo é aumentada e colorida de vermelho quando o cursor passa sobre o parágrafo:
/* Estilização da primeira letra do parágrafo ao passar o mouse */
p:hover::first-letter {
font-size: 2em;
color: #e74c3c;
}
<p>Hover over this paragraph to see the first letter change.</p>
Exemplo 2: Adição de conteúdo antes do link no foco
Neste exemplo, um ícone é adicionado antes do link e colorido de azul quando o link está em foco:
/* Adição de ícone antes do link no foco */
a:focus::before {
content: "🔗 ";
color: #3498db;
}
8.3 Combinação para estilização de estrutura
Exemplo 3: Estilização do primeiro parágrafo dentro do div com adição de conteúdo
Neste exemplo, a primeira linha do primeiro parágrafo dentro do div é destacada em negrito e colorida de verde:
/* Estilização da primeira linha do primeiro parágrafo dentro do div */
div p:first-child::first-line {
font-weight: bold;
color: #2ecc71;
}
Exemplo 4: Adição de elemento decorativo após o último item da lista
Neste exemplo, um elemento decorativo é adicionado após o último item da lista e colorido de vermelho:
/* Adição de elemento decorativo após o último item da lista */
ul li:last-child::after {
content: "❦";
display: inline-block;
margin-left: 10px;
color: #e74c3c;
}
8.4 Combinação para condições complexas
Exemplo 5: Estilização de itens pares da lista ao passar o mouse
Neste exemplo, itens pares da lista recebem um fundo cinza claro e texto azul ao passar o mouse:
/* Estilização de itens pares da lista ao passar o mouse */
ul li:nth-child(even):hover {
background-color: #f0f0f0;
color: #3498db;
}
Exemplo 6: Estilização de links ativos que já foram visitados
Neste exemplo, links que foram visitados e estão em estado ativo são coloridos de laranja e sublinhados:
/* Estilização de links ativos que já foram visitados */
a:visited:active {
color: #e67e22;
text-decoration: underline;
}
8.5 Exemplo de implementação completa
/* Estilização da primeira linha do primeiro parágrafo dentro do div */
div p:first-child::first-line {
font-weight: bold;
color: #2ecc71;
}
/* Adição de elemento decorativo após o último item da lista */
ul li:last-child::after {
content: "❦";
display: inline-block;
margin-left: 10px;
color: #e74c3c;
}
/* Estilização de itens pares da lista ao passar o mouse */
ul li:nth-child(even):hover {
background-color: #f0f0f0;
color: #3498db;
}
/* Adição de ícone antes do link no foco */
a:focus::before {
content: "🔗 ";
color: #3498db;
}
/* Estilização da primeira letra do parágrafo ao passar o mouse */
p:hover::first-letter {
font-size: 2em;
color: #e74c3c;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de combinação de pseudoclasses e pseudo-elementos</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<p>Este é o primeiro parágrafo dentro do div.</p>
<p>Este é o segundo parágrafo dentro do div.</p>
</div>
<ul>
<li>Item da lista 1</li>
<li>Item da lista 2</li>
<li>Item da lista 3</li>
<li>Item da lista 4</li>
</ul>
<a href="#">Link com ícone no foco</a>
<p>Passe o mouse sobre este parágrafo para ver o efeito na primeira letra.</p>
</body>
</html>
GO TO FULL VERSION