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

Question 1

Des choses comme a:linkou div::after...

Les informations sur la différence semblent rares.

Question 2

La recommandation du sélecteur CSS 3 est assez claire sur les deux, 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 contenus dans un sélecteur. Les pseudo-classes sont autorisées n'importe où 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 de pseudo-classes sont insensibles à la casse. Certaines pseudo-classes s'excluent mutuellement, tandis que d'autres peuvent être appliquées simultanément au même élément. Les pseudo-classes peuvent être dynamiques, dans le sens où un élément peut acquérir ou perdre une pseudo-classe pendant qu'un utilisateur interagit avec le document.

La source

Qu'est-ce que ça veut dire?

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

Par contre, :targeton peut y accéder via la manipulation DOM (vous pouvez utiliser window.location.hashpour trouver l'objet avec JavaScript), mais cela "ne peut pas être exprimé en utilisant les autres sélecteurs simples" .

Donc, fondamentalement, une pseudo-classe affinera l'ensemble des éléments sélectionnés comme n'importe quel autre sélecteur simple dans une séquence de sélecteurs simples . Notez que tous les sélecteurs simples dans 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 du sélecteur CSS3.

Exemple

L'exemple suivant #ccccolorera toutes les lignes paires en gris ( ), toutes les lignes inégales qui ne peuvent pas être divisées par 5 en blanc et une ligne sur deux en 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 document n'offrent pas de mécanismes pour 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 fournir aux auteurs un moyen de se référer au contenu qui n'existe pas dans le document source (par exemple, ::beforeet ::afterpseudo-éléments donnent accès à un contenu généré).

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

Cette ::notation est introduite par le document courant afin d'établir une discrimination entre pseudo-classes et pseudo-éléments. Pour la compatibilité avec les feuilles de style existantes, les agents utilisateurs doivent également accepter la notation précédente à un deux points pour les pseudo-éléments introduits dans les niveaux CSS 1 et 2 (à savoir,: première ligne,: première lettre,: avant et: après). 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.

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

La source

Qu'est-ce que ça veut dire?

La partie la plus importante ici est que "les pseudo-éléments permettent aux auteurs de se référer à [..] des informations autrement inaccessibles " et qu'ils "peuvent également fournir aux auteurs un moyen de faire référence à un contenu qui n'existe pas dans le document source (par exemple, le ::beforeet les ::afterpseudo-é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-classes peuvent être appliqués. Ils ne filtrent pas les éléments, ils filtrent essentiellement le contenu ( ::first-line, ::first-letter) et l'enveloppent dans un conteneur virtuel, que l'auteur peut styliser comme il le souhaite (enfin, presque).

Par exemple, le ::first-linepseudo-élément ne peut pas être reconstruit avec JavaScript, car il dépend fortement de la police actuellement 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). Eh bien, ce n'est pas tout à fait vrai: on pourrait toujours calculer toutes ces valeurs et extraire la première ligne, mais cela est une activité très lourde.

Je suppose que la plus grande différence est que "un seul pseudo-élément peut apparaître par sélecteur" . La note dit que cela pourrait être sujet à changement, mais à partir de 2012, je ne pense pas que nous voyions un comportement différent à l'avenir ( c'est toujours en CSS4 ).

Exemple

L'exemple suivant ajoutera une balise de langue à chaque citation d'une page donnée en utilisant la pseudo-classe :langet 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 des caractéristiques non-présentationnelles, les pseudo-éléments créent de nouveaux éléments virtuels.

Références

W3C

Sélecteurs niveau 3
Spécification CSS 2.1 (obsolète 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

Question 3

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

Un pseudo-élément est un nouvel élément faux.
div::aftersignifie des éléments non existants après l' <div>art.

::selectionest un autre exemple de pseudo-élément.
Cela ne signifie pas tous les éléments sélectionnés; cela signifie la plage de contenu sélectionnée, qui peut s'étendre sur des portions de plusieurs éléments.

Question 4

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

Les pseudo-classes décrivent un état spécial.
Les pseudo-éléments correspondent aux éléments virtuels.

Question 5

À partir de la documentation Sitepoint:

Une 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: elles sont appliquées à la suite de l'interaction de l'utilisateur avec le document. - http://reference.sitepoint.com/css/pseudoclasses . Ce serait des choses comme :hover, :active, :visited.

Les 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 les règles CSS. - http://reference.sitepoint.com/css/pseudoelements . Ce serait des choses comme before, :after, :first-letter.

Question 6

Voici la réponse simple:

Nous utilisons une pseudo-classe lorsque nous devons appliquer des css en fonction de l' état d'un élément. Tel que:

Appliquer le CSS au survol de l'élément d'ancrage ( :hover)
Appliquez le CSS lorsque vous obtenez le focus sur un élément html ( :focus). etc.

Nous utilisons un pseudo-élément lorsque nous devons appliquer css à des parties spécifiques d'un élément ou à un contenu nouvellement inséré . Tel que:

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

Voici l'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>

Question 7

Une réponse conceptuelle:

Un pseudo-élément fait référence à des éléments qui font partie du document, mais vous ne le savez pas encore. Par exemple la première lettre. Avant, vous n'aviez que du texte. Vous avez maintenant une première lettre que vous pouvez cibler. C'est un nouveau concept, mais qui a toujours fait partie du document. Cela comprend également des choses comme ::before; bien qu'il n'y ait pas de contenu réel là-bas, le concept de quelque chose avant autre chose était toujours là - maintenant vous le spécifiez.
Une pseudo-classe est l'état de quelque chose dans le DOM. Tout comme une classe est une balise que vous associez à un élément, une pseudo-classe est une classe qui est associée par le navigateur ou le DOM ou autre, généralement en réponse à un changement d'état. Lorsqu'un utilisateur visite un lien - ce lien peut prendre l'état de «visité». Vous pouvez imaginer le navigateur appliquant la classe «visitée» à l'élément Anchor. :visitedserait alors comment vous sélectionnez pour cette pseudo-classe.

Question 8

Pseudo-classe

Une pseudo-classe est un moyen de sélectionner certaines parties d'un document HTML, basé en principe non sur l'arborescence du document HTML elle-même et ses éléments ou sur des caractéristiques comme le nom, les attributs ou le contenu, mais sur d'autres conditions fantômes comme le codage de la langue ou l'état dynamique d'un élément.

États dynamiques définis par pseudo-classe d'origine d'un élément qui sont entrés et sortis au fil du temps, ou par l'intervention de l'utilisateur. CSS2 a développé ce concept pour inclure des composants de documents conceptuels virtuels ou des parties inférées de l'arborescence de documents, par exemple le premier enfant. Les pseudo-classes fonctionnent comme si des classes fantômes étaient ajoutées à divers éléments.

RESTRICTIONS: Contrairement aux pseudo-éléments, les pseudo-classes peuvent apparaître n'importe où dans la chaîne de sélecteurs.

Exemple de code de pseudo-classe:

a:link /* This selects any "a" element whose target has not been visited.*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #99FF99; /* set to a pastel green */
border-top : 2px solid #ccffcc; /* highlight color */
border-left : 2px solid #ccffcc; /* highlight color */
border-bottom : 2px solid #003300; /* shadow color */
border-right : 2px solid #003300; /* shadow color */
}

a:visited /* This selects any "a" element whose target has been visited.*/
{ padding : 4px;
text-decoration : none;
color : #000000; /* black text color */
background-color : #ccccff; /* set to a lavender */
border-top : 2px solid #ffffff; /* highlight color */
border-left : 2px solid #ffffff; /* highlight color */
border-bottom : 2px solid #333366; /* shadow color *
border-right : 2px solid #333366; /* shadow color */
}

a:hover /* This selects any "a" element which is in a hover state. This is a state during pointer movement within the rendering region of an element. The user designates an element but does not activate it. */
{
color : #000000; /* black text color */
background-color : #99cc99; /* desaturated color */
border-top : 2px solid #003300; /* shadow color */
border-left : 2px solid #003300; /* shadow color */
border-bottom : 2px solid #ccffcc; /* highlight color */
border-right : 2px solid #ccffcc; /* highlight color */
}

a:focus /* This selects any "a" element which currently has focus. Focus is a state during which an element accepts keyboard input or other forms of text input. */
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ffff99; /* set to a pastel yellow */
border-top : 2px solid #ffffcc; /* highlight color */
border-left : 2px solid #ffffcc; /* highlight color */
border-bottom : 2px solid #666633; /* shadow color */
border-right : 2px solid #666633; /* shadow color */
}

a:active /* This selects any "a" element which is in a state of activation. Active is a state during pointer activation (eg: press and release of a mouse) within the rendering region of an element.*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ff99ff; /* set to a pink */
border-top : 2px solid #ffccff; /* highlight color */
border-left : 2px solid #ffccff; /* highlight color */
border-bottom : 2px solid #663366; /* shadow color */
border-right : 2px solid #663366; /* shadow color */
}

Une page qui montre un rendu du code de pseudo-classe ci-dessus

Pseudo-éléments

Les PSEUDO-ELEMENTS sont utilisés pour adresser des sous-parties d'éléments. Ils vous permettent de définir le style d'une partie du contenu d'un élément au-delà de ce qui est spécifié dans les documents. En d'autres termes, ils permettent de définir des éléments logiques qui ne sont pas réellement dans l'arborescence des éléments du document. Les éléments logiques permettent de traiter la structure sémantique implicite dans les sélecteurs CSS.

RESTRICTIONS: Les pseudo-éléments ne peuvent être appliqués qu'à des contextes externes et au niveau du document - pas aux styles en ligne. Les pseudo-éléments sont limités là où ils peuvent apparaître dans une règle. Ils ne peuvent apparaître qu'à la fin d'une chaîne de sélecteurs (après l'objet du sélecteur). Ils doivent venir après tous les noms de classe ou d'ID trouvés dans le sélecteur. Un seul pseudo-élément peut être spécifié par sélecteur. Pour adresser plusieurs pseudo-éléments sur une seule structure d'élément, plusieurs instructions de sélection / déclaration de style doivent être effectuées.

Les pseudo-éléments peuvent être utilisés pour des effets typographiques courants tels que les majuscules initiales et les lettrines. Ils peuvent également adresser le contenu généré qui n'est pas dans le document source (avec le "avant" et "après"). Un exemple de feuille de style de certains pseudo-éléments avec des propriétés et des valeurs ajoutées suit.

/ * La règle suivante sélectionne la première lettre d'un titre 1 et définit la police sur 2em, cursive, sur fond vert. La première lettre sélectionne la première lettre / caractère rendu pour un élément de niveau bloc. * /

h1:first-letter {
font-size : 2em;
font-family : "Lucida Handwriting", "Lucida Sans", "Lucida Console", cursive;
background-color : #ccffcc;
}

/* The following rule selects the first displayed line in a paragraph and makes it bold. First-line selects the first rendered line on the output device of a block-level element. */

p:first-line {
font-weight : bold;
}

/* The following rule selects any content placed before a blockquote and inserts the phrase "Quote of the day:" in bold small caps with a green background. */

blockquote:before {
content : "Quote of the day:";
background-color : #ccffcc;
font-weight : bold;
font-variant : small-caps;
}

/* The following rule selects any content placed before a "q" element and inserts the smart open quote. */

q:before {
content : open-quote;
}

/* The following rule selects any content placed after a "q" element and inserts the smart close quote. */

q:after{
content : close-quote;
}

Sources: Lien

Question 9

En bref, des pseudo-classes sur MDN:

Une pseudo-classe CSS est un mot-clé ajouté à un sélecteur qui spécifie un état spécial du ou des éléments sélectionnés. Par exemple,:hover peut être utilisé pour appliquer un style lorsque l'utilisateur survole un bouton.
div: hover {
  couleur de fond: # F89B4D;
}

Et, à partir de Pseudo-éléments sur MDN:

Un pseudo-élément CSS est un mot-clé ajouté à un sélecteur qui vous permet de styliser une partie spécifique du ou des éléments sélectionnés. Par exemple, ::first-linepeut être utilisé pour styliser la première ligne d'un paragraphe.
/ * La première ligne de chaque élément <p>. * /
p :: première ligne {
 Couleur bleue;
 text-transform: majuscule;
}

Answer 1

94

Des choses comme a:linkou div::after...

Les informations sur la différence semblent rares.

css css-selectors pseudo-class pseudo-element tybro0103
la source

1

@ ŠimeVidas à quel poste? lien?

tybro0103

1

Je pense que les spécifications sont assez claires ...

zzzzBov

1

@ tybro0103 Je n'en ai trouvé aucun. Je suppose que cela n'a en effet jamais été demandé ici ... J'ai trouvé ceci cependant: stackoverflow.com/questions/7757943/what-is-a-pseudo-element

Šime Vidas

@zzzzBov J'ai l'impression d'avoir besoin d'un traducteur pour comprendre ça :)

tybro0103

Merci d'avoir posé cette question. Je ne sais pas pourquoi je n'avais pas pensé à le publier moi-même après mon récent blitzkrieg sur des questions avec le tag [pseudo-selector] ...

BoltClock

Answer 2

1

@ ŠimeVidas à quel poste? lien?

tybro0103

Answer 3

1

Je pense que les spécifications sont assez claires ...

zzzzBov

Answer 4

1

@ tybro0103 Je n'en ai trouvé aucun. Je suppose que cela n'a en effet jamais été demandé ici ... J'ai trouvé ceci cependant: stackoverflow.com/questions/7757943/what-is-a-pseudo-element

Šime Vidas

Answer 5

@zzzzBov J'ai l'impression d'avoir besoin d'un traducteur pour comprendre ça :)

tybro0103

Answer 6

Merci d'avoir posé cette question. Je ne sais pas pourquoi je n'avais pas pensé à le publier moi-même après mon récent blitzkrieg sur des questions avec le tag [pseudo-selector] ...

BoltClock

Answer 7

La recommandation du sélecteur CSS 3 est assez claire sur les deux, 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 contenus dans un sélecteur. Les pseudo-classes sont autorisées n'importe où 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 de pseudo-classes sont insensibles à la casse. Certaines pseudo-classes s'excluent mutuellement, tandis que d'autres peuvent être appliquées simultanément au même élément. Les pseudo-classes peuvent être dynamiques, dans le sens où un élément peut acquérir ou perdre une pseudo-classe pendant qu'un utilisateur interagit avec le document.

La source

Qu'est-ce que ça veut dire?

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

Par contre, :targeton peut y accéder via la manipulation DOM (vous pouvez utiliser window.location.hashpour trouver l'objet avec JavaScript), mais cela "ne peut pas être exprimé en utilisant les autres sélecteurs simples" .

Donc, fondamentalement, une pseudo-classe affinera l'ensemble des éléments sélectionnés comme n'importe quel autre sélecteur simple dans une séquence de sélecteurs simples . Notez que tous les sélecteurs simples dans 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 du sélecteur CSS3.

Exemple

L'exemple suivant #ccccolorera toutes les lignes paires en gris ( ), toutes les lignes inégales qui ne peuvent pas être divisées par 5 en blanc et une ligne sur deux en 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 document n'offrent pas de mécanismes pour 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 fournir aux auteurs un moyen de se référer au contenu qui n'existe pas dans le document source (par exemple, ::beforeet ::afterpseudo-éléments donnent accès à un contenu généré).

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

Cette ::notation est introduite par le document courant afin d'établir une discrimination entre pseudo-classes et pseudo-éléments. Pour la compatibilité avec les feuilles de style existantes, les agents utilisateurs doivent également accepter la notation précédente à un deux points pour les pseudo-éléments introduits dans les niveaux CSS 1 et 2 (à savoir,: première ligne,: première lettre,: avant et: après). 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.

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

La source

Qu'est-ce que ça veut dire?

La partie la plus importante ici est que "les pseudo-éléments permettent aux auteurs de se référer à [..] des informations autrement inaccessibles " et qu'ils "peuvent également fournir aux auteurs un moyen de faire référence à un contenu qui n'existe pas dans le document source (par exemple, le ::beforeet les ::afterpseudo-é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-classes peuvent être appliqués. Ils ne filtrent pas les éléments, ils filtrent essentiellement le contenu ( ::first-line, ::first-letter) et l'enveloppent dans un conteneur virtuel, que l'auteur peut styliser comme il le souhaite (enfin, presque).

Par exemple, le ::first-linepseudo-élément ne peut pas être reconstruit avec JavaScript, car il dépend fortement de la police actuellement 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). Eh bien, ce n'est pas tout à fait vrai: on pourrait toujours calculer toutes ces valeurs et extraire la première ligne, mais cela est une activité très lourde.

Je suppose que la plus grande différence est que "un seul pseudo-élément peut apparaître par sélecteur" . La note dit que cela pourrait être sujet à changement, mais à partir de 2012, je ne pense pas que nous voyions un comportement différent à l'avenir ( c'est toujours en CSS4 ).

Exemple

L'exemple suivant ajoutera une balise de langue à chaque citation d'une page donnée en utilisant la pseudo-classe :langet 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 des caractéristiques non-présentationnelles, les pseudo-éléments créent de nouveaux éléments virtuels.

Références

W3C

Sélecteurs niveau 3
Spécification CSS 2.1 (obsolète 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 8

4

Je suis d'accord avec le commentaire de DanMan sur la réponse de SLaks en ce que les pseudo-classes n'agissent pas vraiment comme des "filtres" mais plus comme des "descripteurs". Par exemple, :not(.someclass):nth-child(even)cela ne signifie pas filtrer les éléments qui n'en ont pas .someclass, et parmi les éléments restants, filtrer les occurrences paires. Au lieu de cela, il représente tout élément qui est à la fois :not(.someclass) et :nth-child(even) de son parent en même temps. Des explications plus détaillées peuvent être trouvées dans cette réponse et cette réponse .

BoltClock

Answer 9

2

@BoltClock: Je crois que j'aime le plus le terme "classificateur de caractéristiques" , puisque c'est ce qu'ils ont été quelque peu décrit à l'origine comme dans CSS2: "Les pseudo-classes classifient les éléments sur des caractéristiques autres que leur nom" . Cependant, je n'ai toujours pas trouvé le libellé exact qui me satisfait.

Zeta

Answer 10

42

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

Un pseudo-élément est un nouvel élément faux.
div::aftersignifie des éléments non existants après l' <div>art.

::selectionest un autre exemple de pseudo-élément.
Cela ne signifie pas tous les éléments sélectionnés; cela signifie la plage de contenu sélectionnée, qui peut s'étendre sur des portions de plusieurs éléments.

SLaks
la source

12

+1 bien que techniquement div::aftersoit un enfant de div, se produisant après son contenu plutôt que l'élément lui-même.

BoltClock

1

Au lieu de «filtres», je dirais «décrit plus en détail».

DanMan

Answer 11

12

+1 bien que techniquement div::aftersoit un enfant de div, se produisant après son contenu plutôt que l'élément lui-même.

BoltClock

Answer 12

1

Au lieu de «filtres», je dirais «décrit plus en détail».

DanMan

Answer 13

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

Les pseudo-classes décrivent un état spécial.
Les pseudo-éléments correspondent aux éléments virtuels.

Answer 14

À partir de la documentation Sitepoint:

Une 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: elles sont appliquées à la suite de l'interaction de l'utilisateur avec le document. - http://reference.sitepoint.com/css/pseudoclasses . Ce serait des choses comme :hover, :active, :visited.

Les 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 les règles CSS. - http://reference.sitepoint.com/css/pseudoelements . Ce serait des choses comme before, :after, :first-letter.

Answer 15

Voici la réponse simple:

Nous utilisons une pseudo-classe lorsque nous devons appliquer des css en fonction de l' état d'un élément. Tel que:

Appliquer le CSS au survol de l'élément d'ancrage ( :hover)
Appliquez le CSS lorsque vous obtenez le focus sur un élément html ( :focus). etc.

Nous utilisons un pseudo-élément lorsque nous devons appliquer css à des parties spécifiques d'un élément ou à un contenu nouvellement inséré . Tel que:

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

Voici l'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 16

Une réponse conceptuelle:

Un pseudo-élément fait référence à des éléments qui font partie du document, mais vous ne le savez pas encore. Par exemple la première lettre. Avant, vous n'aviez que du texte. Vous avez maintenant une première lettre que vous pouvez cibler. C'est un nouveau concept, mais qui a toujours fait partie du document. Cela comprend également des choses comme ::before; bien qu'il n'y ait pas de contenu réel là-bas, le concept de quelque chose avant autre chose était toujours là - maintenant vous le spécifiez.
Une pseudo-classe est l'état de quelque chose dans le DOM. Tout comme une classe est une balise que vous associez à un élément, une pseudo-classe est une classe qui est associée par le navigateur ou le DOM ou autre, généralement en réponse à un changement d'état. Lorsqu'un utilisateur visite un lien - ce lien peut prendre l'état de «visité». Vous pouvez imaginer le navigateur appliquant la classe «visitée» à l'élément Anchor. :visitedserait alors comment vous sélectionnez pour cette pseudo-classe.

Answer 17

Pseudo-classe

Une pseudo-classe est un moyen de sélectionner certaines parties d'un document HTML, basé en principe non sur l'arborescence du document HTML elle-même et ses éléments ou sur des caractéristiques comme le nom, les attributs ou le contenu, mais sur d'autres conditions fantômes comme le codage de la langue ou l'état dynamique d'un élément.

États dynamiques définis par pseudo-classe d'origine d'un élément qui sont entrés et sortis au fil du temps, ou par l'intervention de l'utilisateur. CSS2 a développé ce concept pour inclure des composants de documents conceptuels virtuels ou des parties inférées de l'arborescence de documents, par exemple le premier enfant. Les pseudo-classes fonctionnent comme si des classes fantômes étaient ajoutées à divers éléments.

RESTRICTIONS: Contrairement aux pseudo-éléments, les pseudo-classes peuvent apparaître n'importe où dans la chaîne de sélecteurs.

Exemple de code de pseudo-classe:

a:link /* This selects any "a" element whose target has not been visited.*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #99FF99; /* set to a pastel green */
border-top : 2px solid #ccffcc; /* highlight color */
border-left : 2px solid #ccffcc; /* highlight color */
border-bottom : 2px solid #003300; /* shadow color */
border-right : 2px solid #003300; /* shadow color */
}

a:visited /* This selects any "a" element whose target has been visited.*/
{ padding : 4px;
text-decoration : none;
color : #000000; /* black text color */
background-color : #ccccff; /* set to a lavender */
border-top : 2px solid #ffffff; /* highlight color */
border-left : 2px solid #ffffff; /* highlight color */
border-bottom : 2px solid #333366; /* shadow color *
border-right : 2px solid #333366; /* shadow color */
}

a:hover /* This selects any "a" element which is in a hover state. This is a state during pointer movement within the rendering region of an element. The user designates an element but does not activate it. */
{
color : #000000; /* black text color */
background-color : #99cc99; /* desaturated color */
border-top : 2px solid #003300; /* shadow color */
border-left : 2px solid #003300; /* shadow color */
border-bottom : 2px solid #ccffcc; /* highlight color */
border-right : 2px solid #ccffcc; /* highlight color */
}

a:focus /* This selects any "a" element which currently has focus. Focus is a state during which an element accepts keyboard input or other forms of text input. */
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ffff99; /* set to a pastel yellow */
border-top : 2px solid #ffffcc; /* highlight color */
border-left : 2px solid #ffffcc; /* highlight color */
border-bottom : 2px solid #666633; /* shadow color */
border-right : 2px solid #666633; /* shadow color */
}

a:active /* This selects any "a" element which is in a state of activation. Active is a state during pointer activation (eg: press and release of a mouse) within the rendering region of an element.*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ff99ff; /* set to a pink */
border-top : 2px solid #ffccff; /* highlight color */
border-left : 2px solid #ffccff; /* highlight color */
border-bottom : 2px solid #663366; /* shadow color */
border-right : 2px solid #663366; /* shadow color */
}

Une page qui montre un rendu du code de pseudo-classe ci-dessus

Pseudo-éléments

Les PSEUDO-ELEMENTS sont utilisés pour adresser des sous-parties d'éléments. Ils vous permettent de définir le style d'une partie du contenu d'un élément au-delà de ce qui est spécifié dans les documents. En d'autres termes, ils permettent de définir des éléments logiques qui ne sont pas réellement dans l'arborescence des éléments du document. Les éléments logiques permettent de traiter la structure sémantique implicite dans les sélecteurs CSS.

RESTRICTIONS: Les pseudo-éléments ne peuvent être appliqués qu'à des contextes externes et au niveau du document - pas aux styles en ligne. Les pseudo-éléments sont limités là où ils peuvent apparaître dans une règle. Ils ne peuvent apparaître qu'à la fin d'une chaîne de sélecteurs (après l'objet du sélecteur). Ils doivent venir après tous les noms de classe ou d'ID trouvés dans le sélecteur. Un seul pseudo-élément peut être spécifié par sélecteur. Pour adresser plusieurs pseudo-éléments sur une seule structure d'élément, plusieurs instructions de sélection / déclaration de style doivent être effectuées.

Les pseudo-éléments peuvent être utilisés pour des effets typographiques courants tels que les majuscules initiales et les lettrines. Ils peuvent également adresser le contenu généré qui n'est pas dans le document source (avec le "avant" et "après"). Un exemple de feuille de style de certains pseudo-éléments avec des propriétés et des valeurs ajoutées suit.

/ * La règle suivante sélectionne la première lettre d'un titre 1 et définit la police sur 2em, cursive, sur fond vert. La première lettre sélectionne la première lettre / caractère rendu pour un élément de niveau bloc. * /

h1:first-letter {
font-size : 2em;
font-family : "Lucida Handwriting", "Lucida Sans", "Lucida Console", cursive;
background-color : #ccffcc;
}

/* The following rule selects the first displayed line in a paragraph and makes it bold. First-line selects the first rendered line on the output device of a block-level element. */

p:first-line {
font-weight : bold;
}

/* The following rule selects any content placed before a blockquote and inserts the phrase "Quote of the day:" in bold small caps with a green background. */

blockquote:before {
content : "Quote of the day:";
background-color : #ccffcc;
font-weight : bold;
font-variant : small-caps;
}

/* The following rule selects any content placed before a "q" element and inserts the smart open quote. */

q:before {
content : open-quote;
}

/* The following rule selects any content placed after a "q" element and inserts the smart close quote. */

q:after{
content : close-quote;
}

Sources: Lien

Answer 18

En bref, des pseudo-classes sur MDN:

Une pseudo-classe CSS est un mot-clé ajouté à un sélecteur qui spécifie un état spécial du ou des éléments sélectionnés. Par exemple,:hover peut être utilisé pour appliquer un style lorsque l'utilisateur survole un bouton.
div: hover {
  couleur de fond: # F89B4D;
}

Et, à partir de Pseudo-éléments sur MDN:

Un pseudo-élément CSS est un mot-clé ajouté à un sélecteur qui vous permet de styliser une partie spécifique du ou des éléments sélectionnés. Par exemple, ::first-linepeut être utilisé pour styliser la première ligne d'un paragraphe.
/ * La première ligne de chaque élément <p>. * /
p :: première ligne {
 Couleur bleue;
 text-transform: majuscule;
}

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

Réponses:

Pseudo-classes

Description officielle

Qu'est-ce que ça veut dire?

Exemple

Pseudo-éléments

Description officielle

Qu'est-ce que ça veut dire?

Exemple

TL; DR

Références

W3C