Pseudo-classes em CSS

Pseudo-classes são um tipo de seletor CSS que permite que você estilize um elemento com base em seu estado ou contexto. Elas são uma maneira poderosa de adicionar efeitos visuais ou comportamentos específicos a seus elementos HTML.

Fundamentos

A sintaxe de uma pseudo-classe é a seguinte:

elemento:pseudo-classe {
  propriedades:valores;
}

Por exemplo, o seguinte código irá aplicar uma cor de fundo vermelha a todos os elementos button quando o mouse do usuário estiver sobre eles:

button:hover {
  background-color: red;
}

Exemplos de utilização

Aqui estão alguns exemplos de como usar pseudo-classes:

Aplicar um estilo de destaque quando o mouse estiver sobre um botão:

button:hover {
  background-color: #000;
  color: #fff;
}

Aplicar um estilo de foco quando o usuário clicar em um campo de texto:

input:focus {
  border: 2px solid #000;
  outline: none;
}

Aplicar um estilo de seleção quando um checkbox estiver marcado:

input[type="checkbox"]:checked {
  background-color: #000;
  color: #fff;
}

Quando utilizar cada pseudo-classe

A escolha da pseudo-classe certa depende do efeito que você deseja criar. Aqui estão algumas diretrizes gerais:

:hover: Use para adicionar um efeito visual quando o mouse do usuário está sobre um elemento.
:focus: Use para adicionar um efeito visual quando o elemento tem o foco do teclado.
:active: Use para adicionar um efeito visual quando o elemento está sendo clicado.
:checked: Use para adicionar um efeito visual quando o elemento está marcado.
:disabled: Use para adicionar um efeito visual quando o elemento está desabilitado.
:first-child: Use para estilizar o primeiro filho de um elemento.
:last-child: Use para estilizar o último filho de um elemento.
:nth-child(n): Use para estilizar um filho específico de um elemento.
:nth-of-type(n): Use para estilizar um elemento específico de um tipo específico.
:only-child: Use para estilizar o único filho de um elemento.
:empty: Use para estilizar um elemento sem filhos.
:link: Use para estilizar um link que não foi visitado.
:visited: Use para estilizar um link que foi visitado.
:target: Use para estilizar o elemento que é o alvo de um link ou âncora.
:lang(l): Use para estilizar um elemento com o idioma especificado.
:not(s): Use para estilizar todos os elementos que não correspondem

Exemplos sobre alguns pseudo-classes

Pseudo-class :not(s)

A pseudo-classe :not(s) é uma negação, ou seja, ela seleciona todos os elementos que não correspondem ao seletor fornecido. Por exemplo, o seguinte código irá selecionar todos os elementos que não são botões:

button:not(.special-button) {
  background-color: #fff;
  color: #000;
}

Neste exemplo, o seletor .special-button é usado para selecionar um botão específico. O :not(s) é usado para negar esse seletor, selecionando todos os botões que não têm a classe special-button.

div:not(:first-child) {
  background-color: #ccc;
}

Este código irá selecionar todos os elementos div que não são o primeiro filho de um elemento.

Pseudo-class :first-child

A pseudo-class :first-child seleciona o primeiro filho de um elemento. Por exemplo, o seguinte código irá selecionar todos os elementos p que são o primeiro filho de um elemento div:

div p:first-child {
  background-color: red;
}

Este código irá aplicar uma cor de fundo vermelha ao primeiro parágrafo em cada elemento div.

Pseudo-class :last-child

A pseudo-class :last-child seleciona o último filho de um elemento. Por exemplo, o seguinte código irá selecionar todos os elementos li que são o último filho de um elemento ul:

ul li:last-child {
  background-color: blue;
}

Este código irá aplicar uma cor de fundo azul ao último item em cada lista ul.

Pseudo-class :nth-child(n)

A pseudo-class :nth-child(n) seleciona o n-ésimo filho de um elemento. Por exemplo, o seguinte código irá selecionar todos os elementos li que são o segundo filho de um elemento ul:

ul li:nth-child(2) {
  background-color: green;
}

Este código irá aplicar uma cor de fundo verde ao segundo item em cada lista ul.