O projeto está inativo

Pseudo classes do CSS

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

29

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.
Assinatura Devmedia
Fa?a parte dessa comunidade 100% focada em programação e tenha acesso ilimitado. Nosso compromisso é tornar a sua experiência de estudo cada vez mais dinâmica e eficiente. Portanto, se você quer programar de verdade seu lugar é aqui. Junte-se a mais de...
+ 800 Mil programadores
,90* / mês
  • Séries
  • Projetos completos
  • Cursos
  • Guias de carreiras
  • DevCasts
  • Desafios
  • Artigos
  • App
  • Suporte em tempo real
A assinatura é cobrado através do seu cartão de crédito. *Tempo mínimo de assinatura: 12 meses.
Assinatura Devmedia
Faça parte dessa comunidade 100% focada em programação e tenha acesso ilimitado. Nosso compromisso é tornar a sua experiência de estudo cada vez mais dinâmica e eficiente. Portanto, se você quer programar de verdade seu lugar é aqui. Junte-se a mais de...
+ 800 Mil programadores
Conheça agora!
,90* / mês
  • Séries
  • Projetos completos
  • Cursos
  • Guias de carreiras
  • DevCasts
  • Desafios
  • Artigos
  • App
  • Suporte em tempo real
A assinatura é cobrada através do seu cartão de crédito. *Tempo mínimo de assinatura: 12 meses.
×
+1 DevUP
Acesso diário, +1 DevUP
Parabéns, você está investindo na sua carreira