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