Imagem do artigo Pseudoclasses e pseudoelementos em CSS

13. Pseudoclasses e pseudoelementos em CSS

Página 59 | Ouça em áudio

Pseudoclasses e pseudoelementos são uma parte essencial do CSS, pois permitem que os desenvolvedores estilizem elementos de maneira dinâmica e específica. Compreender esses conceitos é vital para se tornar um desenvolvedor front-end eficaz.

Pseudoclasses

Pseudoclasses são palavras-chave adicionadas a seletores que especificam um estado especial do elemento selecionado. Por exemplo, um elemento pode mudar de estado quando um usuário passa o mouse sobre ele, quando é o primeiro filho de seu pai, quando está vazio e assim por diante.

Algumas das pseudoclasses mais comuns incluem:

  • :hover - seleciona um elemento quando o usuário passa o mouse sobre ele.
  • :focus - seleciona um elemento quando ele está em foco (por exemplo, quando um usuário clica em um campo de entrada de texto).
  • :active - seleciona um elemento no momento em que é ativado pelo usuário.
  • :visited - seleciona links que o usuário já visitou.
  • :first-child - seleciona o primeiro filho de um elemento.
  • :last-child - seleciona o último filho de um elemento.
  • :nth-child(n) - seleciona o enésimo filho de um elemento.
  • :empty - seleciona elementos que não têm filhos (incluindo nós de texto).

Pseudoelementos

Pseudoelementos, por outro lado, são palavras-chave adicionadas a seletores que permitem que você estilize uma parte específica de um elemento selecionado. Por exemplo, você pode querer estilizar a primeira letra ou a primeira linha de um texto, ou talvez adicionar conteúdo antes ou depois de um elemento.

Algumas das pseudoelementos mais comuns incluem:

  • ::first-line - seleciona a primeira linha de um bloco de texto.
  • ::first-letter - seleciona a primeira letra de um bloco de texto.
  • ::before - insere conteúdo antes do conteúdo de um elemento.
  • ::after - insere conteúdo após o conteúdo de um elemento.

Como usar Pseudoclasses e Pseudoelementos

A sintaxe para usar pseudoclasses e pseudoelementos é bastante simples. Para pseudoclasses, você adiciona a pseudoclasse diretamente após o seletor, precedido por um dois pontos. Por exemplo:


p:hover {
  background-color: yellow;
}

Este exemplo seleciona todos os parágrafos na página e muda a cor de fundo para amarelo quando o usuário passa o mouse sobre eles.

Para pseudoelementos, a sintaxe é semelhante, mas você usa dois dois pontos em vez de um. Por exemplo:


p::first-letter {
  font-size: 200%;
  color: red;
}

Este exemplo seleciona a primeira letra de todos os parágrafos na página e muda seu tamanho de fonte para 200% e sua cor para vermelho.

Em conclusão, pseudoclasses e pseudoelementos são ferramentas poderosas para estilizar elementos HTML de maneira dinâmica e específica. Eles permitem que você crie designs mais interativos e atraentes, melhorando a experiência do usuário em seu site. Compreender e utilizar eficazmente estas técnicas é uma habilidade essencial para qualquer desenvolvedor front-end.

Agora responda o exercício sobre o conteúdo:

O que são pseudoclasses e pseudoelementos em CSS e como eles são usados?

Você acertou! Parabéns, agora siga para a próxima página

Você errou! Tente novamente.

Imagem do artigo Animações e transições em CSS

Próxima página do Ebook Gratuito:

60Animações e transições em CSS

3 minutos

Ganhe seu Certificado deste Curso Gratuitamente! ao baixar o aplicativo Cursa e ler o ebook por lá. Disponível na Google Play ou App Store!

Disponível no Google Play Disponível no App Store

+ de 6,5 milhões
de alunos

Certificado Gratuito e
Válido em todo o Brasil

48 mil exercícios
gratuitos

4,8/5 classificação
nas lojas de apps

Cursos gratuitos em
vídeo, áudio e texto