O que são pseudo-classes e pseudo-elementos no Html
Bem-vindo(a) ao post no blog.
🧩 O que são Pseudo-classes
As pseudo-classes permitem definir estilos diferentes conforme o estado do elemento (por exemplo, quando o mouse passa por cima, quando é clicado ou quando está selecionado).
💡 Sintaxe básica:
seletor:pseudo-classe {
propriedade: valor;
}
🧠 Principais pseudo-classes interativas e Descrição
:hover → Quando o usuário passa o mouse sobre o elemento.
:active → Quando o elemento está sendo clicado (pressionado).
:focus → Quando o elemento recebe foco (por teclado ou clique).
:visited → Quando um link já foi acessado.
:disabled → Para inputs, botões ou campos inativos.
🧭 Exemplo prático: Links interativos
<a href="#">Clique aqui</a>
a {
color: #0077cc;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #003366; /* muda a cor ao passar o mouse */
text-decoration: underline;
}
a:active {
color: #ff9900; /* muda quando clicado */
}
a:visited {
color: #800080; /* já visitado */
}
🔹 Essa sequência cria feedback visual imediato ao usuário.
🔹 A ordem correta deve sempre ser usada:
a:link → a:visited → a:hover → a:active
(para evitar conflitos quando o navegador aplica prioridade).
🎨 Botões com efeitos de interação
<button>Enviar</button>
button {
background-color: #0077cc;
border: none;
color: #fff;
padding: 12px 20px;
font-size: 16px;
border-radius: 5px;
transition: all 0.3s ease;
cursor: pointer;
}
button:hover {
background-color: #005fa3;
transform: scale(1.05);
}
button:active {
background-color: #004c80;
transform: scale(0.98);
}
🧠 Destaques técnicos:
● transition → anima suavemente mudanças de propriedades;
● cursor: pointer → indica clicabilidade;
● transform: scale() → cria efeito de "zoom" no hover.
🔍 Campos de formulário com foco (:focus)
A pseudo-classe :focus é essencial para melhorar a usabilidade e acessibilidade, mostrando ao usuário onde ele está digitando.
💡 Exemplo:
<input type="text" placeholder="Digite seu nome">
input {
padding: 10px;
border: 2px solid #bbb;
border-radius: 5px;
outline: none;
font-size: 14px;
}
input:focus {
border-color: #0077cc;
box-shadow: 0 0 5px #0077cc;
}
🔹 Isso cria destaque visual e melhora a navegação com teclado (Tab).
🔹 O atributo outline: none remove o contorno padrão do navegador.
⚙️ Pseudo-elementos: ::before e ::after
Os pseudo-elementos criam conteúdo adicional antes ou depois do conteúdo real de um elemento — sem alterar o HTML.
💡 Exemplo prático:
<h2>Aprendendo CSS</h2>
h2::before {
content: "★ ";
color: gold;
}
h2::after {
content: " ★";
color: gold;
}
🔹 O texto “★” não existe no HTML, mas aparece visualmente.
🔹 Muito usado para ícones, separadores e decorações.
⚙️Outros pseudo-elementos úteis
Pseudo-elemento Descrição
::first-letter → Estiliza apenas a primeira letra.
::first-line → Estiliza a primeira linha de texto.
::selection → Estiliza o destaque quando o usuário seleciona com o mouse.
💡 Exemplo:
p::first-letter {
font-size: 2em;
color: #0077cc;
font-weight: bold;
}
p::selection {
background: #0077cc;
color: white;
}
🔹 Isso cria uma estética elegante e dá destaque visual na leitura.
🧠 Transições e efeitos suaves (com transition)
Você pode animar mudanças visuais de forma fluida, criando efeitos modernos e agradáveis.
💡 Exemplo:
.card {
background: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
🔹 Muito usado para cards de produtos, projetos ou portfólios.
🔹 Pode combinar várias animações no mesmo transition.
🧩 Agrupando Pseudo-classes: Vários estados
Você pode combinar pseudo-classes em um mesmo seletor:
button:hover,
button:focus {
background-color: #005fa3;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
💬 Isso garante a mesma aparência tanto para o hover quanto para o foco
(técnica útil para acessibilidade com teclado).
🧱 Exemplo Completo — Página Interativa com Efeitos CSS
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo-classes e Interação</title>
<style>
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(to bottom, #e6f0ff, #fff);
margin: 0;
padding: 40px;
}
h1 {
text-align: center;
color: #0077cc;
}
a {
color: #0077cc;
text-decoration: none;
font-weight: bold;
transition: 0.3s;
}
a:hover {
color: #003366;
text-decoration: underline;
}
.card {
background: white;
border-radius: 10px;
padding: 20px;
width: 280px;
margin: 20px auto;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
button {
background-color: #0077cc;
border: none;
color: white;
padding: 12px 20px;
margin-top: 10px;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
button:hover, button:focus {
background-color: #005fa3;
transform: scale(1.05);
}
input {
display: block;
padding: 8px;
margin: 10px 0;
width: 90%;
border-radius: 5px;
border: 2px solid #ccc;
outline: none;
transition: border-color 0.3s ease;
}
input:focus {
border-color: #0077cc;
box-shadow: 0 0 8px rgba(0,119,204,0.3);
}
footer {
text-align: center;
color: #888;
margin-top: 40px;
}
</style>
</head>
<body>
<h1>Efeitos e Interação CSS</h1>
<div class="card">
<p>Passe o mouse sobre este card para ver o efeito!</p>
<a href="#">Saiba mais</a>
<button>Enviar</button>
<input type="text" placeholder="Digite seu nome...">
</div>
<footer>
<p>© 2024 - Curso HTML e CSS do Zero ao Avançado</p>
</footer>
</body>
</html>
✅ Combina :hover, :focus, transition, e box-shadow.
✅ Responsivo, moderno e totalmente acessível.
📘 Para um melhor Aprendizado 🎯 Pratique com exercícios, desafios e projetos
💻 Exercício
Crie um arquivo interatividade.html com:
1. Um botão com efeitos de hover, focus e active;
2. Um campo de formulário que muda o estilo com :focus;
3. Um link que altera cor e sublinhado no :hover;
4. Um mini card com sombra e movimento ao passar o mouse;
5. (Desafio Extra) use ::before ou ::after para adicionar um ícone decorativo aos títulos.
Comentários
Postar um comentário