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. */
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.
Top comments (0)