O projeto está inativo

Pseudo classes do CSS

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

53

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.

Suporte ao aluno - Tire a sua dúvida.
Inicie agora sua carreira de programador por apenas R$49,90/mês
Ainda está em dúvida? Experimente a plataforma grátis durante 7 dias. Faça um teste grátis
Conheça agora!
Benefícios
  • Suporte em tempo real
  • Certificado de autoridade
  • Exercícios para praticar
  • Estudo gamificado
  • Planos de estudo para cada carreira de programador

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários. Para saber mais sobre o uso de cookies,
consulte nossa política de privacidade. Ao continuar navegando em nosso site, você concorda com a nossa política.

Aceitar