Veja Pseudoclasse de uma forma fácil

Uma pseudoclasse CSS é uma palavra-chave adicionada a um seletor que especifica um estado especial do(s) elemento(s) selecionado(s). Por exemplo, a pseudoclasse :hover pode ser usada para selecionar um botão quando o ponteiro de um usuário passa sobre o botão e esse botão selecionado pode ser estilizado.

Por essa simples definição você percebe que esse seletor vai deixar a sua estilização mais bonita e levar para outro nível. Vamos aos detalhes!

Sintaxe

Seletor:PseudoClasse {
    Declaração; = Propriedade: valor;
}

Decompondo a sintaxe:

1. Seletor: pode ser o básico ou combinado;
2. (:) dois pontos: Indica a pseudoclasse usada;
3. Pseudoclasse: modifica informações particulares dos elementos
4. ({}) chaves: contém a declaração ou declarações;
5. Declaração: com mostrado é propriedade + valor + (;) ponto e vírgula;

Agora que você já tem a estrutura para montar e usar as pseudoclasses vamos passar por cada um deles. Vou dividir por seção para ficar mais fácil o entendimento e a pesquisa na hora de estudar.

Veja também:

Estrutura Básica Do HTML
Introdução rápida sobre Python
Introdução rápida sobre JavaScript

Pseudoclasses de estado de exibição de elementos

Essas pseudoclasses permitem a seleção de elementos com base em seus estados de exibição.

:fullscreen

Corresponde a um elemento que está atualmente no modo de tela cheia. Se vários elementos estiverem em tela-cheia, isto seleciona todos.

:modal

Corresponde a um elemento que está em um estado no qual exclui todas as interações com elementos fora dele até que a interação seja dispensada. Vários elementos podem ser selecionados pela pseudoclasse :modal ao mesmo tempo, mas apenas um deles estará ativo e capaz de receber entrada.

:picture-in-picture

Corresponde a um elemento que está atualmente no modo picture-in-picture. permite configurar suas folhas de estilo para ajustar automaticamente o tamanho, estilo ou layout do conteúdo quando um vídeo alterna entre os modos de apresentação picture-in-picture e tradicional.

Mapa Mental Pseudoclasses de estado de exibição de elementos

Pseudoclasses de formulário

Essas pseudoclasses se reportam a elementos de formulário e permitem a seleção de elementos com base em atributos HTML e no estado em que o campo está antes e depois da interação.

:autofill

Corresponde quando um <input> foi preenchido automaticamente pelo navegador.

As pseudoclasses :autofill e :-webkit-autofill devem corresponder aos elementos de entrada que foram preenchidos automaticamente pelo agente do usuário. Essas pseudoclasses devem parar de corresponder se o usuário editar o campo de preenchimento automático.

:enabled

Representa um elemento da interface do usuário que está em um estado habilitado.

Observe que os elementos que estão em amarelo são os únicos que estão habilitados, logo são os que foram selecionados pela pseudoclasse para estilização. A pseudoclasse :enabled deve corresponder a qualquer button, input, select, textarea, optgroup, option, fieldset elemento ou elemento personalizado associado ao formulário que não está realmente desabilitado.

:disabled

Representa um elemento da interface do usuário que está em um estado desabilitado.

Ao contrário da pseudoclasse acima essa seleciona apenas os elementos que estão desabilitados.

A pseudoclasse :disabled deve corresponder a qualquer elemento que esteja realmente desabilitado.

:read-only

Representa qualquer elemento que não pode ser alterado pelo usuário. Por exemplo: input ou textarea.

A pseudoclasse :read-only deve corresponder a todos os outros elementos HTML.

:read-write

Representa qualquer elemento editável pelo usuário. Por exemplo: input ou textarea.

As partes que estão com marcada com laranja são as que o usuário pode modificar.

A pseudoclasse :read-write deve corresponder a qualquer elemento que se enquadre em uma das seguintes categorias, que para fins de Seletores são considerados alteráveis ​​pelo usuário:

• elementos input aos quais o atributo readonly se aplica e que são mutáveis ​​(ou seja, que não têm o atributo readonly especificado e que não estão desabilitados)
• elementos textarea que não possuem um atributo readonly e que não estão desabilitados
• elementos que estão editando hosts ou editáveis ​​e não são elementos input nem elementos textarea

:placeholder-shown

Corresponde a um elemento de entrada que está exibindo um texto de espaço reservado. Por exemplo, ele corresponderá ao atributo placeholder nos elementos <input> e <textarea>.

O elemento que tem o placeholder que foi selecionado foi aquele que contém caixa de texto para o usuário digitar. Observe ainda que o terceiro input tem um placeholder porém não foi formado com a cor, porque ele não é do tipo texto. 

A pseudoclasse :placeholder-shown deve corresponder a qualquer elemento que se enquadre em uma das seguintes categorias:

• Elementos input que possuem um atributo placeholder cujo valor está sendo apresentado ao usuário no momento.
• Elementos textarea que possuem um atributo placeholder cujo valor está sendo apresentado ao usuário no momento.

:default

Corresponde a um ou mais elementos de interface do usuário que são o padrão entre um conjunto de elementos. Em outras palavras :default seleciona elementos de formulário que são o padrão em um grupo de elementos relacionados.

A pseudoclasse :default deve corresponder a qualquer elemento que caia em uma das seguintes categorias:

• Elemento button que são botões padrão do proprietário do formulário.
• Elementos input aos quais o atributo checked se aplica e que possuem um atributo checked
• Elementos option que possuem um atributo selected

:checked

Corresponde quando elementos como caixas de seleção e botões de opção são ativados. Ou seja seleciona os elemento com atributo type=”radio” ou type=”chackbox”.

categorias:

• Elementos input cujo atributo type está no estado Checkbox e cujo estado checkness é true
• Elementos input cujo atributo type está no estado Radio Button e cujo estado checkness é true
• Elementos option cuja seletividade é verdadeira

:indeterminate

Corresponde aos elementos da interface do usuário quando eles estão em um estado indeterminado.

Em outras palavras, representa qualquer elemento de formulário cujo estado seja indeterminado, como caixas de seleção que têm seu atributo HTML indeterminado definido como true, botões de opção que são membros de um grupo no qual todos os botões de opção estão desmarcados e <progress> indeterminado elementos.

A pseudo-classe :indeterminate deve corresponder a qualquer elemento que caia em uma das seguintes categorias

• Elementos input cujo atributo type está no estado Checkbox e cujo atributo IDL indeterminado é definido como true;
• Elementos input cujo atributo type está no estado Radio Button e cujo grupo de radio button não contém elementos de entrada cujo estado checkness é true.

:valid

representa qualquer elemento <input> ou outro <form> cujo conteúdo seja validado com sucesso. Por exemplo, um elemento de entrada com o tipo ‘email’ que contém um endereço de e-mail validamente formado ou um valor vazio se o controle não for necessário.

A pseudo-classe :valid deve corresponder a qualquer elemento que se enquadre em uma das seguintes categorias:

• elementos que são candidatos para validação de restrição e que satisfazem suas restrições
• elementos form que não são o proprietário do formulário de quaisquer elementos que são candidatos para validação de restrição, mas não satisfazem suas restrições
• elementos fieldset que não possuem elementos descendentes que são candidatos para validação de restrição, mas não satisfazem suas restrições

:invalid

Corresponde a um elemento com conteúdo inválido. Por exemplo, um elemento de entrada com o tipo ‘email’ com um nome inserido.

 A pseudoclasse CSS :invalid representa qualquer elemento <form>, <fieldset>, <input> ou outro <form> cujo conteúdo não seja validado.

A pseudo-classe :invalid deve corresponder a qualquer elemento que se enquadre em uma das seguintes categorias:

• elementos que são candidatos para validação de restrição, mas que não satisfazem suas restrições
• elementos form que são o proprietário do formulário de um ou mais elementos que são candidatos para validação de restrição, mas não satisfazem suas restrições
• elementos fieldset que possuem um ou mais elementos descendentes que são candidatos para validação de restrição, mas não satisfazem suas restrições

:in-range

Aplica-se a elementos com limitações de alcance. Por exemplo, um controle deslizante quando o valor selecionado está no intervalo permitido.

A pseudoclasse :in-range deve corresponder a todos os elementos que são candidatos à validação de restrição, têm limitações de alcance e que não sofrem de estouro nem de estouro.

:out-of-range

Aplica-se a elementos com limitações de alcance. Por exemplo, um controle deslizante quando o valor selecionado está fora do intervalo permitido.

A pseudoclasse CSS :out-of-range representa um elemento <input> cujo valor atual está fora dos limites de intervalo especificados pelos atributos min e max.

A pseudoclasse :out-of-range deve corresponder a todos os elementos que são candidatos para validação de restrição, têm limitações de alcance e que sofrem de um estouro.

:required

Corresponde quando um elemento de formulário é necessário. A pseudo-classe CSS :required representa qualquer elemento <input>, <select> ou <textarea> que tenha o atributo required definido nele

A pseudoclasse :required deve corresponder a qualquer elemento que caia em uma das seguintes categorias:

• elementos input aos quais o atributo obrigatório se aplica e que não são obrigatórios
• elementos select que não possuem um atributo obrigatório
• elementos textarea que não possuem um atributo obrigatório

:optional

Corresponde quando um elemento de formulário é opcional. A pseudoclasse CSS :opcional representa qualquer elemento <input>, <select> ou <textarea> que não tenha o atributo obrigatório definido nele.

A pseudo-classe :opcional deve corresponder a qualquer elemento que se enquadre em uma das seguintes categorias:

• elementos input aos quais o atributo obrigatório se aplica e que não são obrigatórios
• elementos select que não possuem um atributo obrigatório
• elementos textarea que não possuem um atributo obrigatório

:user-invalid

Representa um elemento com entrada incorreta, mas somente quando o usuário interagiu com ele. Em outras palavras representa qualquer elemento de formulário validado cujo valor não é válido com base em suas restrições de validação, após o usuário ter interagido com ele.

Mapa Mental das pseudoclasse de formulário

Pseudoclasses linguísticas

Essas pseudoclasses refletem o idioma do documento e permitem a seleção de elementos com base no idioma ou na direção do script.

:dir()

A pseudoclasse de direcionalidade seleciona um elemento com base em sua direcionalidade conforme determinado pelo idioma do documento.

A pseudo-classe :dir() usa apenas o valor semântico da direcionalidade, ou seja, aquele definido no próprio documento.

Ele não leva em conta a direcionalidade do estilo, ou seja, a direcionalidade definida pelas propriedades CSS, como direção.

Parâmetros

ltr – Segmente elementos da esquerda para a direita.

rtl – Segmente elementos da direita para a esquerda.

A pseudoclasse :dir(ltr) deve corresponder a todos os elementos cuja direcionalidade é ‘ltr’.

A pseudoclasse :dir(rtl) deve corresponder a todos os elementos cuja direcionalidade é ‘rtl’.

:lang()

Selecione um elemento com base em seu idioma de conteúdo.

Parâmetro

<código de idioma>

Um <string> representando o idioma que você deseja segmentar. Os valores aceitáveis ​​são especificados na especificação HTML.

Veja o primeiro artigo do Tutorial: Introdução rápida sobre CSS

Mapa Mental das Pseudoclasses linguísticas

Pseudoclasses de localização

Essas pseudoclasses estão relacionadas a links e a elementos direcionados no documento atual.

:any-link

Corresponde a um elemento se o elemento corresponder a :link ou :visited.

O seletor de pseudoclasse CSS :any-link representa um elemento que atua como a âncora de origem de um hiperlink, independentemente de ter sido visitado.

Em outras palavras, ele corresponde a cada elemento <a> ou <area> que possui um atributo href. Assim, ele corresponde a todos os elementos que correspondem a :link ou :visited.

:link

Corresponde a links que ainda não foram visitados.

:visited

Corresponde aos links que foram visitados.

:local-link

Corresponde à links cujo URL absoluto é igual ao URL de destino. Por exemplo, links de âncora para a mesma página.

:target

Corresponde ao elemento que é o destino da URL do documento. Ele representa um elemento único (o elemento de destino) com um id correspondente ao fragmento da URL.

Para os propósitos da pseudoclasse CSS :target, os elementos alvo do Documento são uma lista contendo o elemento alvo do Documento, se não for nulo, ou não contendo nenhum elemento.

Mapa Mental das pseudoclasses de localização

Pseudoclasses de estado de recurso

Essas pseudoclasses se aplicam a mídia que é capaz de estar em um estado em que seria descrita como sendo reproduzida, como um vídeo.

:playing

Representa um elemento de mídia capaz de ser reproduzido quando esse elemento está sendo reproduzido.

:paused

Representa um elemento de mídia que pode ser reproduzido quando esse elemento é pausado.

Mapa Mental das Pseudoclasses de estado de recurso

Pseudoclasses temporais

Essas pseudoclasses se aplicam ao visualizar algo que tenha tempo, como uma faixa de legenda WebVTT.

:current

Representa o elemento ou ancestral do elemento que está sendo exibido.

:past

Representa um elemento que ocorre inteiramente antes do elemento :current.

:future

Representa um elemento que ocorre inteiramente após o elemento :current.

Mapa Mental das pseudoclasses temporais

Pseudoclasses estruturais em árvore

Essas pseudoclasses estão relacionadas à localização de um elemento na árvore do documento.

:root

Representa um elemento que é a raiz do documento. Em HTML, geralmente é o elemento <html>.

:empty

Representa um elemento sem filhos além de caracteres de espaço em branco.

:nth-child

Usa a notação An+B para selecionar elementos de uma lista de elementos irmãos.

:nth-last-child

Usa a notação An+B para selecionar elementos de uma lista de elementos irmãos, contando para trás a partir do final da lista.

:first-child

Corresponde a um elemento que é o primeiro de seus irmãos.

:last-child

Corresponde a um elemento que é o último de seus irmãos.

:only-child

Corresponde a um elemento que não tem irmãos. Por exemplo, um item de lista sem outros itens de lista nessa lista.

:nth-of-type

Usa a notação An+B para selecionar elementos de uma lista de elementos irmãos que correspondem a um determinado tipo de uma lista de elementos irmãos.

:nth-last-of-type

Usa a notação An+B para selecionar elementos de uma lista de elementos irmãos que correspondem a um determinado tipo de uma lista de elementos irmãos contando de trás para frente a partir do final da lista.

:first-of-type

Corresponde a um elemento que é o primeiro de seus irmãos e corresponde a um determinado seletor de tipo.

:last-of-type

Corresponde a um elemento que é o último de seus irmãos e também corresponde a um determinado seletor de tipo.

:only-of-type

Corresponde a um elemento que não tem irmãos do seletor de tipo escolhido.

Mapa Mental das pseudoclasses estruturais em árvore

Pseudoclasses de ação do usuário

Essas pseudoclasses requerem alguma interação do usuário para serem aplicadas, como manter o ponteiro do mouse sobre um elemento.

:hover

Corresponde quando um usuário designa um item com um dispositivo apontador, como manter o ponteiro do mouse sobre o item.

Quando o curso do mouse estiver em cima do botão ele ficará com o fundo rosa.

:active

Corresponde quando um item está sendo ativado pelo usuário. Por exemplo, quando o item é clicado.

Quando click no botão ele vai ficar com uma sobra ao redor.

:focus

Corresponde quando um elemento tem foco. A pseudoclasse CSS :focus representa um elemento (como uma entrada de formulário) que recebeu foco.

Geralmente é acionado quando o usuário clica ou toca em um elemento ou o seleciona com a tecla Tab do teclado.

:focus-visible

Corresponde quando um elemento tem foco e o agente do usuário identifica que o elemento deve ser visivelmente focado.

Este seletor é útil para fornecer um indicador de foco diferente com base na modalidade de entrada do usuário (mouse vs. teclado).

:focus-within

Corresponde a um elemento ao qual :focus se aplica, mais qualquer elemento que tenha um descendente ao qual :focus se aplica.

Mapa Mental das Pseudoclasses de ação do usuário

Pseudoclasses funcionais

Essas pseudo-classes aceitam uma lista de seletores como parâmetro.

:is()

A pseudoclasse matches-any corresponde a qualquer elemento que corresponda a qualquer um dos seletores na lista fornecida.

A função de pseudoclasse CSS :is() recebe uma lista de seletores como argumento e seleciona qualquer elemento que possa ser selecionado por um dos seletores dessa lista. Isso é útil para escrever seletores grandes em uma forma mais compacta.

Pseudo-elementos não são válidos na lista de seletores para :is().

:not()

A pseudoclasse negation, ou matches-none, representa qualquer elemento que não seja representado por seu argumento.

A pseudoclasse :not() tem várias peculiaridades, truques e resultados inesperados que em outro momento será apresentado.

:where()

A pseudoclasse de ajuste de especificidade corresponde a qualquer elemento que corresponda a qualquer um dos seletores na lista fornecida sem adicionar nenhum peso de especificidade.

Em outras palavras, A função de pseudoclasse CSS :where() recebe uma lista de seletores como argumento e seleciona qualquer elemento que possa ser selecionado por um dos seletores dessa lista.

:has()

O seletor CSS :has() ajuda você a selecionar elementos que contêm elementos que correspondem ao seletor que você passa para a função :has().

É essencialmente um seletor “pai”, embora muito mais útil do que apenas isso. Por exemplo, imagine poder selecionar todos os <div>s, mas apenas quando eles contêm um <p>. É o que podemos fazer:

Mapa Mental das Pseudoclasses funcionais

Conclusão

Vimos o assunto das pseudoclasses e agora podemos deixar o nosso código bem mais bonito e fácil de ler. Assim o próximo passo é conhecer os pseudo-elemento para aumentar o seu leque de conhecimento e oportunidades.

Fica à vontade de reler o conteúdo porque é muito grande, mas você pode ir consumindo o assunto ao poucos. Lembre-se esse artigo foi feito para ajudar com os seus estudos então use esse artigo como consulta.

Perguntas frequentes