Qual é a diferença entre uma pseudoclasse e um pseudoelemento em CSS?


93

Coisas como a:linkou div::after...

Informações sobre a diferença parecem escassas.


1
@ ŠimeVidas para qual post? ligação?
tybro0103

1
Acho que as especificações são bem claras ...
zzzzBov

1
@ tybro0103 Não encontrei nenhum. Acho que isso de fato nunca foi perguntado aqui ... No entanto, achei isso: stackoverflow.com/questions/7757943/what-is-a-pseudo-element
Šime Vidas

@zzzzBov Sinto que preciso de um tradutor para entender isso :)
tybro0103

Obrigado por postar esta pergunta. Não sei por que não pensei em postar depois de minha recente blitzkrieg sobre perguntas com a tag [pseudo-seletor] ...
BoltClock

Respostas:


79

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

Pseudo-classes

Descrição oficial

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

Uma pseudoclasse sempre consiste em "dois pontos" ( :) seguido pelo nome da pseudoclasse e, opcionalmente, por um valor entre parênteses.

Pseudo-classes são permitidas em todas as sequências de seletores simples contidos em um seletor. Pseudo-classes são permitidas em qualquer lugar em sequências de seletores simples, após o seletor de tipo principal ou seletor universal (possivelmente omitido). Os nomes das pseudoclasses não diferenciam maiúsculas de minúsculas. Algumas pseudoclasses são mutuamente exclusivas, enquanto outras podem ser aplicadas simultaneamente ao mesmo elemento. As pseudoclasses podem ser dinâmicas, no sentido de que um elemento pode adquirir ou perder uma pseudoclasse enquanto o usuário interage com o documento.

Fonte

O que isto significa?

A natureza importante das pseudo-classes é afirmada na primeira frase: "o conceito de pseudo-classe [...] permite a seleção " . Ele permite que o autor de uma folha de estilo diferencie os elementos com base nas informações que "estão fora da árvore do documento" , por exemplo, o status atual de um link ( :active, :visited). Eles não são salvos em nenhum lugar no DOM e não existe uma interface DOM para acessar essas opções.

Por outro lado, :targetpode ser acessado via manipulação DOM (você pode usar window.location.hashpara encontrar o objeto com JavaScript), mas isso "não pode ser expresso usando os outros seletores simples" .

Então, basicamente, uma pseudo-classe 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 uma lista completa de pseudo-classes, verifique a recomendação do seletor CSS3.

Exemplo

O exemplo a seguir irá colorir todas as linhas pares de cinza ( #ccc), todas as linhas irregulares que não são divisíveis por 5 de branco e todas as outras linhas de 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 pseudoelementos criam abstrações sobre a árvore do documento além daquelas especificadas pela linguagem do documento. Por exemplo, as linguagens dos documentos não oferecem mecanismos para acessar a primeira letra ou a primeira linha do conteúdo de um elemento. Os pseudoelementos permitem que os autores se refiram a essas informações de outra forma inacessíveis. Pseudo-elementos podem também fornecer autores uma maneira de se referir ao conteúdo que não existe no documento de origem (por exemplo, o ::beforee ::afterpseudo-elementos acesso a conteúdo gerado dar).

Um pseudoelemento é formado por dois pontos ( ::) seguidos do nome do pseudoelemento.

Esta ::notação é introduzida pelo documento atual com o objetivo de estabelecer uma discriminação entre pseudo-classes e pseudo-elementos. Para compatibilidade com folhas de estilo existentes, os agentes do usuário também devem aceitar a notação anterior de um dois-pontos para pseudo-elementos introduzidos nos níveis 1 e 2 do CSS (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 pseudo-elemento pode aparecer por seletor, e se estiver presente deve aparecer após a sequência de seletores simples que representam 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 de outra forma inacessíveis " e que "também podem fornecer aos autores uma maneira de se referir a conteúdo que não existe no documento de origem (por exemplo, o ::beforee os ::afterpseudo-elementos dão acesso 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 pseudoclasse podem ser aplicados. Eles não filtram elementos, eles basicamente filtram conteúdo ( ::first-line, ::first-letter) e o envolvem em um contêiner virtual, que o autor pode estilizar como quiser (bem, quase).

Por exemplo, o ::first-linepseudo-elemento não pode ser reconstruído com JavaScript, pois depende muito da fonte usada atualmente, do tamanho das fontes, da largura dos elementos, dos elementos flutuantes (e provavelmente da hora do dia). Bem, isso não é totalmente verdade: ainda se pode calcular todos esses valores e extrair a primeira linha, no entanto, fazer isso é uma atividade muito complicada.

Acho que a maior diferença é que "apenas um pseudo-elemento pode aparecer por seletor" . A nota diz que isso pode estar sujeito a alterações, mas a partir de 2012 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 pseudoclasse :lange 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

As pseudo-classes atuam como seletores simples em uma sequência de seletores e, assim, classificam os elementos em características não-apresentacionais, os pseudo-elementos criam novos elementos virtuais.

Referências

W3C


4
Eu concordo com o comentário de DanMan sobre a resposta de SLaks em que as pseudo-classes não agem realmente como "filtros", mas mais como "descritores". Por exemplo, :not(.someclass):nth-child(even)não significa filtrar os elementos que não possuem .someclass, e entre os elementos restantes filtrar as ocorrências pares. Em vez disso, representa qualquer elemento que é tanto :not(.someclass) e :nth-child(even) de seu pai, ao mesmo tempo. Explicações mais detalhadas podem ser encontradas nesta e nesta resposta .
BoltClock

2
@BoltClock: Eu acredito que gosto mais do termo "classificador de características" , já que é assim que eles foram originalmente descritos como no CSS2: "Pseudo-classes classificam elementos em características diferentes de seu nome" . No entanto, ainda não encontrei o texto exato com o qual estou satisfeito.
Zeta

42

Uma pseudoclasse filtra os elementos existentes.
a:linksignifica todos os <a>que são :link.

Um pseudoelemento é um novo elemento falso.
div::aftersignifica elementos não existentes após <div>s.

::selectioné outro exemplo de um pseudoelemento.
Isso não significa todos os elementos selecionados; significa o intervalo de conteúdo selecionado, que pode abranger porções de vários elementos.


12
+1 embora tecnicamente div::afterseja filho de div, ocorrendo depois de seu conteúdo e não do próprio elemento.
BoltClock

1
Em vez de "filtros", diria "descreve melhor".
DanMan

17

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

  • As pseudo classes descrevem um estado especial.
  • Pseudoelementos correspondem a elementos virtuais.

10

Dos documentos do Sitepoint:

Uma pseudoclasse é semelhante a uma classe em HTML, mas não é especificada explicitamente na marcação. Algumas pseudoclasses são dinâmicas - são aplicadas como resultado da interação do usuário com o documento. - http://reference.sitepoint.com/css/pseudoclasses . Essas seriam coisas assim :hover, :active, :visited.

Os pseudoelementos correspondem a elementos virtuais que não existem explicitamente na árvore do documento. Os pseudoelementos podem ser dinâmicos, visto que os elementos virtuais que representam podem mudar, por exemplo, quando a largura da janela do navegador é alterada. Eles também podem representar o conteúdo gerado por regras CSS. - http://reference.sitepoint.com/css/pseudoelements . Essas seriam coisas assim before, :after, :first-letter.


6

Uma resposta conceitual:

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

  • Uma pseudoclasse é o estado de algo no DOM. Assim como uma classe é uma tag que você associa a um elemento, uma pseudoclasse é uma classe que é associada pelo navegador ou DOM ou qualquer outro, geralmente como uma resposta a uma mudança de estado. Quando um usuário visita um link - esse link pode assumir o estado de 'visitado'. Você pode imaginar o navegador aplicando a classe 'visitada' ao elemento Âncora.:visitedseria então como você seleciona para aquela pseudoclasse.


6

Abaixo está a resposta simples:

Usamos a pseudoclasse quando precisamos aplicar css com base no estado de um elemento. Tal como:

  1. Aplicar css ao passar o mouse sobre o elemento âncora (:hover )
  2. Aplique css quando obtiver o foco em um elemento html ( :focus). etc.

Usamos o pseudoelemento quando precisamos aplicar 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. Insira o conteúdo antes ou depois do conteúdo de um elemento ( ::before, ::after)

Abaixo está o exemplo de ambos:

<html>

 <head>
   <style>
   p::first-letter {  /* pseudo-element */
     color: #ff0000;
   }

   a:hover {          /* pseudo-class */
     color: red;      
   }
   </style>
 </head>

 <body>
   <a href="#" >This is a link</a>
   <p>This is a paragraph.</p>
 </body>

</html>

4

Pseudo-classe

Uma pseudoclasse é uma forma de selecionar certas partes de um documento HTML, com base, em princípio, não na própria árvore do documento HTML e seus elementos ou em características como nome, atributos ou conteúdo, mas em outras condições fantasmas, como codificação de linguagem ou estado dinâmico de um elemento.

A pseudoclasse original definiu os estados dinâmicos de um elemento que são inseridos e encerrados ao longo do tempo ou por meio da intervenção do usuário. CSS2 expandiu este conceito para incluir componentes de documentos conceituais virtuais ou partes inferidas da árvore de documentos, por exemplo, primeiro filho. As pseudo classes operam como se classes fantasmas fossem adicionadas a vários elementos.

RESTRIÇÕES: Ao contrário dos pseudo-elementos, as pseudo-classes podem aparecer em qualquer lugar na cadeia do seletor.

Exemplo de código de pseudoclasse:

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 da pseudoclasse acima

Pseudo-elementos

PSEUDO-ELEMENTS são usados ​​para endereçar subpartes de elementos. Eles permitem que você defina o estilo de uma parte do conteúdo de um elemento além do que está especificado nos documentos. Em outras palavras, eles permitem a definição de elementos lógicos que não estão realmente na árvore de elementos do documento. Os elementos lógicos permitem que a estrutura semântica implícita seja tratada nos seletores CSS.

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

Pseudoelementos podem ser usados ​​para efeitos tipográficos comuns, como capitulações iniciais e capitulares. Eles também podem abordar o conteúdo gerado que não está no documento de origem (com "antes" e "depois"). Segue-se um exemplo de folha de estilo de alguns pseudoelementos com propriedades e valores adicionados.

/ * A regra a seguir seleciona a primeira letra de um título 1 e define a fonte como 2em, cursiva, com fundo verde. A primeira letra seleciona a primeira letra / caractere renderizado 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


0

Em resumo, das Pseudo-classes no MDN:

Uma pseudoclasse 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, a partir de Pseudo-elementos no MDN:

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

/ * A primeira linha de cada elemento <p>. * /
p :: primeira linha {
 cor azul;
 transformação de texto: maiúsculas;
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.