13

Gostaria de saber quais são as diferenças entre estes dois conceitos do CSS, a fim de entender e apontar o que é um, e o que pode ser o outro.

Por exemplo: :hover, ::before.

O que eu já entendi até agora é que - :: é pseudo-elemento e : é pseudo-classe, correto?

1 Resposta 1

17

Pseudo-classes são usadas para selecionar elementos que não podem ser expressados de outra forma a não ser usando atributos como: id's, classes (ou qualquer outro tipo de informação disponível através do DOM). Por exemplo: :first-child, :last-child, :lang() e :not().

table tr:first-child td {
   background-color: #ccc;
}
table tr:nth-child(2n) td {
   background-color: #fff;
}
:not(table) {
    color: #ff0000;
}

Pseudo-elementos são elementos "imaginários" (ou elementos virtuais se preferires) no qual podemos aplicar estilos relativamente como parte de outros elementos reais, porém estes elementos imaginários não fazem parte do DOM. Por exemplo, fragmentos de conteúdo, tais como ::first-line e ::first-letter ou conteúdo virtualmente gerado como - ::before e ::after.

p::first-letter {color: green;}
p::before { 
    content: "Leia isto: ";
}
p::after {
    content: url('../imagens/icon.png');
}

O sinal :: foi introduzido no documento atual, a fim de estabelecer uma diferença entre pseudo-classes e pseudo-elementos. Os user agents devem também aceitar o sinal de apenas dois pontos : para compatibilidade com folhas de estilo já existentes e pseudo-elementos introduzidos no CSS 1 e 2 (ou seja: :first-line, :first-letter, :before e :after). Esta compatibilidade não é permitida para os novos pseudo-elementos introduzidos no presente. fonte

Fontes e referências: fonte, pseudo-classes, pseudo-elements, selectors.

3
  • Então no caso o certo seria eu atualizar os pseudo-elementos :before e :after para ::before e ::after? Commented 12/03/2018 às 17:14
  • 2
    Não necessariamente @ViníciusLima . Embora já se veja isto acontecer automaticamente quando é criado um pseudo elemento em certos navegadores como o Firefox, esta atualização por sua parte não é uma ação que necessariamente precisa de ser feita porque os navegadores devem aceitar esta compatibilidade como referi no blockquote da minha resposta. Mas Sim, essa é a forma correta de se mencionar pseudo elementos. Mencionar pseudo elementos com :: será apenas sensível a novos pseudo elementos que foram recentemente adicionados ou que estão para vir no futuro.
    – Chun
    Commented 13/03/2018 às 20:31
  • 1
    Concluindo - Você pode começar a escrever ::before a partir de agora que é a forma correta, mas evita de estar a correr a sua folha de estilo por completo para fazer estas actualizações porque as duas maneiras de se escrever são aceitáveis. Isto agora apenas dependerá do seu estilo de como escreve código que vai variar de pessoa para pessoa.
    – Chun
    Commented 13/03/2018 às 20:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .