review-css-pseudo-classes
Voltar à Trilha

Revisão de Pseudo-classes CSS

Pseudo-classes de Ação do Usuário

  • Definição de Pseudo-classes: Estes são palavras-chave especiais do CSS que permitem selecionar um elemento com base em seu estado ou posição específicos.
  • Pseudo-classes de Ação do Usuário: Estes são palavras-chave especiais que permitem alterar a aparência dos elementos com base nas interações do usuário, melhorando a experiência geral do usuário.
  • Pseudo-classe :active: Esta pseudo-classe permite selecionar o estado ativo de um elemento, como ao clicar em um botão.
  • Pseudo-classe :hover: Esta pseudo-classe define o estado de hover de um elemento.
  • Pseudo-classe :focus: Esta pseudo-classe aplica estilos quando um elemento ganha foco, tipicamente através da navegação por teclado ou quando um usuário clica em um campo de formulário.
  • Pseudo-classe :focus-within: Esta pseudo-classe é usada para aplicar estilos a um elemento quando ele ou qualquer um de seus descendentes está com foco.

Pseudo-classes de Entrada

  • Pseudo-classes de Input: Essas pseudo-classes são usadas para direcionar elementos HTML input com base no estado em que eles estão antes e depois da interação do usuário.
  • :enabled Pseudo-class: Esta pseudo-classe é usada para selecionar botões de formulário ou outros elementos que estão atualmente habilitados.
  • :disabled Pseudo-class: Esta pseudo-classe permite que você estilize um elemento interativo no modo desabilitado.
  • Pseudo-classe :checked: Esta pseudo-classe é usada para indicar ao usuário que está marcado.
  • Pseudo-classe :valid: Esta pseudo-classe seleciona os campos de entrada que atendem aos critérios de validação.
  • Pseudo-classe :invalid: Esta pseudo-classe seleciona os campos de entrada que não atendem aos critérios de validação.
  • Pseudo-classes :in-range e :out-of-range: Essas pseudo-classes aplicam estilos a elementos com base em se seus valores estão dentro ou fora dos limites de intervalo especificados.
  • Pseudo-classe :required: Esta pseudo-classe seleciona elementos input que possuem o atributo required. Ela indica ao usuário que ele deve preencher o campo para enviar o formulário.
  • :optional Pseudo-class: Esta pseudo-classe aplica estilos a elementos de entrada que não são obrigatórios e podem ser deixados vazios.
  • :autofill Pseudo-class: Esta pseudo-classe aplica estilos aos campos de entrada que o navegador preenche automaticamente com dados salvos.

Pseudo-classes de Localização

  • Pseudo-classes de Localização: Essas pseudo-classes são usadas para estilizar links e elementos que são alvo dentro do documento atual.
  • Pseudo-classe :any-link: Esta pseudo-classe é uma combinação das pseudo-classes :link e :visited. Portanto, ela corresponde a qualquer elemento anchor com um atributo href, independentemente de ter sido visitado ou não.
  • :link Pseudo-class: Esta pseudo-classe permite que você selecione todos os links não visitados em uma página da web. Você pode usá-la para estilizar os links de forma diferente antes que o usuário clique neles.
  • Pseudo-classe :local-link: Esta pseudo-classe seleciona links que apontam para o mesmo documento. Pode ser útil quando você quer diferenciar links internos de externos.
  • Pseudo-classe :visited: Esta pseudo-classe seleciona um link que o usuário já visitou.
  • Pseudo-classe :target: Esta pseudo-classe é usada para aplicar estilos a um elemento que é o alvo de um fragmento de URL.

Pseudo-classes Pseudo-estruturais de Árvore

  • Pseudo-classes Pseudo-estruturais de Árvore: Essas pseudo-classes permitem que você selecione e estilize elementos com base em sua posição dentro da árvore do documento.
  • Pseudo-classe :root: Esta pseudo-classe geralmente é o elemento raiz html. Ela ajuda você a direcionar o nível mais alto no documento para que possa aplicar um estilo comum a todo o documento.
  • Pseudo-classe :empty: Elementos vazios, ou seja, elementos sem filhos além de espaços em branco, também estão incluídos na árvore do documento. Por isso existe a pseudo-classe :empty para selecionar elementos vazios.
  • :nth-child(n) Pseudo-class: Esta pseudo-classe permite que você selecione elementos com base em sua posição dentro de um elemento pai.
  • Pseudo-classe :nth-last-child(n): Esta pseudo-classe permite que você selecione elementos contando a partir do final.
  • Pseudo-classe :first-child: Esta pseudo-classe seleciona o primeiro elemento dentro de um elemento pai ou do documento.
  • Pseudo-classe :last-child: Esta pseudo-classe seleciona o último elemento em um elemento pai ou no documento.
  • :only-child Pseudo-class: Esta pseudo-classe seleciona o único elemento em um elemento pai ou no documento.
  • Pseudo-classe :first-of-type: Esta pseudo-classe seleciona a primeira ocorrência de um tipo específico de elemento dentro de seu pai.
  • Pseudo-classe :last-of-type: Esta pseudo-classe seleciona a última ocorrência de um tipo específico de elemento dentro de seu pai.
  • Pseudo-classe :nth-of-type(n): Esta pseudo-classe permite selecionar um elemento específico dentro de seu pai com base em sua posição entre irmãos do mesmo tipo.
  • :only-of-type Pseudo-classe: Esta pseudo-classe seleciona um elemento se ele for o único do seu tipo dentro do seu elemento pai.

Pseudo-classes Funcionais

  • Pseudo-classes Funcionais: Pseudo-classes funcionais permitem que você selecione elementos com base em condições ou relacionamentos mais complexos. Diferente das pseudo-classes regulares que têm como alvo elementos com base em um estado (por exemplo, :hover, :focus), pseudo-classes funcionais aceitam argumentos.
  • Pseudo-classe :is(): Esta pseudo-classe recebe uma lista de seletores (ex. ol, ul) e seleciona um elemento que corresponda a um dos seletores na lista.
<link rel="stylesheet" href="styles.css" />

<p class="example">This text will change color.</p>
<p>This text will not change color.</p>
<p>This text will not change color.</p>
<p class="this-works-too">This text will change color.</p>
p:is(.example, .this-works-too) {
    color: red;
}
  • Pseudo-classe :where(): Esta pseudo-classe recebe uma lista de seletores (ex. ol, ul) e seleciona um elemento que corresponda a um dos seletores na lista. A diferença entre :is e :where é que esta última terá uma especificidade de 0.
:where(h1, h2, h3) {
    margin: 0;
    padding: 0;
}
  • Pseudo-classe :has(): Esta pseudo-classe é frequentemente chamada de seletor "parent" porque permite estilizar elementos que contêm elementos filhos especificados na lista de seletores.
article:has(h2) {
    border: 2px solid hotpink;
}
  • Pseudo-classe :not(): Esta pseudo-classe é usada para selecionar elementos que não correspondem ao seletor fornecido.
p:not(.example) {
  color: blue;
}

Pseudo-elementos

  • Pseudo-elemento ::before: Este pseudo-elemento usa a propriedade content para inserir conteúdo cosmético como ícones logo antes do elemento.
  • Pseudo-elemento ::after: Este pseudo-elemento usa a propriedade content para inserir conteúdo cosmético como ícones logo após o elemento.
  • Pseudo-elemento ::first-letter: Este pseudo-elemento seleciona a primeira letra do conteúdo de um elemento, permitindo que você a estilize.
  • Pseudo-elemento ::marker: Este pseudo-elemento permite que você selecione o marcador (bullet ou numeração) dos itens da lista para estilização.