: après vs :: après

134

Y a-t-il une différence fonctionnelle entre les pseudo-sélecteurs CSS 2.1 :afteret CSS 3 ::after(autre que ::afterne pas être pris en charge dans les navigateurs plus anciens)? Y a-t-il une raison pratique d'utiliser la nouvelle spécification?

css css-selectors pseudo-element pseudo-class Parker Ault
la source

Réponses:

133

C'est la distinction entre pseudo- classes et pseudo- éléments .

À l' exception de ::first-line, ::first-letter, ::beforeet ::after(qui ont été autour d' un peu de temps et peut être utilisé avec un seul si vous côlons besoin d' aide IE8), pseudo- éléments nécessitent des deux - points.

Les pseudo-classes sélectionnent elles-mêmes les éléments réels, vous pouvez utiliser :first-childou :nth-of-type(n)pour sélectionner le premier ou le spécifique <p>dans un div, par exemple.
(Et aussi des états d'éléments réels comme :hoveret :focus.)

Les pseudo-éléments ciblent une sous-partie d'un élément comme ::first-lineou ::first-letter, des choses qui ne sont pas des éléments à part entière.

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

Dominique
la source

C'est à cause de cette distinction que «pseudo-sélecteur» (de la question) est un terme absurde. Ne l'utilisez jamais.

BoltClock

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

albert

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

DRosenfeld

@Dominic merci - J'apprécie votre réponse à mon commentaire. Il ne fait aucun doute que le problème de la prise en charge de (au moins cette) balise CSS3 est presque un problème pour le moment.

DRosenfeld

@ BorisD.Teoharov Plus précisément, vous pouvez utiliser :afteret de ::aftermanière interchangeable avec un comportement identique à l'exception d'IE8 qui, comme le note la question, nécessite le simple deux-points.

Dominic

Les sélecteurs CSS comme ::aftercertains éléments virtuels ne sont pas disponibles en tant qu'élément explicite dans l'arborescence DOM. Ils sont appelés « pseudo-éléments » et sont utilisés pour insérer une partie du contenu avant / après un élément (par exemple: ::before, ::after) ou de sélectionner une partie d'un élément (par exemple: ::first-letter). À l' heure actuelle il n'y a que 5 éléments pseudo 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 un état particulier d'un élément (comme comme :hover, :focus, :nth-child(n)). Celles-ci sélectionneront l'ensemble d'un élément existant dans DOM. Les pseudo-classes sont une longue liste de plus de 30 éléments.

Initialement (en CSS2 et CSS1), la syntaxe à simple deux-points était utilisée à la fois pour les pseudo-classes et les pseudo-éléments. Mais, en CSS3, la ::syntaxe a remplacé la :notation des pseudo-éléments pour mieux les distinguer.

Pour des raisons de compatibilité ascendante, l'ancienne syntaxe à simple deux-points est acceptable pour les pseudo-éléments comme as :after(les navigateurs prennent toujours en charge l'ancienne syntaxe avec un point-virgule). Seul IE-8 ne prend pas en charge la nouvelle syntaxe (utilisez des points simples si vous souhaitez prendre en charge IE8).

S.Serpooshan
la source