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.