{"id":727,"date":"2024-04-23T13:19:15","date_gmt":"2024-04-23T16:19:15","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=727"},"modified":"2025-11-07T14:31:47","modified_gmt":"2025-11-07T17:31:47","slug":"pseudo-classes-e-pseudo-elements-css","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/pseudo-classes-e-pseudo-elements-css\/","title":{"rendered":"Pseudo-classes e Pseudo-elements CSS"},"content":{"rendered":"Tempo de leitura: <\/span> 3<\/span> minutos<\/span><\/span>\n

Pseudo-classes e Pseudo-elements CSS<\/strong>: O CSS vai al\u00e9m de estilizar elementos est\u00e1ticos. Para criar interfaces de usu\u00e1rio ricas e envolventes, \u00e9 necess\u00e1rio que os elementos mudem de apar\u00eancia em resposta \u00e0s a\u00e7\u00f5es do usu\u00e1rio ou \u00e0 sua posi\u00e7\u00e3o no documento.<\/p>\n\n\n\n

\u00c9 a\u00ed que entram as Pseudo-Classes<\/strong> e os Pseudo-Elementos<\/strong>, um conjunto poderoso de seletores que permitem estilizar elementos com base em seu estado<\/strong> ou em partes espec\u00edficas<\/strong> invis\u00edveis do elemento.<\/p>\n\n\n\n

Neste artigo, vamos desvendar essas constru\u00e7\u00f5es e explorar como elas adicionam dinamismo e precis\u00e3o ao seu CSS.<\/p>\n\n\n\n

<\/div>\n\n\n\n

1. Pseudo-Classes (:<\/code>) \u2013 Estilizando o Estado<\/h2>\n\n\n\n

As Pseudo-Classes representam um estado espec\u00edfico<\/strong> que um elemento pode ter. Elas s\u00e3o precedidas por um \u00fanico ponto<\/strong> (:<\/code>).<\/p>\n\n\n\n

Pseudo-Classe<\/strong><\/td>Sintaxe<\/strong><\/td>Fun\u00e7\u00e3o<\/strong><\/td>Exemplo de Uso<\/strong><\/td><\/tr><\/thead>
Interativas<\/strong><\/td><\/td><\/td><\/td><\/tr>
:hover<\/code><\/td>a:hover<\/code><\/td>Quando o mouse est\u00e1 sobre<\/strong> o elemento.<\/td>Efeito visual ao passar o mouse.<\/td><\/tr>
:focus<\/code><\/td>input:focus<\/code><\/td>Quando o elemento est\u00e1 selecionado<\/strong> (tabula\u00e7\u00e3o ou clique).<\/td>Estilo de borda para campos de formul\u00e1rio.<\/td><\/tr>
:active<\/code><\/td>button:active<\/code><\/td>Quando o elemento est\u00e1 sendo ativado<\/strong> (segurando o clique).<\/td>Efeito de “apertar” um bot\u00e3o.<\/td><\/tr>
Estruturais<\/strong><\/td><\/td><\/td><\/td><\/tr>
:first-child<\/code><\/td>li:first-child<\/code><\/td>O elemento que \u00e9 o primeiro filho<\/strong> de seu pai.<\/td>Remover a margem do topo do primeiro item de uma lista.<\/td><\/tr>
:last-child<\/code><\/td>p:last-child<\/code><\/td>O elemento que \u00e9 o \u00faltimo filho<\/strong> de seu pai.<\/td>Adicionar um estilo de rodap\u00e9 ao \u00faltimo par\u00e1grafo.<\/td><\/tr>
:nth-child(n)<\/code><\/strong><\/td>li:nth-child(odd)<\/code><\/td>Seleciona o n-\u00e9simo filho<\/strong> (\u00fatil para listas zebradas).<\/td>Estilizar linhas \u00edmpares\/pares de tabelas ou listas.<\/td><\/tr>
Formul\u00e1rio<\/strong><\/td><\/td><\/td><\/td><\/tr>
:checked<\/code><\/td>input:checked<\/code><\/td>Elementos (checkbox\/radio) que est\u00e3o marcados<\/strong>.<\/td>Estilizar caixas de sele\u00e7\u00e3o.<\/td><\/tr>
:disabled<\/code><\/td>input:disabled<\/code><\/td>Elementos de formul\u00e1rio desabilitados<\/strong>.<\/td>Mostrar campos inativos.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n

Combinando Pseudo-Classes<\/h3>\n\n\n\n

Voc\u00ea pode combinar v\u00e1rias pseudo-classes em um \u00fanico seletor para alta precis\u00e3o:<\/p>\n\n\n\n

CSS<\/p>\n\n\n\n

\/* Estiliza o link que foi visitado E est\u00e1 com o mouse por cima *\/\na:visited:hover {\n  opacity: 0.8;\n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
2. Pseudo-Elementos (::<\/code>) \u2013 Estilizando Partes<\/h2>\n\n\n\n
Os Pseudo-Elementos representam partes espec\u00edficas<\/strong> de um elemento que n\u00e3o existem como tags no HTML. A sintaxe moderna usa dois pontos<\/strong> (::<\/code>) para diferenci\u00e1-los de Pseudo-Classes.<\/p>\n\n\n\n
Pseudo-Elemento<\/strong><\/td>Sintaxe<\/strong><\/td>Fun\u00e7\u00e3o<\/strong><\/td>Exemplo de Uso<\/strong><\/td><\/tr><\/thead>
::before<\/code><\/strong><\/td>p::before<\/code><\/td>Cria conte\u00fado antes<\/strong> do conte\u00fado real do elemento.<\/td>Adicionar \u00edcones ou aspas decorativas.<\/td><\/tr>
::after<\/code><\/strong><\/td>p::after<\/code><\/td>Cria conte\u00fado depois<\/strong> do conte\u00fado real do elemento.<\/td>Adicionar links de fonte ou limpar floats.<\/td><\/tr>
::first-letter<\/code><\/strong><\/td>p::first-letter<\/code><\/td>Estiliza apenas a primeira letra<\/strong> de um bloco de texto.<\/td>Criar capitulares em artigos de revista.<\/td><\/tr>
::first-line<\/code><\/strong><\/td>p::first-line<\/code><\/td>Estiliza apenas a primeira linha<\/strong> formatada de um bloco de texto.<\/td>Enfatizar a introdu\u00e7\u00e3o de um par\u00e1grafo.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n
\ud83d\uded1 O Segredo de ::before<\/code> e ::after<\/code><\/h3>\n\n\n\n
Para que os pseudo-elementos ::before<\/code> e ::after<\/code> funcionem, eles devem<\/strong> ter a propriedade content<\/code> definida, mesmo que esteja vazia:<\/p>\n\n\n\n
CSS<\/p>\n\n\n\n
\/* Adiciona um ponto final vermelho ap\u00f3s o t\u00edtulo principal *\/\nh1::after {\n  content: \".\"; \/* ESSENCIAL: O que ser\u00e1 inserido *\/\n  color: red;\n  font-weight: bold;\n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
3. Especificidade e Boas Pr\u00e1ticas<\/h2>\n\n\n\n