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

Une réponse conceptuelle :

• Un pseudo-élément fait référence à des éléments qui font partie du document, mais que vous ne connaissez pas encore. Par exemple, la première lettre. Auparavant, vous n'aviez que du texte. Maintenant, vous avez une première lettre que vous pouvez cibler. Il s'agit d'un nouveau concept, mais il a toujours fait partie du document. Cela inclut également des éléments tels que ::before Bien qu'il n'y ait pas de contenu réel, le concept de quelque chose avant quelque chose d'autre a toujours été présent - maintenant vous le spécifiez.

• Une pseudo-classe est l'état d'une 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, 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 "visité". Vous pouvez imaginer que le navigateur applique la classe "visité" à l'élément Anchor. :visited serait alors le mode de sélection de cette pseudo-classe.

Answer 2

Pseudo-classe

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

La pseudo-classe d'origine définissait les états dynamiques d'un élément qui sont entrés et sortis au fil du temps ou grâce à l'intervention de l'utilisateur. CSS2 a élargi ce concept pour inclure des composants conceptuels virtuels du document ou des parties déduites de l'arborescence du document, 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élection.

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 démontre le rendu du code de la pseudo-classe ci-dessus

Pseudo-éléments

PSEUDO-ELEMENTS est utilisé pour traiter les sous-parties d'éléments. Ils 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 figurent pas dans l'arbre des éléments du document. Les éléments logiques permettent d'aborder 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, et non à des styles en ligne. Les pseudo-éléments sont limités quant à l'endroit 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 le sujet du sélecteur). Ils doivent être placés après tout nom de classe ou d'identifiant figurant dans le sélecteur. Un seul pseudo-élément peut être spécifié par sélecteur. Pour traiter plusieurs pseudo-éléments sur une même structure d'élément, il faut faire plusieurs déclarations de sélecteur de style.

Les pseudo-éléments peuvent être utilisés pour des effets typographiques courants tels que les majuscules initiales et les minuscules. Ils peuvent également traiter du contenu généré qui ne se trouve pas dans le document source (avec le "avant" et le "après"). Voici un exemple de feuille de style de certains pseudo-éléments avec des propriétés et des valeurs ajoutées.

/* La règle suivante sélectionne la première lettre d'un titre 1 et définit la police à 2em, cursive, avec un fond vert. First-letter sélectionne la première lettre/caractère rendue 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 3

En bref, de Pseudo-classes sur MDN :

A CSS pseudo-classe est un mot-clé ajouté à un s un état particulier 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 {
  background-color: #F89B4D;
}

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

A CSS pseudo-élément est un mot-clé ajouté à un sélecteur t de styliser une partie spécifique de l'élément (des éléments) sélectionné(s). [ ] ::first-line peut être utilisé pour styliser la première ligne d'un paragraphe.

/\* The first line of every <p> element. \*/
p::first-line {
 color: blue;
 text-transform: uppercase;
}