Pseudo-classes e Pseudo-elements CSS

Tempo de leitura: 4 minutos

Pseudo-classes e Pseudo-elements CSS: Além dos seletores tradicionais que identificam elementos HTML pelo nome da tag, classe ou ID, o CSS oferece um conjunto poderoso de ferramentas para estilizar elementos com base em seus estados ou partes específicas: as pseudo-classes e os pseudo-elementos. Essas construções permitem criar estilos mais dinâmicos e personalizados, adaptando a aparência de seus elementos a diferentes situações e interações do usuário.

Neste artigo, vamos explorar em detalhes o conceito de pseudo-classes e pseudo-elementos, como eles funcionam e como utilizá-los em seus projetos.

O que são Pseudo-classes e Pseudo-elementos?

• Pseudo-classes: São palavras-chave que representam um estado específico de um elemento, como quando o mouse passa por cima (hover), quando um elemento está sendo focado (focus) ou quando um link já foi visitado (visited).
• Pseudo-elementos: São palavras-chave que representam partes específicas de um elemento, como a primeira linha de um parágrafo (::first-line) ou o conteúdo depois de um elemento (::after).

Em resumo:

• Pseudo-classes: Estilizam elementos com base em seu estado.
• Pseudo-elementos: Estilizam partes específicas de um elemento.

Como Funcionam as Pseudo-classes e Pseudo-elementos?

As pseudo-classes e pseudo-elementos são adicionados aos seletores CSS para criar regras mais específicas. Por exemplo, para aplicar um estilo a um link quando o mouse passa por cima dele, você usaria a pseudo-classe :hover:

CSS

a:hover {
  color: blue;
  text-decoration: underline;
}

Tipos Comuns de Pseudo-classes

• :hover: Aplica estilos quando o mouse passa sobre um elemento.
• :focus: Aplica estilos quando um elemento está sendo focado (geralmente um campo de formulário).
• :active: Aplica estilos quando um elemento está sendo ativado (por exemplo, um botão enquanto é clicado).
• :visited: Aplica estilos a links que já foram visitados.
• :link: Aplica estilos a links que ainda não foram visitados.
• :enabled, :disabled: Aplica estilos a elementos habilitados ou desabilitados.
• :checked: Aplica estilos a elementos de formulário marcados.
• :first-child, :last-child: Seleciona o primeiro ou último filho de um elemento.
• :nth-child(n): Seleciona o n-ésimo filho de um elemento.

Tipos Comuns de Pseudo-elementos

• ::before: Insere conteúdo antes do conteúdo do elemento.
• ::after: Insere conteúdo depois do conteúdo do elemento.
• ::first-line: Seleciona a primeira linha de um bloco de texto.
• ::first-letter: Seleciona a primeira letra de um bloco de texto.

Exemplo Prático

HTML

<p class="tr-p-example">
    O Lorem Ipsum é um texto modelo da indústria tipográfica e de      
    impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por 
    estas indústrias desde o ano de 1500, quando uma misturou os 
    caracteres de um texto para criar um espécime de livro. Este texto não 
    só sobreviveu 5 séculos, mas também o salto para a tipografia 
    electrónica, mantendo-se essencialmente inalterada. Foi popularizada 
    nos anos 60 com a disponibilização das folhas de Letraset, que 
    continham passagens com Lorem Ipsum, e mais recentemente com os 
    programas de publicação como o Aldus PageMaker que incluem versões do 
    Lorem Ipsum.
</p>
<button>Clique aqui</button>

CSS

.tr-p-example::first-line {
  font-weight: bold;
  font-size: 1.2em;
}

button:hover {
  background-color: #fff;
  color: red;
  cursor: pointer;
}

RESULTADO

Criando Efeitos Interativos

As pseudo-classes e pseudo-elementos são essenciais para criar interfaces de usuário interativas. Você pode usar essas ferramentas para:

• Hover effects: Mudar a cor, o tamanho ou a opacidade de um elemento quando o mouse passa por cima.
• Focus styles: Destacar o elemento que está sendo focado pelo teclado.
• Indicadores de estado: Mostrar o estado de um elemento, como um botão que está sendo pressionado.
• Criação de layouts: Utilizar pseudo-elementos para criar elementos visuais personalizados, como linhas decorativas ou ícones.

Considerações Importantes

• Especificidade: A ordem e a especificidade dos seletores são importantes para garantir que os estilos sejam aplicados corretamente.
• Compatibilidade: Algumas pseudo-classes e pseudo-elementos podem não ser suportadas em todos os navegadores.
• Performance: O uso excessivo de pseudo-elementos pode impactar o desempenho da página.

Conclusão

Pseudo-classes e Pseudo-elements CSS: As pseudo-classes e pseudo-elementos são ferramentas poderosas que permitem criar estilos personalizados e interativos em suas páginas web. Ao dominar esses conceitos, você poderá criar interfaces de usuário mais ricas e envolventes. Experimente diferentes combinações de pseudo-classes e pseudo-elementos para criar efeitos visuais únicos e personalizados.

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo:

E se você gosta do nosso conteúdo, não deixe de contribuir adquirindo os serviços e produtos dos nossos apoiadores e empresas que somos associados: