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:
- Seletor: pode ser o básico ou combinado;
- (:) dois pontos: Indica a pseudoclasse usada;
- Pseudoclasse: modifica informações particulares dos elementos
- ({}) chaves: contém a declaração ou declarações;
- 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 atributoreadonly
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 atributoplaceholder
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 atributochecked
se aplica e que possuem um atributochecked
- Elementos
option
que possuem um atributoselected
: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 atributotype
está no estadoCheckbox
e cujo estado checkness é true - Elementos
input
cujo atributotype
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 comotrue
; - 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
Palavra-chave adicionada a um seletor que especifica um estado especial do(s) elemento(s) selecionado(s)
As pseudoclasses são dividas em grupos que são:
– Estado de exibição de elementos
– Formulário
– Linguísticas
– Localização
– Estado de recurso
– Temporais
– Estruturais em árvore
– Ação do usuário
– Funcionais