A diferença entre Pseudo-Classes e Pseudo-Elements em CSS

Nota: apenas traduzi o texto abaixo e postei aqui. Diferente do artigo original, inseri aqui os códigos dos exemplos do codepen. As referências estão no fim deste artigo.

Em CSS, pseudo-classes e pseudo-elements são dois tipos de palavras-chave que você pode combinar com selectors. Elas são usados ​​para atingir o estado do elemento ou partes específicas de um elemento.

Neste artigo, exploraremos as diferenças entre os dois, juntamente com seu histórico e melhores práticas.

Sintaxe

• Os dois pontos simples : referem-se a pseudo-classes
• Os dois pontos duplos :: referem-se a pseudo-elements

Pseudo-Classes vs Pseudo-Elements

Pseudo em si significa falso, irreal ou fake. O prefixo pseudo-, é usado para referenciar classes ou elements que não são "reais". O termo "não real" neste contexto significa não um DOM element (Document Object Model), mas sim um elemento virtual criado para propósitos de estilo.

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

O que são Pseudo-Classes em CSS?

Pseudo-classes (:) são usadas principalmente para estilizar um elemento que está sob vários estados. Ao se referir ao estado, isso inclui a condição ou comportamento do usuário, por exemplo, hover, active, focus ou disabled. Os estados geralmente envolvem interação do usuário.

Por exemplo, podemos direcionar todos os links para ter uma text color lavender quando o usuário passar o mouse sobre o link.

a:hover {
    color: lavender;
}

Inspecione o DevTools de seu browser e você encontrará outros exemplos de estado. Aqui você também pode testar e debugar styles aplicados com base no estado (e a pseudo-class relacionada usada) alternando-os entre ligado e desligado.

Existem mais de 50 tipos de pseudo-classes, então eu recomendo fortemente que você analise todas as possibilidades.

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

<main class="container">
    <div>
        <p>Interactive</p>
        <button class="button">
            Submit
        </button>
    </div>
    <div>
        <p>Disabled</p>
        <button class="button" disabled>
            Submit
        </button>
    </div>
</main>

* {
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
}
body {
    background: #1D1F21;
    font-family: Inter, sans-serif; 
    font-size: 16px;
    font-style: normal;
    font-size: 1.75em;
    color: #ede7f6;
}
.container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2em;
}
.button {
    background: #553285;
    padding: .5em 1em;
    border: none;
    border-radius: 4px;
    color: #ede7f6;
}

/* PSEUDO-CLASSES */

.button:hover {
    background: #7B52AB
    cursor: pointer;
}

.button:active {
    background: #9768D1;
}

.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* 
    Teste algumas outras pseudo-classes abaixo.

    selector:pseudo-class {
        // insira style aqui
    }
*/

Pseudo-Classes funcionais

Outra variação do tipo de pseudo-class é a pseudo-class funcional. Essas chamadas de function recebem um parâmetro de uma lista de selectors para match aos elementos.

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

:is()
/* A pseudo-class matches-any realiza o match de qualquer elemento que match a qualquer um
dos selectors na lista fornecida. */

:not()
/* A pseudo-class de negação, ou matches-none, representa qualquer elemento 
que não seja representado por seu argumento. */

:where()
/* A pseudo-class de ajuste de especificidade realiza o match de qualquer elemento que
match a qualquer um dos selectors na lista fornecida sem adicionar nenhum 
peso de especificidade. */

:has()
/* A pseudo-class relacional representa um elemento se qualquer um dos 
selectors relativos match quando ancorado ao elemento attached. */

recurso

O que são Pseudo-Elements em CSS?

Pseudo-elements (::) são usados ​​para estilizar partes específicas de um elemento. Eles podem ser usados ​​para atingir 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 index de pseudo-elements 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 um pseudo-elements é 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.

<h1>Element</h1>

html {
    font-family: Lato, sans-serif;
    background: linear-gradient(to bottom right, #c4a3ff, #96c2ff);
    height: 100%;
}

h1 {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* PSEUDO-ELEMENTS */
h1::before,
h1::after {
    content: "";
    height: 3px;
    background: black;
    flex: 1;
    margin: 0.2em;
}

A diferença entre : e :: em CSS

Como lição, lembre-se de que há uma diferença fundamental entre dois pontos simples e dois pontos duplos. Mais importante ainda, : refere-se a pseudo-classes e :: refere-se a pseudo-elements.

História dos ::

Historicamente, havia apenas um único dois-pontos : para definir pseudo-classes e pseudo-elements. A notação :: foi introduzida com CSS3 como uma forma de diferenciar os dois.

Pseudo-elements 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 dois-pontos não é recomendado para ambos, pois se tornou obsoleto. Os navegadores ainda aceitarão : para ambos atualmente, por motivos de compatibilidade com versões anteriores. Como é possível encontrar qualquer uma das sintaxes, entender o contexto histórico em torno disso é benéfico.

Melhores práticas quando usar : vs ::

A melhor prática ao escolher qual sintaxe de dois pontos usar é manter os padrões atuais do CSS3. Seguir esses padrões melhorará a manutenibilidade da sua base de código, então é útil manter e aplicar diretrizes sobre isso para sua base de código.

Isso também ajudará a proteger seu CSS para o futuro. Como discutimos, os navegadores atualmente aceitam a sintaxe de dois pontos simples para ambos, mas isso pode não ser sempre o caso. Ao usar a sintaxe de dois pontos duplos para pseudo-elements, você pode ajudar a evitar erros e bugs no futuro, pois o CSS continua a mudar e evoluir.

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

Encapsulando

Entender a diferença entre uma pseudo-class e um pseudo-element é essencial para escrever CSS sustentável. Pseudo-classes são usadas para mirar o estado. Pseudo-elements são usados ​​para mirar partes específicas de um element.

Espero que este artigo tenha ajudado a entender as diferenças entre pseudo-classes e pseudo-elements, juntamente com o histórico e as melhores práticas ao usá-los.

Boa estilização!

Se você quiser aprender mais sobre CSS, pode me encontrar no Twitter.

Fonte

Artigo escrito por Natalie Pina.