: depois vs. :: depois

133

Existe alguma diferença funcional entre os pseudo-seletores CSS 2.1 :aftere CSS 3 ::after(além de ::afternão ser suportado em navegadores antigos)? Existe algum motivo prático para usar a especificação mais recente?

css css-selectors pseudo-element pseudo-class Parker Ault
fonte

Respostas:

132

É distinção pseudo- classe vs pseudo- elemento .

Exceto para ::first-line, ::first-letter, ::beforee ::after(que foram em torno de um pouco e pode ser usado com dois pontos de solteiro, se você precisar de suporte IE8), pseudo- elementos requerem dois pontos duplos.

As pseudo-classes selecionam os elementos reais em si, você pode usar :first-childou :nth-of-type(n)para selecionar o primeiro ou o específico de <p>uma div, por exemplo.
(E também estados de elementos reais como :hovere :focus.)

Os pseudoelementos têm como alvo uma subparte de um elemento como ::first-lineor ::first-letter, coisas que não são elementos por si só.

Na verdade, melhor descrição aqui: http://bricss.net/post/10768584657/know-your-lingo-pseudo-class-vs-pseudo-element
Também aqui: http://www.evotech.net/blog/2007/ 05 / notação depois de v após o que é duplo-cólon /

Dominic
fonte

É por causa dessa distinção que "pseudo-seletor" (da pergunta) é um termo sem sentido. Não use, nunca.

BoltClock

a menos que você esteja falando sobre os dois. ou em termos genéricos.

albert

Essa é uma ótima explicação da teoria, mas isso tem relação com a questão prática? Existe realmente algum benefício em usar a especificação css3, sendo que o css2 fará o mesmo trabalho - em mais navegadores?

DRosenfeld 24/02

@ Obrigado Dominic - Agradeço o seu endereço meu comentário. Não há dúvida de que a questão do suporte para (pelo menos isso) a tag CSS3 já é quase um problema.

DRosenfeld 25/02

@ BorisD.Teoharov Especificamente, você pode usar :aftere de forma ::afterintercambiável com comportamento idêntico, com exceção do IE8, que, como a pergunta observa, requer dois pontos únicos.

Dominic

Os seletores CSS, como ::afteralguns elementos virtuais, não estão disponíveis como um elemento explícito na árvore DOM. Eles são chamados de " pseudo-elementos " e são utilizadas para inserir algum conteúdo antes / depois de um elemento (por exemplo: ::before, ::after) ou, seleccionar uma parte de um elemento (por exemplo: ::first-letter). Atualmente há apenas 5 elementos pseudo padrão: after, before, first-letter, first-line, selection.

Por outro lado, há outros tipos de selectores denominados " pseudo-classes ", que são utilizadas para definir um estado especial de um elemento (tal como como :hover, :focus, :nth-child(n)). Isso selecionará todo um elemento existente no DOM. As pseudo classes são uma lista longa com mais de 30 itens.

Inicialmente (em CSS2 e CSS1), a sintaxe de dois pontos foi usada para pseudo-classes e pseudo-elementos. Mas, no CSS3, a ::sintaxe substituiu a :notação de pseudo-elementos para melhor distingui-los.

Para compatibilidade com versões anteriores, a sintaxe antiga de dois pontos é aceitável para pseudoelementos como as :after(os navegadores ainda suportam a sintaxe antiga com um ponto e vírgula). Somente o IE-8 não suporta a nova sintaxe (use dois pontos, se desejar oferecer suporte ao IE8).

S.Serpooshan
fonte