Quelle est la différence entre une pseudo-classe et un pseudo-élément en CSS ?

Question

Des choses comme a:link ou div::after ...

Les informations sur cette différence semblent rares.

Answer 1

Le Recommandation sur les sélecteurs CSS 3 est assez clair à ce sujet, mais je vais quand même essayer de montrer les différences.

Pseudo-classes

Description officielle

Le concept de pseudo-classe est introduit pour permettre une sélection basée sur des informations qui se trouvent en dehors de l'arborescence du document ou qui ne peuvent pas être exprimées à l'aide des autres sélecteurs simples.

Une pseudo-classe se compose toujours d'un "deux-points" ( : ) suivi du nom de la pseudo-classe et éventuellement d'une valeur entre parenthèses.

Les pseudo-classes sont autorisées dans toutes les séquences de sélecteurs simples contenues dans un sélecteur. Les pseudo-classes sont autorisées partout dans les séquences de sélecteurs simples, après le sélecteur de type principal ou le sélecteur universel (éventuellement omis). Les noms des pseudo-classes ne sont pas sensibles à la casse. Certaines pseudo-classes s'excluent mutuellement, tandis que d'autres peuvent être appliquées simultanément à un même élément. Les pseudo-classes peuvent être dynamiques, en ce sens qu'un élément peut acquérir ou perdre une pseudo-classe lorsque l'utilisateur interagit avec le document.

Source

Qu'est-ce que cela signifie ?

La nature importante des pseudo-classes est énoncée dans la toute première phrase : "le concept de pseudo-classe [...] sélection des permis " . Il permet à l'auteur d'une feuille de style de différencier les éléments sur la base d'informations qui "se trouve en dehors de l'arborescence du document" par exemple l'état actuel d'un lien ( :active , :visited ). Ces options ne sont sauvegardées nulle part dans le DOM, et il n'existe pas d'interface DOM pour y accéder.

D'autre part, :target pourrait être accessible via la manipulation du DOM (vous pourriez utiliser window.location.hash afin de trouver l'objet avec JavaScript), mais cette "ne peut être exprimée à l'aide des autres sélecteurs simples" .

En fait, une pseudo-classe affinera l'ensemble des éléments sélectionnés comme n'importe quelle autre classe. sélecteur simple dans un séquence de sélecteurs simples . Notez que tous les sélecteurs simples d'une séquence de sélecteurs simples seront évalués en même temps. Pour une liste complète des pseudo-classes, consultez la recommandation sur les sélecteurs CSS3.

Ejemplo

L'exemple suivant colorera toutes les lignes paires en gris ( #ccc ), toutes les lignes irrégulières qui ne sont pas divisibles par 5 sont blanches et une ligne sur deux est 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-éléments

Description officielle

Les pseudo-éléments créent des abstractions sur l'arborescence du document au-delà de celles spécifiées par le langage du document. Par exemple, les langages de documents n'offrent pas de mécanismes permettant d'accéder à la première lettre ou à la première ligne du contenu d'un élément. Les pseudo-éléments permettent aux auteurs de se référer à ces informations autrement inaccessibles. Les pseudo-éléments peuvent également permettre aux auteurs de se référer à un contenu qui n'existe pas dans le document source (par exemple, l'élément ::before y ::after les pseudo-éléments donnent accès au contenu généré).

Un pseudo-élément est constitué de deux deux-points ( :: ) suivi du nom du pseudo-élément.

Le présent :: est introduite dans le présent document afin d'établir une distinction entre les pseudo-classes et les pseudo-éléments. Pour des raisons de compatibilité avec les feuilles de style existantes, les agents utilisateurs doivent également accepter l'ancienne notation à un point pour les pseudo-éléments introduite dans les niveaux CSS 1 et 2 (à savoir :first-line, :first-letter, :before et :after). Cette compatibilité n'est pas autorisée pour les nouveaux pseudo-éléments introduits dans cette spécification.

Un seul pseudo-élément peut apparaître par sélecteur et, s'il est présent, il doit apparaître après la séquence de sélecteurs simples qui représente les sujets du sélecteur.

Note : Une future version de cette spécification pourrait autoriser plusieurs pseudo-éléments par sélecteur.

Source

Qu'est-ce que cela signifie ?

Le plus important est que "Les pseudo-éléments permettent aux auteurs de renvoient à [ ] des informations autrement inaccessibles " et qu'ils "peut également permettre aux auteurs de se référer à un contenu qui n'existe pas dans le document source (par ex. ::before y ::after les pseudo-éléments donnent accès au contenu généré). ". La plus grande différence est qu'ils créent en fait un nouvel élément virtuel sur lequel des règles et même des sélecteurs de pseudo-classe peuvent être appliqués. Ils ne filtrent pas les éléments, ils filtrent essentiellement le contenu ( ::first-line , ::first-letter ) et l'envelopper dans un conteneur virtuel, que l'auteur peut styliser à sa guise (enfin, presque).

Par exemple, le ::first-line ne peut pas être reconstruit avec JavaScript, car il dépend fortement de la police utilisée, de la taille des polices, de la largeur des éléments, des éléments flottants (et probablement de l'heure de la journée). Ce n'est pas tout à fait vrai : on peut toujours calculer toutes ces valeurs et extraire la première ligne, mais c'est une activité très lourde.

Je pense que la plus grande différence est que "un seul pseudo-élément peut apparaître par sélecteur" . La note précise que cela pourrait changer, mais en 2012, je ne pense pas qu'il y ait de changement de comportement à l'avenir ( c'est toujours en CSS4 ).

Ejemplo

L'exemple suivant ajoute une balise de langue à chaque citation d'une page donnée en utilisant la pseudo-classe :lang et le pseudo-élément ::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

Les pseudo-classes agissent comme de simples sélecteurs dans une séquence de sélecteurs et classent ainsi les éléments sur la base de caractéristiques non présentationnelles, tandis que les pseudo-éléments créent de nouveaux éléments virtuels.

Références

W3C

• Sélecteurs Niveau 3
  • 4. Syntaxe du sélecteur
  • 6.6 Pseudo-classes
  • 7. Pseudo-éléments

• Spécification CSS 2.1 (dépassée mais toujours informative)

  • 5.2 Syntaxe du sélecteur :

    Un sélecteur simple est un sélecteur de type ou un sélecteur universel suivi immédiatement par zéro ou plusieurs sélecteurs d'attributs, sélecteurs d'ID ou pseudo-classes, dans n'importe quel ordre. Le sélecteur simple correspond si tous ses composants correspondent.

  • 5.10 Pseudo-éléments et pseudo-classes

Answer 2

Une pseudo-classe filtre les éléments existants.
a:link signifie tous <a> qui sont :link .

Un pseudo-élément est un nouvel élément fictif.
div::after signifie qu'il n'y a pas d'éléments existants après <div> s.

::selection est un autre exemple de pseudo-élément.
Il ne s'agit pas de tous les éléments sélectionnés, mais de la plage de contenu sélectionnée, qui peut s'étendre sur des portions de plusieurs éléments.

Answer 3

Brève description qui m'a aidé à comprendre la différence :

• Les pseudo-classes décrivent un état particulier.
• Les pseudo-éléments correspondent à des éléments virtuels.

Answer 4

La réponse est simple :

Nous utilisons pseudo-classe lorsque nous avons besoin d'appliquer des css en fonction de l'élément État d'un élément. Par exemple :

1. Appliquer le css au survol de l'élément d'ancrage ( :hover )
2. Appliquer les css lorsque le focus est mis sur un élément html ( :focus ), etc.

Nous utilisons pseudo-élément lorsque nous avons besoin d'appliquer des css à l'élément parties spécifiques d'un élément ou d'une nouvelle contenu inséré . Par exemple :

1. Appliquer le css à la première lettre ou à la première ligne d'un élément ( ::first-letter )
2. Insérer un contenu avant ou après le contenu d'un élément ( ::before , ::after )

Vous trouverez ci-dessous un exemple des deux :

<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>

Answer 5

Extrait de la documentation de Sitepoint :

A pseudo-classe est similaire à une classe en HTML, mais elle n'est pas spécifiée explicitement dans le balisage. Certaines pseudo-classes sont dynamiques, c'est-à-dire qu'elles sont appliquées en fonction de l'interaction de l'utilisateur avec le document. - http://reference.sitepoint.com/css/pseudoclasses . Il s'agirait de choses telles que :hover, :active, :visited .

Pseudo-éléments correspondent à des éléments virtuels qui n'existent pas explicitement dans l'arborescence du document. Les pseudo-éléments peuvent être dynamiques, dans la mesure où les éléments virtuels qu'ils représentent peuvent changer, par exemple, lorsque la largeur de la fenêtre du navigateur est modifiée. Ils peuvent également représenter du contenu généré par des règles CSS. - http://reference.sitepoint.com/css/pseudoelements . Il s'agirait de choses telles que ::before, ::after, ::first-letter .