📘 Aula 20 MD-2: Pseudo-classes em CSS 📘

Introdução

Pseudo-classes em CSS permitem aplicar estilos especiais a elementos em estados específicos, sem a necessidade de adicionar classes extras no HTML.

Elas são muito úteis para criar interatividade e destacar elementos de acordo com ações do usuário ou posições na hierarquia do documento.

Alguns extras foram adicionados nessa aula caso veja o video de créditos.

Pseudo-classe :hover

A pseudo-classe :hover é acionada quando o usuário passa o mouse sobre um elemento. É muito utilizada para criar interatividade em menus, botões e links.

/* Estilo padrão */
div {
  background-color: navy;
  color: white;
  padding: 15px;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
}

/* Quando o mouse passa por cima */
div:hover {
  background-color: yellow;
  color: black;
  font-weight: bold;
}

💡 Muito usado em botões e links para indicar que são clicáveis.

Observação: em dispositivos móveis o comportamento será de cliques fora e dentro do botão

Exemplo :hover revelando parágrafo

Ao passar o mouse, o texto escondido aparece.

div > p {
  display: none;
}

div:hover > p {
  display: block;
  background: black;
  color: white;
  padding: 5px;
}

Aqui o texto é revelado ao passar o mouse sobre o botão e fecha ao tirar o mouse de cima do botão.

Observação: em dispositivos móveis o comportamento será de cliques fora e dentro do botão

Pseudo-classe :active

A pseudo-classe :active representa o momento em que o elemento está sendo clicado (pressionado). Ela desaparece quando o clique é solto.

/* Estilo normal do botão */
button {
  background-color: #2a9d8f;
  border: none;
  padding: 10px 20px;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

/* Enquanto o botão está sendo pressionado */
button:active {
  background-color: red;
  transform: scale(0.95); /* efeito de clique */
}

💡 Muito útil em botões de formulários e menus interativos.

Pseudo-classe :focus

A pseudo-classe :focus é aplicada quando um elemento recebe foco — normalmente ao clicar ou navegar com a tecla Tab. Essencial para acessibilidade.

/* Estado padrão do input */
input {
  border: 2px solid gray;
  padding: 5px;
  border-radius: 5px;
}

/* Quando o campo recebe foco */
input:focus {
  border: 3px solid blue;
  background-color: lightyellow;
  outline: none; /* remove a borda padrão do navegador */
}

💡 Importante para destacar o campo ativo em formulários.

Exemplo :focus revelando parágrafo

Ao clicar na caixa, o parágrafo escondido aparece.

div {
  outline: none;
}

div > p {
  display: none;
}

div:focus > p {
  display: block;
  background: black;
  color: white;
  padding: 5px;
}

Aqui o texto é revelado ao clicar no botão e fecha ao clicar fora do botão.

Pseudo-classe :visited

A pseudo-classe :visited aplica estilos a links que já foram visitados pelo usuário. É muito útil para diferenciar links já acessados em listas de navegação.

/* Link ainda não visitado */
a:link {
  color: green;
  text-decoration: none;
}

/* Link já visitado */
a:visited {
  color: purple;
}

💡 Após visitar o link, a cor muda para roxo.

Pseudo-classe :first-child

A pseudo-classe :first-child seleciona o primeiro filho de um elemento pai. Muito útil para destacar o primeiro item de uma lista ou tabela.

/* O primeiro parágrafo dentro de um container */
p:first-child {
  font-weight: bold;
  color: darkgreen;
}

💡 Apenas o primeiro parágrafo foi estilizado.

Pseudo-classe :last-child

A pseudo-classe :last-child seleciona o último filho de um elemento pai.

/* O último parágrafo dentro de um container */
p:last-child {
  color: red;
  font-style: italic;
}

💡 Muito usado em tabelas e listas para aplicar estilo apenas no último item.

Pseudo-classe :nth-child()

A pseudo-classe :nth-child() permite selecionar elementos de acordo com sua posição. Aceita números fixos (2, 3) ou fórmulas como 2n (pares) e 2n+1 (ímpares).

/* Destaca apenas o segundo item */
li:nth-child(2) {
  background-color: lightcoral;
}

/* Destaca itens pares */
li:nth-child(2n) {
  background-color: lightblue;
}

• Item 1
• Item 2
• Item 3
• Item 4

💡 Muito usado em tabelas para criar efeitos "zebrado".

Pseudo-classe :checked

A pseudo-classe :checked é aplicada a elementos de formulário que podem ser marcados, como checkbox, radio ou option. Ela permite alterar o estilo desses elementos ou até revelar conteúdo sem precisar de JavaScript.

/* Quando o checkbox está marcado */
input:checked + label {
  color: white;
  background: green;
  font-weight: bold;
  padding: 5px;
  border-radius: 5px;
}

💡 Ao marcar a caixa, o estilo do label muda automaticamente. Esse recurso é muito usado em botões de ativar/desativar ou menus ocultos.

Conclusão

As pseudo-classes são ferramentas poderosas no CSS, permitindo criar interações dinâmicas, estilizar elementos em estados específicos e destacar conteúdos de forma prática sem alterar o HTML.

Referências

MDN Web Docs - Pseudo-classes