A diferença entre pseudo-classe e pseudo-elemento

Descubra o Segredo do CSS que Muitos Desenvolvedores Ignoram

Ao final deste post, você terá não apenas uma compreensão clara da diferença entre pseudo-classes e pseudo-elementos, mas também saberá como aplicá-los de forma eficaz nos seus projetos. Prepare-se para transformar suas dúvidas em confiança e seus projetos simples em obras de arte do desenvolvimento web.

No CSS, as pseudo-classes e pseudo-elementos são dois tipos de palavras-chave que você pode combinar com seletores. Eles são usados para mirar o estado do elemento ou partes específicas de um elemento.

Neste artigo, vamos explorar as diferenças entre os dois, além da história deles e das melhores práticas.

Sintaxe

• O cólon simples : refere-se às pseudo-classes
• O cólon duplo :: refere-se aos pseudo-elementos

Pseudo-Classes vs Pseudo-Elementos

Pseudo significa falso, irreal ou fake. O prefixo pseudo- é usado para referir-se a classes ou elementos que não são "reais". Não real, neste contexto, significa não ser um elemento do DOM (Modelo de Objeto de Documento), mas sim um elemento virtual criado para fins de estilização.

Para formar uma definição melhor, vamos discutir a diferença entre pseudo-classes e pseudo-elementos com mais detalhes.

O que são Pseudo-Classes no CSS?

Pseudo-classes (:) são usadas principalmente para estilizar um elemento que está sob vários estados. Quando falamos de estado, incluímos a condição ou comportamento do usuário, por exemplo, hover, active, focus ou disabled. Estados geralmente envolvem interação do usuário.

Por exemplo, podemos definir que todos os links terão a cor do texto em lavanda quando o usuário passar o mouse sobre eles.

a:hover {
  color: lavender;
}

Inspecione o Chrome DevTools e você encontrará outros exemplos de estado. Aqui você também pode testar e depurar estilos aplicados com base no estado (e na pseudo-classe relacionada) ativando e desativando-os.

Existem mais de 50 tipos de pseudo-classes, então eu sugiro fortemente olhar todas as possibilidades.

Teste o exemplo de código abaixo, inspecione as pseudo-classes e tente adicionar uma nova.

Pseudo-Classes Funcionais

Outra variação do tipo de pseudo-classe é a pseudo-classe funcional. Essas chamadas de função recebem um parâmetro de uma lista de seletores para combinar com elementos.

Ao contrário de outros tipos de pseudo-classes que miram estados estáticos como hover, estas podem mirar dinamicamente eventos e interações do usuário.

• :is() : A pseudo-classe matches-any combina com qualquer elemento que corresponda a qualquer dos seletores na lista fornecida.
• :not() : A negação, ou matches-none, pseudo-classe representa qualquer elemento que não seja representado pelo seu argumento.
• :where() : A pseudo-classe de ajuste de especificidade combina com qualquer elemento que corresponda a qualquer um dos seletores na lista fornecida sem adicionar qualquer peso de especificidade.
• :has(): A pseudo-classe relacional representa um elemento se qualquer um dos seletores relativos combinar quando ancorado contra o elemento anexado.

O que são Pseudo-Elementos no CSS?

Pseudo-elementos (::) são usados para estilizar partes específicas de um elemento. Eles podem ser usados para mirar a primeira letra ou a primeira linha. Ou podem ser usados para inserir conteúdo antes ou depois do elemento.

Vale a pena se familiarizar com este índice de pseudo-elementos para aprender mais sobre as palavras-chave disponíveis.

Como exemplo, para criar uma primeira letra grande de um parágrafo, você pode fazer isso usando first-letter assim:

p::first-letter {
  font-size: 9em;
}

Outro exemplo comum de pseudo-elemento é usar ::before ou ::after para inserir conteúdo antes ou depois do elemento alvo.

Teste o exemplo de código abaixo para ver como você pode usar ::before e ::after para criar linhas antes e depois de um elemento de texto.

A Diferença entre : e :: no CSS

Como ponto a se lembrar, há uma diferença chave entre um cólon simples e um cólon duplo. Mais importante é que : refere-se a pseudo-classes e :: a pseudo-elementos.

História do ::

Historicamente, havia apenas um cólon simples : para definir tanto pseudo-classes quanto pseudo-elementos. A notação :: foi introduzida com o CSS3 como uma forma de diferenciar os dois.

Pseudo-elementos e pseudo-classes são conceitos relacionados que fornecem diferentes maneiras de estilizar um elemento. Como resultado, a ligeira variação na sintaxe entre eles é lógica.

Usar apenas a sintaxe de cólon simples não é recomendado para ambos, pois se tornou obsoleta. Os navegadores ainda aceitam : para ambos, por razões de compatibilidade com versões anteriores. Uma vez que é possível encontrar ambas as sintaxes, entender o contexto histórico em torno disso é benéfico.

Melhores Práticas para usar : vs ::

A melhor prática ao escolher qual sintaxe de cólon usar é seguir os padrões atuais do CSS3. Seguir esses padrões melhorará a manutenção do seu código, por isso é útil manter e aplicar diretrizes sobre isso para o seu código.

Isso também ajudará a preparar seu CSS para o futuro. Como discutimos, os navegadores atualmente aceitam a sintaxe de cólon simples para ambos, mas isso pode não ser sempre o caso. Ao usar a sintaxe de cólon duplo para pseudo-elementos, você pode ajudar a prevenir erros e bugs no futuro conforme o CSS continua a mudar e evoluir.

A distinção de sintaxe entre os dois oferece melhorias na legibilidade. Isso esclarece o que você está mirando, e é útil ao lidar com seletores intrincados que envolvem múltiplos pseudo-elementos e pseudo-classes juntos.

Transforme Sua Carreira com Firstday: Do Zero à Vaga de Emprego

Chegou a hora de dar um salto na sua carreira de desenvolvedor web. Com o programa de aceleração da Firstday, você não só aprende, mas aplica seus conhecimentos em projetos reais, preparando-se verdadeiramente para o mercado de trabalho.

Por que escolher a Firstday? Nós oferecemos uma experiência única de aprendizado baseada em projetos (PBL), onde você:

• Aprende fazendo: Execute projetos reais e ganhe experiência prática.
• Orientação de Experts: Seja acompanhado por profissionais experientes do setor.
• Preparação para o mercado: Familiarize-se com metodologias ágeis como o SCRUM.
• Recursos Exclusivos: Acesse uma plataforma rica em materiais complementares, incluindo vídeos práticos, teóricos e e-books.
• Visibilidade para Empregadores: Mostre seu progresso a empresas parceiras, aumentando suas chances de contratação.

Diferentemente de outros programas, na Firstday você é constantemente exposto a oportunidades reais de emprego. Nosso compromisso é fazer com que você saia melhor do que entrou, prontamente capacitado para conquistar aquela vaga desejada.

Não perca mais tempo se sentindo perdido ou inseguro. Comece sua jornada com a Firstday agora e dê o primeiro passo rumo à sua vaga de emprego dos sonhos.

Continue a leitura

Para continuar expandindo suas habilidades, confira nosso outro post: "10 Projetos Simples de Desenvolvimento Web para Construir Seu Portfólio". Nele, você encontrará ideias práticas para aplicar o que aprendeu hoje e construir um portfólio impressionante.

Conclusão

Ao longo deste post, mergulhamos no universo das pseudo-classes e pseudo-elementos do CSS, ferramentas cruciais para trazer mais interatividade e beleza aos seus projetos web. Com a compreensão desses conceitos, você agora tem o poder de criar designs mais dinâmicos e atraentes, elevando a qualidade dos seus trabalhos.

Lembre-se, o conhecimento que você adquiriu aqui é apenas um dos muitos passos em sua jornada de desenvolvimento. A cada técnica dominada, você se aproxima daquele emprego dos sonhos na área de desenvolvimento web.

Boa sorte e até a próxima!