Article image
Raja Novaes
Raja Novaes13/06/2022 22:13
Compartilhe

Resumo das pseudoclasses e pseudoelementos CSS

  • #CSS

Resumo de todas as pseudoclasses: 

  • :active - Seleciona o link ativo.
  • :checked - Seleciona cada elemento <input> marcado.
  • :disabled - Seleciona cada elemento <input> desabilitado.
  • :empty - Seleciona cada elemento <elem> que não tem filhos.
  • :enabled - Seleciona cada elemento <input> habilitado.
  • :first-child - Seleciona todos os elementos <elem> que são o primeiro filho de seu pai.
  • :first-of-type - Seleciona cada elemento <elem> que é o primeiro elemento <elem> de seu pai.
  • :focus - Seleciona o elemento <input> que tem foco.
  • :hover - Seleciona links ao passar o mouse.
  • :in-range - Seleciona elementos <input> com um valor dentro de um intervalo especificado.
  • :invalid - Seleciona todos os elementos <input> com um valor inválido.
  • :lang(language) - Seleciona cada elemento <elem> com um valor de atributo lang começando com "no idioma".
  • :last-child - Seleciona todos os elementos <elem> que são o último filho de seu pai.
  • :link - Seleciona todos os links não visitados.
  • :not(selector) - Seleciona todo elemento que não seja um elemento <elem>.
  • :nth-child(n) - Seleciona cada elemento <elem> que é o segundo filho de seu pai.
  • :nth-last-child(n) - Seleciona cada elemento <elem> que é o segundo filho de seu pai, contando a partir do último filho.
  • :nth-last-of-type(n) - Seleciona cada elemento <elem> que é o segundo elemento <elem> de seu pai, contando a partir do último filho.
  • :nth-of-type(n) - Seleciona cada elemento <elem> que é o segundo elemento <elem> de seu pai.
  • :only-of-type - Seleciona cada elemento <elem> que é o único elemento <elem> de seu pai.
  • :only-child - Seleciona cada elemento <elem> que é o único filho de seu pai.
  • :optional - Seleciona elementos <input> sem atributo "obrigatório".
  • :out-of-range - Seleciona elementos <input> com um valor fora de um intervalo especificado.
  • :read-only - Seleciona elementos <input> com um atributo "somente leitura" especificado.
  • :read-write - Seleciona elementos <input> sem atributo "somente leitura".
  • :required - Seleciona elementos <input> com um atributo "obrigatório" especificado.
  • :root - Seleciona o elemento raiz do documento.
  • :target - Seleciona o elemento # ativo atual (clicado em um URL que contém esse nome de âncora).
  • :valid - Seleciona todos os elementos <input> com um valor válido.
  • :visited - Seleciona todos os links visitados.

Resumo dos pseudo elementos

  • ::after - Inserir conteúdo após cada elemento <elem>.
  • ::before - Inserir conteúdo antes de cada elemento <elem>
  • ::first-letter - Seleciona a primeira letra de cada elemento <elem>
  • ::first-line - Seleciona a primeira linha de cada elemento <elem>
  • ::marker - Seleciona os marcadores dos itens da lista.
  • ::selection - Seleciona a parte de um elemento que é selecionado por um usuário.
Compartilhe
Comentários (2)
Jonathan Silva
Jonathan Silva - 14/06/2022 07:35

Show de bola, Raja. Parabéns.

Dayane Silva
Dayane Silva - 14/06/2022 00:35

Muito obrigada.

Esta lista vai ser muito útil, eu tinha aprendido apenas uns quatro termos entre psedoclasses e pseudoelementos.