Pseudo classes do CSS
Nesta documentação aplicaremos estilo baseado no estado do elemento com as pseudo classes do CSS.
Projeto já adicionado aos favoritos. Clique aqui para ver todos seus favoritos
Obrigado pela sua avaliação, deixe o seu feedback nos comentários :D
Introdução
Podemos criar regras com o CSS que somente são aplicadas se um elemento possui um determinado estado.
As pseudo-classes possuem a seguinte sintaxe e são adicionadas ao seletor da seguinte forma:
seletor:pseudo-classe { /* declaração*/ }Note acima que o seletor e a pseudo-classe são separadas por dois pontos (:).
Por exemplo, podemos dizer que um input terá a cor de fundo cinza se esse elemento estiver desabilitado da seguinte forma:
<input disabled=”disabled” />
input:disabled { background-color: gray; }Neste caso, enquanto o elemento input estiver com a propriedade :disabled habilitada, o mesmo terá a cor de fundo cinza. Quando essa propriedade for removida ou modificada de forma que seja avaliada como falsa, a regra CSS acima não será mais aplicada ao elemento.
As pseudo-classes são um recurso poderoso, que quando utilizadas em conjunto com os outros recursos do CSS, como combinadores, nos permitem criar diversos efeitos.
Por exemplo, podemos alterar a cor de fundo de um label, se o checkbox a sua frente estiver selecionado, considerando a ordem na qual os elementos foram dispostos na cadeia de elementos da página:
input:checked + label { background-color: yellow; }Além da pseudo-classe :disabled existem outras, que são aplicadas na prática no curso Pseudo classes do CSS. Aqui documentamos as principais dentre elas.