13. Pseudoclasses e pseudoelementos em CSS

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.

Próxima página do Ebook Gratuito:

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

3 minutos