Série da semana: Receitas caseiras para teste unitário

Veja mais
O projeto está inativo

Pseudo classes do CSS

Nesta documentação aplicaremos estilo baseado no estado do elemento com as pseudo classes do CSS.

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.

Descubra mais sobre CSS
Suporte ao aluno - Deixe a sua dúvida.
Achou 12 meses muito tempo?

Programação muda todo dia e cada novidade nos obriga a rever tudo que já sabíamos. Só um estudo contínuo nos leva ao sucesso.

Apenas 3,5% dos nossos assinantes querem cancelar antes dos 12 meses

O que nossos clientes dizem:

"Excelente trabalho. É assim que a gente vê que o investimento vale a pena. Parabéns!"

- Danniery Alves -
O que nossos clientes dizem:

"Prá lá de bom... Está ótimo: com clareza, didática, conhecimento de causa e uma boa dose de humor. "Persistência" é o segredo."

- Paulo Costa -
O que nossos clientes dizem:

"DevMedia ensina mais do que qualquer faculdade!!!"

- Mauricio Hartmann -