Pseudo-classes são palavras-chave especiais do CSS que permitem selecionar um elemento com base no seu estado ou posição específica. O estado ou posição do elemento pode incluir:

• Quando está ativo.
• Quando está sendo sobrevoado por um mouse.
• Quando é o primeiro filho de um pai.
• Quando é o último filho de um pai.
• Quando um link foi visitado.
• Quando está desativado.

Para usar uma pseudo-classe, você a adiciona ao seletor usando dois-pontos (:) seguidos pelo nome da pseudo-classe:

selector:pseudo-class {
  /* CSS properties */
}

Vamos ver como você pode usar uma pseudo-classe para representar cada um dos estados e posições que já mencionamos. A pseudo-classe :active permite que você selecione o estado ativo de um elemento, como ao clicar em um botão:

<link rel="stylesheet" href="styles.css" />
<button>Example Button</button>

button:active {
  background: greenyellow;
}

A pseudo-classe :hover define o estado de foco do mouse de um elemento. Um exemplo seria passar o mouse sobre um botão ou link:

<link rel="stylesheet" href="styles.css" />
<a href="#">Hover over me!</a>

a:hover {
  text-decoration: none;
  color: white;
  background: crimson;
}

A pseudo-classe :first-child seleciona um elemento que é o primeiro filho do seu elemento pai. Aqui está um exemplo de como direcionar o primeiro elemento p dentro de um contêiner div:

<link rel="stylesheet" href="styles.css" />
<div class="container">
  <p>first child</p>
  <p>second child</p>
  <p>third child</p>
  <p>last child</p>
</div>

.container p:first-child {
  background: lightcoral;
  padding: 0.4rem;
}

O primeiro elemento de parágrafo naquele div receberá a cor de fundo lightcoral e o padding de 0.4rem em todos os quatro lados. A pseudo-classe :last-child seleciona o último elemento que é filho do seu pai. Aqui está um exemplo de como direcionar o último elemento p dentro do elemento contêiner div:

<link rel="stylesheet" href="styles.css" />
<div class="container">
  <p>first child</p>
  <p>second child</p>
  <p>third child</p>
  <p>last child</p>
</div>

.container p:last-child {
  background: lightcoral;
  padding: 0.4rem;
}

A pseudo-classe :visited permite que você estilize um link que o usuário já visitou:

<link rel="stylesheet" href="styles.css" />
<a href="https://www.example.com" target="_blank">Visit Example.com</a>

a:visited {
  color: purple;
}

A pseudo-classe :disabled permite que você estilize um elemento interativo no modo desabilitado:

<link rel="stylesheet" href="styles.css" />
<button disabled>Disabled Button</button>

button:disabled {
  background-color: lightgray;  
}

Como você pode ver, pseudo-classes permitem que você estilize elementos com base em interações do usuário, como passar o mouse ou visitar um link. Isso faz com que seu site pareça mais interativo. Além das pseudo-classes já mencionadas, existem outras como:

• :focus
• :first-of-type
• :last-of-type
• :nth-of-type
• :modal
• :enabled
• :checked
• :required e mais.