O projeto está inativo

Pseudo classes do CSS

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

112

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.

Chega de perder tempo!
Comece hoje mesmo a programar de verdade
Apenas 12x de R$ 54,90
Por que a DevMedia?
  • Didática focada no iniciante
  • Aprenda construindo projetos reais
  • Domine as tecnologias mais usadas no mercado
  • Professores online o tempo todo
  • + de 8000 exercícios gamificados
  • + de 100 mil alunos formados

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários,
consulte nossa política de privacidade.

Aceitar