Obtenha mais poder sobre seus designs web usando esses seletores CSS avançados.

CSS suporta uma variedade de seletores para identificar elementos para estilo, cada um com seu próprio conjunto de regras. Embora a maioria dos métodos de seleção sejam simples, pseudoclasses e pseudoelementos fornecem mais flexibilidade. Eles permitem selecionar elementos com base em seu estado ou posição dentro de uma estrutura, ou selecionam partes específicas do conteúdo.

Esses seletores podem ser complicados de usar e é fácil misturar pseudoclasses com pseudoelementos, então como diferenciá-los?

Compreendendo as pseudoclasses CSS

Uma pseudoclasse CSS é como uma palavra-chave especial que você pode usar com seletores para estilizar elementos de diferentes maneiras. Essas palavras-chave ajudam você a segmentar elementos quando certas coisas acontecem, como quando um usuário passa o mouse sobre um elemento, clica nele ou digita algo em um campo de entrada.

As pseudoclasses tornam sua página da web mais interativa e responsiva, alterando a aparência ou o comportamento dos elementos com base nas ações do usuário. Quando você

use-os com outros seletores CSS, eles fornecem controle preciso sobre estilo e interatividade.

Sintaxe e uso de pseudoclasse CSS

A sintaxe de uma pseudoclasse CSS consiste em dois pontos (:) seguido pelo nome de uma pseudoclasse. Aqui está a sintaxe básica:

selector:pseudo-class {
/* styles */
}

Nesta sintaxe:

  • seletor refere-se ao elemento ou elementos aos quais você deseja selecionar e aplicar estilos. Pode ser um elemento HTML, uma classe, um ID ou um seletor mais complexo como uma combinação. O seletor é opcional, mas normalmente você usará um; sem ele, sua pseudoclasse terá como alvo todos os elementos aos quais pode ser aplicada.
  • pseudo-classe é a palavra-chave que representa um estado ou condição específica que você deseja atingir.

CSS categoriza pseudoclasses em vários grupos com base em sua funcionalidade e nas condições a que se destinam. Aqui estão as principais categorias junto com alguns exemplos:

Interação com o usuário

:flutuar

Seleciona um elemento quando o ponteiro do mouse passa sobre ele.

:ativo

Seleciona um elemento quando um usuário o ativa, normalmente clicando.

:visitado

Seleciona links que o usuário visitou.

Estrutural

:primeiro filho

Seleciona o primeiro elemento filho de um pai.

:último filho

Seleciona o último elemento filho de um pai.

:n-ésimo filho (n)

Seleciona elementos com base em sua posição dentro de um pai, permitindo segmentar filhos específicos.

Relacionado ao formulário

:desabilitado

Seleciona elementos de formulário desabilitados.

:verificado

Seleciona botões de opção ou caixas de seleção marcados.

Estado do elemento UI

:inválido

Seleciona elementos de formulário inválidos.

:obrigatório

Seleciona os campos obrigatórios dos elementos do formulário.

:opcional

Seleciona elementos de formulário que são campos opcionais.

Relacionado ao link

:link

Seleciona links não visitados.

Baseado em linguagem

:lang()

Seleciona elementos com base no idioma especificado em seu atributo “lang”.

Você pode tentar um exemplo comum aplicando: efeitos de foco às imagens em uma galeria. Os estilos típicos incluem ampliar ou esmaecer essas imagens quando alguém passa o mouse sobre elas.

Explorando pseudoelementos CSS

Um pseudoelemento CSS é como uma palavra-chave especial que você pode usar com seletores para estilizar partes específicas do conteúdo de um elemento ou para inserir conteúdo adicional. Essas palavras-chave permitem que você direcione e estilize elementos com base em sua estrutura de conteúdo.

Pseudo-elementos aprimore o design e o layout da sua página da web dando-lhe a capacidade de estilizar elementos de maneiras que tradicionalmente só eram possíveis com elementos HTML reais.

Sintaxe e implementação de pseudo-elementos CSS

Pseudoelementos em CSS têm uma sintaxe específica que envolve o uso de dois pontos (::) seguido pelo nome do pseudoelemento. Aqui está a sintaxe básica:

selector::pseudo-element {
/* styles */
}

Nesta sintaxe:

  • seletor tem como alvo o elemento ao qual você deseja aplicar o pseudoelemento. Pode ser qualquer seletor CSS válido, incluindo nenhum.
  • pseudo-elemento é o nome do pseudoelemento que você deseja atingir. Você só pode usar um pseudoelemento em um seletor, pois eles não fazem sentido combinados.

Aqui estão alguns dos pseudoelementos:

::antes

Insere conteúdo antes do conteúdo do elemento selecionado.

::depois

Insere conteúdo após o conteúdo do elemento selecionado.

::primeira carta

Estiliza a primeira letra do texto dentro de um elemento.

::seleção

Estiliza a parte do texto que um usuário selecionou com o cursor.

::marcador

Estiliza a caixa de marcador de um item da lista (por exemplo, o marcador ou número em uma lista).

::deixa

Aplica estilos a sugestões em elementos de mídia como

O ::antes e ::depois dos pseudoelementos podem ser particularmente difíceis de entender, portanto praticá-los o ajudará a dominar o resto.

Semelhanças e diferenças

Aqui estão as semelhanças e diferenças entre pseudoclasses e pseudoelementos CSS:

Pseudo-classes

Pseudo-Elementos

Sintaxe

Prefixado com dois pontos (:).

Prefixado com dois pontos (::).

Uso

Selecione e estilize elementos com base em seu estado, posição ou interação do usuário.

Estilize partes específicas do conteúdo de um elemento ou crie elementos virtuais.

Seletores

Pode ocorrer em qualquer ponto dentro de um seletor complexo ou composto.

Deve ser o componente final de um seletor e só pode aparecer uma vez.

Inserção de Conteúdo

Não insere conteúdo, principalmente para estilização baseada no estado.

Pode inserir conteúdo ou elementos virtuais antes ou depois do conteúdo do elemento selecionado.

Estilo tipográfico

Normalmente não é usado para estilo tipográfico.

Usado para texto e estilo tipográfico (por exemplo, ::primeira linha, ::primeira letra).

Peças direcionadas

Tem como alvo elementos inteiros.

Visa partes específicas do conteúdo de um elemento.

Suporte ao navegador

Geralmente bem suportado.

Geralmente bem suportado, mas alguns navegadores mais antigos podem ter suporte limitado.

Pseudoclasses e pseudoelementos são importantes em CSS para a criação de vários estilos e recursos interativos. Embora tenham algumas semelhanças, cada um deles tem suas próprias funções exclusivas no design e desenvolvimento da web.

Pseudoclasses e pseudoelementos em ação

Você pode praticar o uso de pseudoclasses e pseudoelementos CSS em diferentes projetos para avaliar sua compreensão. Exemplos de projetos fáceis que você pode realizar incluem cartões de perfil, menus de navegação e estilos de lista, entre outros. Esses projetos fornecem experiência prática para melhorar suas habilidades em CSS e, ao mesmo tempo, incorporar interatividade e estilo em seus designs web.