Pseudo-classes
Uma pseudo-classe CSS é uma palavra-chave adicionada a seletores que especifica um estado especial do elemento selecionado. Por exemplo, :hover
pode ser usado para alterar a cor de um botão quando o usuário passar o cursor sobre ele.
/*Qualquer botão sobre o qual o ponteiro do usuário esteja passando sobre*/
button:hover {
color: blue;
}
Pseudo-classes permitem que você aplique um estilo a um elemento não apenas em relação ao conteúdo da árvore do documento, mas também em relação a fatores externos como o histórico de navegação (:visited
, por exemplo), o status do seu conteúdo (como :checked
em certos elementos de um formulário), ou a posição do mouse (como :hover
, que permite saber se o mouse está sobre um elemento ou não).
Nota: Diferentemente das pseudo-classes, pseudo-elementos podem ser usados para estilizar uma parte específica de um elemento.
Sintaxe
seletor:pseudo-classe { propriedade: valor; }
Assim como nas classes regulares, você pode encadear juntas quantas pseudo-classes você desejar em um seletor.
Índice de pseudo-classes padrão
:active
:checked
:default
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited
Especificações
Specification |
---|
HTML Standard # pseudo-classes |
Selectors Level 4 |
CSS Basic User Interface Module Level 4 |