Manual de Pseudo-classe CSS

Pseudo-classes CSS

As pseudo-classes são usadas para definir estados especiais dos elementos.

Por exemplo, pode ser usado para:

  • Defina estilos quando o usuário passar o mouse sobre o elemento.
  • Defina estilos diferentes para links visitados e não visitados.
  • Defina estilos quando o elemento obter foco.
  • Defina estilos para elementos de formulário válidos/inválidos/obrigatórios/opicionais.

A tabela a seguir mostra diferentes pseudo-classes no CSS:

Pseudo-classes Exemplo Descrição do exemplo
:active a:active Selecione o link ativo.
:any-link a:anylink Selecione todos os elementos <a> ou <area> com atributo href.
:auto-fill input:autofill Selecione todos os elementos <input> preenchidos automaticamente pelo navegador.
:checked option:checked Corresponde a todos os elementos <input> ou <option> selecionados.
:default input:default Selecione o elemento de formulário padrão em um grupo de elementos relacionados.
:defined :defined Selecione todos os elementos definidos (elementos padrão ou personalizados).
:dir() :dir(rtl) Selecione os elementos com direção de texto especificada.
:disabled option:disabled Selecione todos os elementos desativados, frequentemente usados em elementos de formulário.
:empty div:empty Selecione todos os elementos sem elementos filhos (inclusive os nós de texto).
:enabled input:enabled Escolha todos os elementos ativados, frequentemente usados em elementos de formulário.
:first @page :first Representa a primeira página do documento impresso (usado juntamente com a regra @page).
:first-child p:first-child Escolha o elemento que é o primeiro filho do elemento pai (dentro de um grupo de irmãos).
:first-of-type li:first-of-type Escolha o primeiro elemento de um grupo de irmãos de um tipo específico.
:focus select:focus Escolha o elemento que obteve o foco, frequentemente usado em elementos de formulário.
:focus-visible button:focus-visible Escolha o elemento que obteve o foco (aplicado apenas quando o foco é obtido através do teclado e não do mouse).
:focus-within form:focus-within Corresponde ao elemento ou a qualquer descendente do elemento que obtém o foco.
:fullscreen :fullscreen Escolha o elemento que está no modo de tela cheia.
:has() h2:has(+p) Escolha o elemento <h2> que está imediatamente após o elemento <p> e aplique estilos ao <h2>.
:hover a:hover Escolha o elemento sobre o qual o mouse está em cima.
:in-range input:in-range Escolha elementos <input> cujos valores estão dentro do intervalo especificado.
:indeterminate input:indeterminate Escolha elementos de formulário em estado indeterminado.
:invalid input:invalid Escolha elementos de formulário inválidos.
:is() :is(ul, ol) Selecione todos os elementos <ul> e <ol>.
:lang() p:lang(it) Escolha o elemento <p> cujo atributo lang é "it" (italiano).
:last-child li:last-child Escolha o elemento <li> que é o último filho do elemento pai.
:last-of-type p:last-of-type Escolha o elemento <p> que é o último elemento <p> do elemento pai.
:left @page :left Representa todas as páginas laterais esquerdas do documento impresso (usado juntamente com a regra @page).
:link a:link Escolha todos os links não visitados.
:modal :modal Escolha o elemento que está em estado modal.
:not() :not(p) Escolha todos os elementos que não são elementos <p>.
:nth-child() p:nth-child(2) Escolha o elemento <p> que é o segundo filho do elemento pai.
:nth-last-child() p:nth-last-child(2) Selecione o elemento <p> que é o segundo filho mais recente do pai.
:nth-last-of-type() p:nth-last-of-type(2) Selecione o elemento <p> que é o segundo filho mais recente do pai.
:nth-of-type() p:nth-of-type(2) Selecione o elemento <p> que é o segundo <p> do pai.
:only-child p:only-child Selecione o elemento <p> que é o único filho do pai.
:only-of-type p:only-of-type Selecione o elemento <p> que é a única <p> do pai.
:optional textarea:optional Selecione os elementos <input>, <select> ou <textarea> sem a propriedade required.
:out-of-range input:out-of-range Selecione os elementos <input> cujos valores estão fora do intervalo especificado.
:placeholder-shown input:placeholder-shown Selecione os elementos <input> ou <textarea> que mostram o texto de marcador de posição atual.
:popover-open :popover-open Selecione o elemento que está em estado de exibição pop-up.
:read-only input:read-only Selecione os elementos de entrada com a propriedade readonly.
:read-write input:read-write Selecione os elementos de entrada editáveis.
:required input:required Selecione os elementos de entrada com a propriedade required.
:right @page :right Representa todas as páginas laterais da impressão do documento (usado juntamente com a regra @page).
:root :root Selecione o elemento raiz do documento.
:scope :scope Selecione o elemento que serve como ponto de referência ou faixa para o seletor.
:state() :state() Selecione o elemento personalizado com um estado personalizado especificado.
:target :target Selecione o elemento alvo ativo.
:user-invalid :user-invalid Selecione os elementos de formulário com valores inválidos (após a interação do usuário).
:user-valid :user-valid Selecione os elementos de formulário com valores válidos (após a interação do usuário).
:valid input:valid Selecione todos os elementos de entrada com valores válidos.
:visited a:visited Selecione todos os links visitados.
:where() :where(ol, ul) Selecione todos os elementos <ul> e <ol>.