Pseudo-Classes
October 11, 2023 · View on GitHub
Pseudo-classes são referências utilizadas através de sufixos nos seletores, para definir um estado especial de um elemento. Este recurso é muito importante para aplicar estilo para situações específicas de maneira performática, evitando seletores extensos em cascata ou aplicação lógica através do Javascript para manipulação dinâmica.
Já vimos algumas pseudo-classes nas seções anteriores como o :hover, sua sintaxe base seria:
seletor:pseudo-classe {
propriedade: valor;
}
Existem múltiplas pseudo-classes, cada uma com aplicação específica para alterar o estilo da página em situações e eventos de fluxo diferentes.
Lista de pseudo-classes de acordo com a MDN complementada por uma pequena descrição utilizada como referência:
| Valor | Descrição |
|---|---|
:active | Utilizada em links e botões, define se um elemento alvo está ativo pela navegação do usuário |
:checked | Quando um elemento de formulário (radio, checkbox e option) estão ativos |
:default | Elemento(s) padrão(ões) de um formulário |
:dir() | Relacionado a direção do conteúdo |
:disabled | Quando está desabilitado |
:empty | Quando está vazio |
:enabled | Quando está habilitado |
:first | Primeiro elemento |
:first-child | Primeiro elemento filho |
:first-of-type | Primeiro elemento pelo tipo |
:fullscreen | Elementos atuais em tela cheia |
:focus | Aplicado quando o elemento recebe foco |
:hover | Quando está com o mouse em cima |
:indeterminate | Quando está indeterminado (funciona com formulários) |
:in-range | Aplicado aos elementos <input> os quais o valor atual está compreendido no intervalo dos atributos min e max do mesmo |
:invalid | Aplicado à elementos inválidos de um formulário |
:lang() | Elementos por língua |
:last-child | Último filho |
:last-of-type | Último por tipo/grupo de elementos |
:left | Utilizado a esquerda em conjunto com o @page |
:link | Quando o elemento é um link |
:not() | Quando não tem o requisito do parâmetro |
:nth-child() | Elementos baseado em posição, exemplo: :nth-child(1n) |
:nth-last-child() | Elemento baseado no último filho |
:nth-last-of-type() | Elemento baseado no último tipo/grupo de elementos |
:nth-of-type() | Elemento por tipo/grupo de elementos |
:only-child | Elementos que são necessariamente filhos |
:only-of-type | Elementos que são especificados no tipo/grupo de elementos |
:optional | Elementos de um formulário que são opcionais |
:out-of-range | Aplicado aos elementos <input> os quais o valor atual não está compreendido no intervalo dos atributos min e max do mesmo |
:read-only | Relacionado ao input e textarea, quando não está editável |
:read-write | Relacionado ao input e textarea, quando está editável |
:required | Elemento de um formulário requirido |
:right | Direita relacionado ao @page |
:root | Elemento base <html> |
:scope | Elemento que está no escopo |
:target | Elemento selecionado através de um identificador único compreendido na URL |
:valid | Elemento de um formulário válido |
:visited | Link que já foi visitado |
Relaxa, não precisa decorar todos os pseudo-elementos, mas é bom ter a noção dos elementos existentes para facilitar sua vida futuramente.
Próxima página → Pseudo-seletores