Qual é a diferença entre uma pseudo-class e um pseudo-elemento no CSS?

Coisas como a:link ou div::after

A informação sobre a diferença parece escassa.

A recomendação do seletor de CSS 3 é bastante clara sobre ambos, mas tentarei mostrar as diferenças de qualquer maneira.

Pseudo-classs

Descrição oficial

O conceito de pseudo-class é introduzido para permitir a seleção com base em informações que estão fora da tree do documento ou que não podem ser expressas usando os outros seletores simples.

Uma pseudo-class sempre consiste em um “dois-pontos” (:) seguido pelo nome da pseudo-class e, opcionalmente, por um valor entre parênteses.

Pseudo-classs são permitidas em todas as seqüências de seletores simples contidos em um seletor. Pseudo-classs são permitidas em qualquer lugar em seqüências de seletores simples, após o seletor de tipo principal ou seletor universal (possivelmente omitido). Nomes de pseudo-class são insensíveis a maiúsculas e minúsculas. Algumas pseudo-classs são mutuamente exclusivas, enquanto outras podem ser aplicadas simultaneamente ao mesmo elemento. As pseudo-classs podem ser dinâmicas, no sentido de que um elemento pode adquirir ou perder uma pseudo-class enquanto um usuário interage com o documento.

Fonte

O que isto significa?

A natureza importante das pseudo-classs é expressa na primeira frase: “o conceito de pseudo-class […] permite a seleção . Ele permite que o autor de uma folha de estilos seja diferente entre elementos baseados em informações que “estão fora da tree de documentos” , por exemplo, o status atual de um link ( :active :visited ). Eles não são salvos em nenhum lugar do DOM e não existe uma interface DOM para acessar essas opções.

Por outro lado window.location.hash :target poderia ser acessado via manipulação DOM (você poderia usar window.location.hash para encontrar o object com JavaScript), mas isso “não pode ser expresso usando outros seletores simples” .

Então, basicamente, uma pseudo-class irá refinar o conjunto de elementos selecionados como qualquer outro seletor simples em uma sequência de seletores simples . Observe que todos os seletores simples em uma sequência de seletores simples serão avaliados ao mesmo tempo. Para obter uma lista completa de pseudo-classs, verifique a recomendação do seletor CSS3.

Exemplo

O exemplo a seguir irá colorir todas as linhas pares cinza ( #ccc ), todas as linhas desiguais que não podem ser divididas por 5 brancas e todas as outras linhas magenta.

 table tr:nth-child(2n) td{ background-color: #ccc; } table tr:nth-child(2n+1) td{ background-color: #fff; } table tr:nth-child(2n+1):nth-child(5n) td{ background-color: #f0f; } 

Pseudo-elementos

Descrição oficial

Os pseudo-elementos criam abstrações sobre a tree do documento além daquelas especificadas pelo idioma do documento. Por exemplo, linguagens de documentos não oferecem mecanismos para acessar a primeira letra ou a primeira linha do conteúdo de um elemento. Os pseudo-elementos permitem que os autores se refiram a essa informação inacessível. Os pseudo-elementos também podem fornecer aos autores uma maneira de se referir ao conteúdo que não existe no documento de origem (por exemplo, os pseudo-elementos ::before e ::after dão access ao conteúdo gerado).

Um pseudoelemento é formado por dois pontos ( :: 🙂 seguido pelo nome do pseudoelemento.

This :: notation é introduzido pelo documento atual para estabelecer uma discriminação entre pseudo-classs e pseudo-elementos. Para compatibilidade com folhas de estilo existentes, os agentes do usuário também devem aceitar a notação de um-ponto anterior para pseudo-elementos introduzidos nos níveis de CSS 1 e 2 (a saber: primeira linha, primeira letra, antes e depois). Esta compatibilidade não é permitida para os novos pseudo-elementos introduzidos nesta especificação.

Apenas um pseudoelemento pode aparecer por seletor e, se presente, deve aparecer após a sequência de seletores simples que representa os assuntos do seletor.

Nota: Uma versão futura desta especificação pode permitir vários pseudo-elementos por seletor.

Fonte

O que isto significa?

A parte mais importante aqui é que “pseudo-elementos permitem que os autores se refiram a informações [..] inacessíveis de outra forma e que “também forneçam aos autores uma maneira de se referir ao conteúdo que não existe no documento fonte (por exemplo, ::before pseudo-elementos ::before e ::after dão access ao conteúdo gerado) “. A maior diferença é que eles realmente criam um novo elemento virtual no qual as regras e até mesmo os seletores de pseudo-class podem ser aplicados. Eles não filtram elementos, eles basicamente filtram o conteúdo ( ::first-line , ::first-letter ) e o envolvem em um container virtual, que o autor pode estilizar da maneira que quiser (bem, quase).

Por exemplo, o pseudoelemento ::first-line não pode ser reconstruído com JavaScript, pois depende muito da fonte atual usada, do tamanho das fonts, da largura dos elementos, dos elementos flutuantes (e provavelmente da hora do dia). Bem, isso não é inteiramente verdade: ainda é possível calcular todos esses valores e extrair a primeira linha, no entanto, fazer isso é uma atividade muito incômoda.

Eu acho que a maior diferença é que “apenas um pseudo-elemento pode aparecer por seletor” . A nota diz que isso pode estar sujeito a mudanças, mas a partir de 2012 eu não acredito que vejamos nenhum comportamento diferente no futuro ( ainda está no CSS4 ).

Exemplo

O exemplo a seguir adicionará uma tag de idioma a cada citação em uma determinada página usando a pseudo-class :lang e o pseudoelemento ::after :

 q:lang(de)::after{ content: " (German) "; } q:lang(en)::after{ content: " (English) "; } q:lang(fr)::after{ content: " (French) "; } q:not(:lang(fr)):not(:lang(de)):not(:lang(en))::after{ content: " (Unrecognized language) "; } 

TL; DR

Pseudo-classs atuam como seletores simples em uma sequência de seletores e, portanto, classificam elementos em características não-presentes, pseudo-elementos criam novos elementos virtuais.

Referências

W3C

  • Seletores de Nível 3
    • 4. Sintaxe do Seletor
    • 6,6 pseudo-classs
    • 7. Pseudo-elementos
  • CSS 2.1 Specification (desatualizado, mas ainda assim informativo)
    • 5.2 Sintaxe do Seletor :

      Um seletor simples é um seletor de tipo ou seletor universal seguido imediatamente por zero ou mais seletores de atributos, seletores de ID ou pseudo-classs, em qualquer ordem. O seletor simples corresponde se todos os seus componentes coincidirem.

    • 5.10 Pseudo-elementos e pseudo-classs

Uma pseudo-class filtra os elementos existentes.
a:link significa todos os s que são :link .

Um pseudoelemento é um novo elemento falso.
div::after significa elementos inexistentes depois de

s.

::selection é outro exemplo de pseudoelemento.
Isso não significa todos os elementos selecionados; significa o intervalo de conteúdo selecionado, que pode se estender por partes de vários elementos.

Breve descrição que me ajudou a entender a diferença:

  • Pseudo-classs descrevem um estado especial.
  • Pseudo-elementos correspondem a elementos virtuais.

Dos documentos do Sitepoint:

Uma pseudo-class é semelhante a uma class em HTML, mas não é especificada explicitamente na marcação. Algumas pseudo-classs são dinâmicas – elas são aplicadas como resultado da interação do usuário com o documento. – http://reference.sitepoint.com/css/pseudoclasss . Estas seriam coisas como :hover, :active, :visited .

Pseudo-elementos correspondem a elementos virtuais que não existem explicitamente na tree do documento. Pseudo-elementos podem ser dynamics, na medida em que os elementos virtuais que eles representam podem mudar, por exemplo, quando a largura da janela do navegador é alterada. Eles também podem representar conteúdo gerado por regras de CSS. – http://reference.sitepoint.com/css/pseudoelements . Estas seriam coisas como before, :after, :first-letter .

Uma resposta conceitual:

  • Um pseudo-elemento refere-se a coisas que fazem parte do documento, mas você ainda não sabe. Por exemplo, a primeira letra. Antes você só tinha texto. Agora você tem uma primeira carta que você pode segmentar. É um conceito novo, mas sempre fez parte do documento. Isso também inclui coisas como ::before ; enquanto não há conteúdo real lá, o conceito de algo antes de outra coisa sempre esteve lá – agora você está especificando.

  • Uma pseudo-class é o estado de algo no DOM. Assim como uma class é uma tag que você associa a um elemento, uma pseudo-class é uma class associada ao navegador ou DOM ou qualquer outra, geralmente como uma resposta a uma mudança no estado. Quando um usuário visita um link – esse link pode assumir o estado de ‘visitado’. Você pode imaginar o navegador aplicando a class ‘visited’ ao elemento Âncora. :visited seria então como você seleciona para essa pseudo-class.

Pseudoclass

Uma pseudo-class é a maneira de selecionar certas partes de um documento HTML, baseado em princípio não na própria tree de documentos HTML e seus elementos ou em características como nome, atributos ou conteúdos, mas em outras condições fantasmas como codificação de linguagem ou estado dynamic. de um elemento.

A pseudo class original definiu estados dynamics de um elemento que são inseridos e encerrados ao longo do tempo ou por meio da intervenção do usuário. O CSS2 expandiu esse conceito para include componentes de documentos conceituais virtuais ou partes inferidas da tree de documentos, por exemplo, primogênito. Pseudoclasss operam como se classs fantasmas fossem adicionadas a vários elementos.

RESTRIÇÕES: Ao contrário dos pseudo-elementos, pseudo-classs podem aparecer em qualquer lugar na cadeia de seletores.

Exemplo de código de pseudo-class:

 a:link /* This selects any "a" element whose target has not been visited.*/ { padding : 4px; text-decoration : none; width : 10%; color : #000000; /* black text color */ background-color : #99FF99; /* set to a pastel green */ border-top : 2px solid #ccffcc; /* highlight color */ border-left : 2px solid #ccffcc; /* highlight color */ border-bottom : 2px solid #003300; /* shadow color */ border-right : 2px solid #003300; /* shadow color */ } a:visited /* This selects any "a" element whose target has been visited.*/ { padding : 4px; text-decoration : none; color : #000000; /* black text color */ background-color : #ccccff; /* set to a lavender */ border-top : 2px solid #ffffff; /* highlight color */ border-left : 2px solid #ffffff; /* highlight color */ border-bottom : 2px solid #333366; /* shadow color * border-right : 2px solid #333366; /* shadow color */ } a:hover /* This selects any "a" element which is in a hover state. This is a state during pointer movement within the rendering region of an element. The user designates an element but does not activate it. */ { color : #000000; /* black text color */ background-color : #99cc99; /* desaturated color */ border-top : 2px solid #003300; /* shadow color */ border-left : 2px solid #003300; /* shadow color */ border-bottom : 2px solid #ccffcc; /* highlight color */ border-right : 2px solid #ccffcc; /* highlight color */ } a:focus /* This selects any "a" element which currently has focus. Focus is a state during which an element accepts keyboard input or other forms of text input. */ { padding : 4px; text-decoration : none; width : 10%; color : #000000; /* black text color */ background-color : #ffff99; /* set to a pastel yellow */ border-top : 2px solid #ffffcc; /* highlight color */ border-left : 2px solid #ffffcc; /* highlight color */ border-bottom : 2px solid #666633; /* shadow color */ border-right : 2px solid #666633; /* shadow color */ } a:active /* This selects any "a" element which is in a state of activation. Active is a state during pointer activation (eg: press and release of a mouse) within the rendering region of an element.*/ { padding : 4px; text-decoration : none; width : 10%; color : #000000; /* black text color */ background-color : #ff99ff; /* set to a pink */ border-top : 2px solid #ffccff; /* highlight color */ border-left : 2px solid #ffccff; /* highlight color */ border-bottom : 2px solid #663366; /* shadow color */ border-right : 2px solid #663366; /* shadow color */ } 

Uma página que demonstra uma renderização do código de pseudoclass acima

Pseudo-elementos

PSEUDO-ELEMENTS são usados ​​para endereçar sub-partes de elementos. Eles permitem que você defina o estilo em uma parte do conteúdo de um elemento além do especificado nos documentos. Em outras palavras, eles permitem que elementos lógicos sejam definidos, os quais não estão realmente na tree de elementos do documento. Elementos lógicos permitem que estruturas semânticas implícitas sejam tratadas em seletores CSS.

RESTRIÇÕES: Os pseudo-elementos só podem ser aplicados a contextos externos e de nível de documento – não a estilos in-line. Pseudo-elementos são restritos em onde eles podem aparecer em uma regra. Eles só podem aparecer no final de uma cadeia de seletores (depois do assunto do seletor). Eles devem vir depois que qualquer nome de class ou ID encontrado no seletor. Apenas um pseudoelemento pode ser especificado por seletor. Para endereçar vários pseudoelementos em uma única estrutura de elemento, várias instruções de seleção / declaração de estilo devem ser feitas.

Pseudo-elementos podem ser usados ​​para efeitos tipocharts comuns, como limites iniciais e capitulares. Eles também podem endereçar conteúdo gerado que não está no documento de origem (com o “antes” e “depois”). Uma folha de estilo de exemplo de alguns pseudo-elementos com propriedades e valores adicionados a seguir.

/ * A regra a seguir seleciona a primeira letra de um título 1 e define a fonte como 2em, cursiva, com um fundo verde. Primeira letra seleciona a primeira letra / caractere renderizada para um elemento de nível de bloco. * /

 h1:first-letter { font-size : 2em; font-family : "Lucida Handwriting", "Lucida Sans", "Lucida Console", cursive; background-color : #ccffcc; } /* The following rule selects the first displayed line in a paragraph and makes it bold. First-line selects the first rendered line on the output device of a block-level element. */ p:first-line { font-weight : bold; } /* The following rule selects any content placed before a blockquote and inserts the phrase "Quote of the day:" in bold small caps with a green background. */ blockquote:before { content : "Quote of the day:"; background-color : #ccffcc; font-weight : bold; font-variant : small-caps; } /* The following rule selects any content placed before a "q" element and inserts the smart open quote. */ q:before { content : open-quote; } /* The following rule selects any content placed after a "q" element and inserts the smart close quote. */ q:after{ content : close-quote; } 

Fontes: Link

Abaixo está a resposta simples:

Usamos pseudo-class quando precisamos aplicar o css com base no estado de um elemento. Tal como:

  1. Aplicar css no hover do elemento de âncora ( :hover )
  2. Aplica css quando recebe foco em um elemento html ( :focus ). etc.

Usamos o pseudoelemento quando precisamos aplicar o css às partes específicas de um elemento ou a um conteúdo recém- inserido . Tal como:

  1. Aplique o css à primeira letra ou primeira linha de um elemento ( ::first-letter )
  2. Inserir conteúdo antes ou depois do conteúdo de um elemento ( ::before , ::after )

Abaixo está o exemplo de ambos:

      This is a link 

This is a paragraph.

Em resumo, de Pseudo-classs no MDN:

Uma pseudo-class CSS é uma palavra-chave adicionada a um seletor que especifica um estado especial do (s) elemento (s) selecionado (s). Por exemplo :hover pode ser usado para aplicar um estilo quando o usuário passa o mouse sobre um botão.

 div: hover {
   cor de fundo: # F89B4D;
 }

E, de pseudo-elementos no MDN:

Um pseudoelemento CSS é uma palavra-chave adicionada a um seletor que permite estilizar uma parte específica do (s) elemento (s) selecionado (s). Por exemplo, ::first-line pode ser usada para estilizar a primeira linha de um parágrafo.

 / * A primeira linha de todos os elementos 

. * / p :: primeira linha { cor azul; text-transform: maiúscula; }