Existe alguma diferença funcional entre os pseudo-seletores CSS 2.1 :after
e CSS 3 ::after
(além de ::after
não ser suportado em navegadores antigos)? Existe algum motivo prático para usar a especificação mais recente?
Existe alguma diferença funcional entre os pseudo-seletores CSS 2.1 :after
e CSS 3 ::after
(além de ::after
não ser suportado em navegadores antigos)? Existe algum motivo prático para usar a especificação mais recente?
Respostas:
É distinção pseudo- classe vs pseudo- elemento .
Exceto para ::first-line
, ::first-letter
, ::before
e ::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-child
ou :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 :hover
e :focus
.)
Os pseudoelementos têm como alvo uma subparte de um elemento como ::first-line
or ::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 /
:after
e de forma ::after
intercambiável com comportamento idêntico, com exceção do IE8, que, como a pergunta observa, requer dois pontos únicos.
Os seletores CSS, como ::after
alguns 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).