139 votes

:after vs. ::after

Existe-t-il une différence fonctionnelle entre la norme CSS 2.1 :after et le CSS 3 ::after pseudo-sélecteurs (autres que ::after n'étant pas pris en charge par les anciens navigateurs) ? Y a-t-il une raison pratique d'utiliser la spécification la plus récente ?

141voto

Dominic Points 722

C'est un pseudo classe vs pseudo- élément distinction.

Sauf pour ::first-line , ::first-letter , ::before y ::after (qui existent depuis un certain temps et qui peuvent être utilisés avec des points de suspension si vous avez besoin de la prise en charge d'IE8), les pseudo- éléments exiger deux points.

Pseudo-classes sélectionner les éléments eux-mêmes, vous pouvez utiliser :first-child o :nth-of-type(n) pour sélectionner le premier ou le spécifique <p> dans un div, par exemple.
(Et aussi les états des éléments réels comme :hover y :focus .)

Pseudo-éléments cibler une sous-partie d'un élément comme ::first-line o ::first-letter des choses qui ne sont pas des éléments à part entière.


En fait, une meilleure description ici : http://bricss.net/post/10768584657/know-your-lingo-pseudo-class-vs-pseudo-element
Également ici : http://www.evotech.net/blog/2007/05/after-v-after-what-is-double-colon-notation/

6 votes

C'est en raison de cette distinction que le terme "pseudo-sélecteur" (de la question) n'a pas de sens. Ne l'utilisez jamais.

1 votes

À moins que vous ne parliez des deux. ou en termes génériques.

1 votes

C'est une excellente explication de la théorie, mais a-t-elle une incidence sur la question pratique ? Y a-t-il réellement un avantage à utiliser la spécification css3 étant donné que la css2 fera le même travail - dans plus de navigateurs ?

19voto

saeed serpooshan Points 356

Sélecteurs CSS comme ::after sont des éléments virtuels qui ne sont pas disponibles en tant qu'éléments explicites dans l'arbre DOM. Ils sont appelés " Pseudo-éléments " et sont utilisés pour insérer un contenu avant/après un élément (ex : ::before , ::after ) ou, sélectionnez une partie d'un élément (par exemple ::first-letter ). Actuellement, il n'y a que 5 pseudo-éléments standard : after, before, first-letter, first-line, selection .

D'autre part, il existe d'autres types de sélecteurs appelés " Pseudo-classes "qui sont utilisés pour définir une état spécial d'un élément (comme :hover , :focus , :nth-child(n) ). Elles sélectionnent l'ensemble d'un élément existant dans le DOM. Les pseudo-classes sont une longue liste avec plus de 30 éléments.

Initialement (dans CSS2 et CSS1), la syntaxe du point-virgule unique était utilisée à la fois pour les pseudo-classes et les pseudo-éléments. Mais, dans CSS3, la :: a remplacé la syntaxe : notation des pseudo-éléments pour mieux les distinguer.

Pour des raisons de rétrocompatibilité, l'ancienne syntaxe à un seul point virgule est acceptable pour les pseudo-éléments tels que :after (les navigateurs supportent encore tous l'ancienne syntaxe avec un point-virgule). Seul IE-8 ne supporte pas la nouvelle syntaxe (utilisez un seul point-virgule si vous voulez supporter IE8).

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X