🎭 Pseudoclasses e Pseudoelementos

📚 Objetivo da Aula: Dominar pseudoclasses e pseudoelementos CSS para criar interfaces interativas e elementos visuais avançados. Estes seletores especiais permitem aplicar estilos baseados em estados dinâmicos e partes específicas de elementos sem adicionar HTML extra.

🎭 1. Pseudoclasses - Estados Dinâmicos

💡 Conceito Fundamental:
Pseudoclasses aplicam estilos baseados no estado atual dos elementos. Elas reagem a interações do usuário (hover, focus, active) e condições especiais (checked, disabled, visited), proporcionando feedback visual dinâmico.

🔗 Pseudoclasses para Links

1.1 :link e :visited - Histórico de Navegação

📝 Código CSS Educativo

/* 🔗 Links não visitados */
a:link {
  color: #0056b3;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
}

/* 👁️ Links já visitados pelo usuário */
a:visited {
  color: #6f42c1;
  opacity: 0.8;
}

🔍 Demonstração Interativa

Link não visitado
Outro link
Mais um link

Clique nos links para ver a mudança de cor!

🎯 Explicação Prática:
• :link - Aplica estilo a links ainda não visitados
• :visited - Aplica estilo a links já visitados pelo usuário
• Essencial para feedback visual de navegação
• Melhora a experiência do usuário indicando onde já esteve

2.1.2 :hover - Interação com Mouse

/* Quando o mouse passa por cima */
a:hover {
  background: #e3f2fd;      /* Fundo azul claro */
  color: #004085;           /* Azul mais escuro */
  transform: translateY(-2px); /* Move 2px para cima */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Sombra sutil */
  transition: all 0.3s ease;  /* Transição suave */
}

✨ Teste agora: Passe o mouse sobre os links acima para ver o efeito!

2.1.3 :active - Momento do Clique

/* No momento exato do clique */
a:active {
  color: #dc3545;           /* Vermelho quando clicado */
  transform: translateY(0); /* Volta à posição original */
}

🔘 Botão Demonstrativo

📝 Pseudoclasses para Formulários

2.1.4 :enabled e :disabled

📝 Código CSS

/* Campos habilitados */
input:enabled {
  border-color: #28a745;   /* Verde */
  background: white;       /* Fundo branco */
  cursor: text;           /* Cursor de texto */
}

/* Campos desabilitados */
input:disabled {
  background-color: #e9ecef;     /* Cinza */
  border-color: #ced4da;   /* Borda cinza */
  cursor: not-allowed;     /* Cursor proibido */
}

🔍 Demonstração

2.1.5 :checked - Elementos Marcados

/* Checkbox ou radio marcado */
input:checked + label {
  color: #28a745;          /* Verde para o label */
  font-weight: bold;       /* Texto em negrito */
  transform: scale(1.05);  /* Leve aumento de tamanho */
}

Marque esta opção para ver o efeito :checked

2.2 Pseudoelementos - Partes Específicas

💡 Definição
Pseudoelementos permitem aplicar estilos a partes específicas de um elemento, como a primeira letra ou criar elementos virtuais que não existem no HTML.

✨ Criando Conteúdo Virtual

2.2.1 ::before - Antes do Elemento

📝 Código CSS

/* Adiciona conteúdo ANTES */
p::before {
  content: "👉 ";          /* Ícone emoji */
  color: #28a745;         /* Verde */
  font-weight: bold;      /* Negrito */
  margin-right: 5px;      /* Espaço à direita */
}

🔍 Resultado

Este texto tem um ícone antes!

2.2.2 ::after - Depois do Elemento

📝 Código CSS

/* Adiciona conteúdo DEPOIS */
p::after {
  content: " ✨";         /* Ícone emoji */
  color: #ffc107;        /* Amarelo */
  animation: pulse 2s infinite; /* Animação */
}

🔍 Resultado

Este texto tem um ícone animado depois!

📝 Estilizando Partes do Texto

2.2.3 ::first-letter - Primeira Letra

📝 Código CSS

/* Estiliza apenas a primeira letra */
p::first-letter {
  font-size: 3em;        /* 3x maior */
  color: #667eea;        /* Azul */
  float: left;           /* Flutua à esquerda */
  line-height: 1;        /* Altura da linha */
  margin-right: 5px;     /* Espaço à direita */
  font-weight: bold;     /* Negrito */
}

🔍 Resultado

Esta primeira letra é maior e colorida, criando um efeito de capitular como nos livros antigos.

2.2.4 ::first-line - Primeira Linha

📝 Código CSS

/* Estiliza apenas a primeira linha */
p::first-line {
  font-weight: bold;        /* Negrito */
  color: #764ba2;          /* Roxo */
  text-transform: uppercase; /* Maiúsculas */
  letter-spacing: 1px;     /* Espaçamento das letras */
}

🔍 Resultado

Esta primeira linha aparece em negrito e maiúsculas, enquanto o resto do texto permanece normal. Este efeito é muito útil para destacar o início de parágrafos importantes.

2.2.5 ::selection - Texto Selecionado

📝 Código CSS

/* Quando o texto é selecionado */
::selection {
  background: #fff3cd;     /* Fundo amarelo claro */
  color: #856404;         /* Texto marrom */
}

🔍 Teste Agora

Selecione este texto com o mouse para ver o efeito personalizado do ::selection! Arraste o mouse sobre estas palavras.

2.2.6 ::marker - Marcadores de Lista

📝 Código CSS

/* Personaliza marcadores de lista */
li::marker {
  content: "🌟 ";         /* Estrela como marcador */
  font-size: 1.2em;      /* Maior que o texto */
}

🔍 Resultado

Primeiro item da lista
Segundo item da lista
Terceiro item da lista

📊 Tabela Comparativa Completa

Tipo	Símbolo	Exemplo	Quando Usar	Resultado
Pseudoclasse	`:`	`a:hover`	Estados dinâmicos	Muda com interação
Pseudoelemento	`::`	`p::first-line`	Partes específicas	Estiliza parte do elemento

⚠️ Dica Importante: Pseudoclasses reagem a estados (hover, active, checked), enquanto pseudoelementos criam ou estilizam partes (before, after, first-letter).

📚 O que aprendemos:

🎭 Pseudoclasses reagem a estados como :hover, :visited, :checked
✨ Pseudoelementos atuam sobre partes de elementos, como ::before, ::selection
🚀 Combinar esses seletores ajuda a criar experiências ricas sem sobrecarregar o HTML
🎨 Eles permitem interatividade e detalhes visuais sem JavaScript

🤔 Teste seus conhecimentos

Para que serve a propriedade content em ::after?
Qual a diferença prática entre :hover e :active?
Como o seletor li::marker personaliza listas?
Por que usar ::first-letter em vez de estilizar manualmente?

🎯 Tarefas Práticas

🔨 Criar um botão com animação completa usando :hover, :active e transition
🎨 Desenvolver uma lista estilizada com ::marker personalizado e ícones únicos
✨ Implementar um parágrafo com ::first-letter estilo revista e ::first-line destacada
🖱️ Testar ::selection com cores que combinem com o design da página
📝 Criar um formulário que use todos os estados :enabled, :disabled, :focus e :checked