Pseudo-classes em CSS | Explicado

Estilizar elementos HTML com base no estado em que estão em que estão em uma tarefa interessante que pode melhorar a aparência geral e a experiência do usuário de um site. O CSS fornece certas classes para esta tarefa, que são referidas como, pseudo-classes. Esta postagem foi projetada para lançar luz sobre pseudo-classes e seu uso. Antes de saltarmos para o nosso tópico principal, dê uma olhada no conteúdo que você passará neste post.

1. O que são pseudo-classes
2. : Classe de link
3. : Classe visitada
4. : Classe pairar
5. : classe ativa
6. : Focus Class
7. : aula de primeiro filho
8. : Lang Class

Vamos começar.

O que são pseudo-classes

Pseudo-classes no CSS descrevem um estado único de um elemento HTML e, com base nesses estados, pode ser adicionado a elementos usando um seletor de CSS junto com essas classes.

Sintaxe

Seletor: pseudo-classe

valor da propriedade;

Existem várias pseudo-classes no CSS, no entanto, vamos discutir alguns importantes neste artigo.

: Classe de link

Esta classe é usada para estilizar um link que ainda não foi visitado.

Exemplo

Suponha que você queira adicionar um link ao seu site e dar um certo estilo quando ainda não for visitado pelo usuário. Siga o código abaixo.

Linux Dica

No código acima, fornecemos um link para o atributo href da tag âncora e, usando a: Classe de link, estamos dando a cor verde quando está em seu estado não visitado.

Saída

O link foi estilizado usando com sucesso a: Classe de link.

: Classe visitada

Esta classe é usada para estilizar um link que o usuário visitou.

Exemplo

O exemplo abaixo demonstra o funcionamento da: classe visitada Siga o exemplo abaixo.

Linux Dica

Aqui estamos atribuindo a cor verde ao estado visitado do link. Isso significa que quando você abre o link, a cor mudará para verde.

Saída

Antes de visitar o link.

Quando você visita o link.

O estado visitado do link foi estilizado usando a: classe visitada.

: Classe pairar

Esta classe é usada para estilizar um elemento quando um cursor do mouse é trazido sobre ela.

Exemplo

Suponha que você queira destacar um elemento toda vez que o usuário traz o mouse sobre esse elemento específico.

Traga mouse sobre mim

No código acima, criamos um

elemento e usei a: Classe Hover para dar uma cor amarela. Agora, toda vez que você traz seu mouse no elemento, a cor mudará para amarelo.

Saída

A: a classe pairar está funcionando corretamente.

: classe ativa

Esta classe é usada para estilizar um elemento quando está ativo.

Exemplo

Suponha que você queira um link para alterar sua cor quando for clicado.

Linux Dica

Agora, quando o usuário clicar no link, naquele momento a cor do link mudará para rosa.

Saída

Antes de clicar no link.

Quando o link é clicado.

O estado ativo do link foi estilizado com sucesso.

: Focus Class

Esta classe é usada para estilizar um elemento quando está sob foco.

Exemplo

Vamos estilizar um campo de entrada alterando sua cor de fundo quando um usuário traz foco nele clicando nele.

Digite seu nome:

De acordo com o código acima, quando um usuário clica no campo de entrada, sua cor de fundo mudará para rosa.

Saída

A cor de fundo do campo de entrada mudou com sucesso.

: aula de primeiro filho

Esta classe é usada para estilizar o primeiro filho de um elemento especificado.

Exemplo

Suponha que você queira aplicar a propriedade CSS apenas no primeiro filho de um elemento div. Use o seguinte código.

Este parágrafo é o primeiro filho da div

Este parágrafo é o segundo filho da div

No código acima, estamos usando a: classe de primeiro filho para alinhar o texto do

elemento que é o primeiro filho do elemento.

Saída

O primeiro

O elemento foi alinhado à direita usando a: aula de primeiro filho.

: Lang Class

Esta classe é usada para especificar um idioma que deve ser usado em um determinado elemento. Esta aula é útil ao especificar regras para vários idiomas em um documento.

Exemplo

No exemplo abaixo, estamos especificando algumas regras para

elemento com atributo lang = "en". Esses conjuntos de regras serão aplicados a cada

elemento com este atributo.

Este é o primeiro parágrafo.

Esse é o segundo parágrafo.

Este é o terceiro parágrafo.

Saída

Como você pode ver que o primeiro e o terceiro

elementos tem o atributo lang = "en", portanto, as regras definidas para esta classe se aplicarão apenas no primeiro e no terceiro

elementos.

Conclusão

Pseudo-classes descrevem um estado único de um elemento HTML e com base nesses estados efeitos especiais podem ser adicionados aos elementos. Existem muitas pseudo-classes no CSS, no entanto, alguns dos significativos são: Classe de Link ,: Classe visitada,: Classe de Hover ,: Classe Attiva ,: Classe Focus ,: Classe de Primeira Criança e: Lang Classe. Essas classes são explicadas em profundidade neste post, juntamente com seus exemplos relevantes.