web-dev-qa-db-fra.com

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

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

Les informations sur la différence semblent rares.

csscss-selectorspseudo-classpseudo-element
81
tybro0103

Le recommandation du sélecteur CSS est assez clair 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 situées 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 n'importe où dans des 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-classe ne respectent pas 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, en ce sens qu'un élément peut acquérir ou perdre une pseudo-classe pendant qu'un utilisateur interagit avec le document.

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 faire la différence entre 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.

D'autre part, :target est accessible via la manipulation DOM (vous pouvez utiliser window.location.hash pour 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 tout autre 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 du sélecteur CSS3.

Exemple

L'exemple suivant colorera toutes les lignes paires en gris (#ccc), toutes les rangées inégales qui ne sont pas divisibles par 5 blanches et toutes les autres rangées 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'arbre 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 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 faire référence à du contenu qui n'existe pas dans le document source (par exemple, le ::before et ::after les pseudo-éléments donnent accès au contenu généré).

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

Cette :: la notation est introduite par le document actuel afin d'établir une discrimination entre pseudo-classes et pseudo-éléments. Pour des raisons de compatibilité avec les feuilles de style existantes, les agents utilisateurs doivent également accepter la notation un-deux-points précédente 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 pourrait autoriser plusieurs pseudo-éléments par sélecteur.

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 se référer à du contenu qui n'existe pas dans le document source (par exemple, le ::before et ::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 pseudo-sélecteurs peuvent être appliqués. Ils ne filtrent pas é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 le pseudo-élément ne peut pas être reconstruit avec JavaScript, car il dépend fortement de la police utilisée actuellement, 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 indique que cela pourrait être sujet à changement, mais à partir de 2012, je ne pense pas que nous verrons un comportement différent à l'avenir ( c'est toujours dans CSS4 ).

Exemple

L'exemple suivant ajoutera une balise de langue à chaque citation sur 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 des caractéristiques non-présentationnelles, les pseudo-éléments créent de nouveaux éléments virtuels.

Les références

W3C

75
Zeta

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

Un pseudo-élément est un nouvel faux élément.
div::after signifie des éléments inexistants après <div>s.

::selection est 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 parties de plusieurs éléments.

39
SLaks

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.
15
jerone

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

10
motoxer4533

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 il a toujours fait partie du document. Cela inclut également des choses comme ::before; alors qu'il n'y a pas de contenu réel là-bas, le concept de quelque chose avant autre chose a toujours été 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. :visited serait alors la façon dont vous sélectionnez pour cette pseudo-classe.

5
Gerard ONeill

Pseudo-classe

Une pseudo-classe est un moyen de sélectionner certaines parties d'un document HTML, basé en principe non pas sur l'arborescence du document HTML lui-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 du langage ou l'état dynamique d'un élément.

Les états dynamiques définis par la 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 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 pseudo-classe ci-dessus

Pseudo-éléments

Les PSEUDO-ELEMENTS sont utilisés pour traiter 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 d'adresser la structure sémantique implicite dans les sélecteurs CSS.

RESTRICTIONS: Les pseudo-éléments ne peuvent être appliqués qu'aux 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électeur (après le sujet du sélecteur). Ils doivent apparaître après tout nom de classe ou d'ID trouvé 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 faites.

Les pseudo-éléments peuvent être utilisés pour des effets typographiques courants tels que les majuscules initiales et les majuscules. Ils peuvent également traiter le contenu généré qui ne se trouve pas dans le document source (avec les "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 en-tête 1 et définit la police sur 2em, cursive, avec un fond vert. First-letter 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

4
Sumant

Voici la réponse simple:

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

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

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

  1. Appliquer le CSS à la première lettre ou à la première ligne d'un élément (::first-letter)
  2. 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>
3
Sheo Dayal Singh

En bref, de 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 des éléments sélectionnés. Par exemple, ::first-line peut ê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: bleu; 
 transformation de texte: majuscule; 
}
0
DavidRR