Pseudo-classes et pseudo-éléments
Voyons maintenant les sélecteurs de pseudo-classes et de pseudo-éléments. Il en existe un grand nombre, ces sélecteurs sont souvent assez spécifiques. Une fois que vous aurez compris comment les utiliser, revenez consulter leur liste pour voir si quelque chose peut fonctionner dans la tâche que vous essayez d'accomplir. Une fois encore, vérifiez la prise en charge par les navigateurs sur la page MDN associée à chaque sélecteur.
Prérequis : | Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML (cf. Introduction à HTML), et une idée de Comment fonctionne CSS. |
---|---|
Objectif : | Découvrir les sélecteurs de pseudo-classes et de pseudo-éléments. |
Qu'est ce qu'une pseudo-classe ?
Une pseudo-classe est un sélecteur ciblant des éléments dans un état spécifique, par ex. le premier élément d'un type, ou un élément survolé par le pointeur de la souris. Leur comportement correspond à celui d'une classe, mais qui ne s'appliquerait que partiellement. On gagne ainsi en flexibilité, en éliminant du code inutile. Le résultat est plus facile à maintenir.
Les pseudo-classes sont signalées par un mot clé commençant par deux points :
:pseudo-class-name
Exemple d'une pseudo-classe élémentaire
Voyons cela dans un premier exemple. Pour agrandir et mettre en gras le texte du premier paragraphe d'un article, on pourrait attribuer une classe à ce paragraphe, puis lui ajouter du CSS, comme ci-dessous :
Mais cette solution est difficile à maintenir — que se passe-t-il si un nouveau paragraphe est ajouté en haut du document ? Il faut dans ce cas déplacer manuellement la classe vers le nouveau paragraphe. Une solution plus souple est d'utiliser le sélecteur de pseudo-classe : first-child
— cela cible dans tous les cas le premier élément enfant de l'article : plus nécessaire d'éditer le code HTML (particulièrement utile en particulier quand le code HTML est généré par un CMS.)
Toutes les pseudo-classes se comportent de la même manière. Elles ciblent les éléments du document dans un état donné, comme si vous aviez ajouté une classe dans votre code HTML. Jetez un œil à quelques exemples sur MDN :
Pseudo-classes d'action utilisateur
Certaines pseudo-classes ne s'appliquent que lorsque l'utilisateur interagit avec le document d'une manière ou d'une autre. Ces pseudo-classes d'action utilisateur, parfois appelées pseudo-classes dynamiques, agissent comme si une classe avait été ajoutée à l'élément lorsque l'utilisateur interagit avec lui. Par exemple :
:hover
— mentionné ci-dessus ; s'applique quand l'utilisateur déplace son pointeur sur un élément, généralement un lien.
:focus
— s'applique uniquement si l'utilisateur concentre l'élément à l'aide des commandes du clavier.
Qu'est ce qu'un pseudo-élément ?
Les pseudo-éléments se comportent de manière similaire, même s'ils se comportent comme si vous aviez ajouté un tout nouvel élément HTML dans le balisage, au lieu d'appliquer une classe à des éléments existants. Les pseudo-éléments commencent avec un double deux-points ::
.
::pseudo-element-name
Note : Certains anciens pseudo-éléments utilisaient un simple deux-points, vous pouvez donc parfois rencontrer cette syntaxe dans du code ou des exemples. Les navigateurs modernes supportent les anciens pseudo-éléments avec un simple ou double deux-points pour assurer la compatibilité.
Par exemple, si vous souhaitez sélectionner la première ligne d'un paragraphe, vous pouvez l'entourer d'un élément <span> et utiliser un sélecteur d'éléments ; cependant, cela échouerait si le nombre de mots que vous avez entourés était plus long ou plus court que la largeur de l'élément parent. Comme nous avons tendance à ne pas savoir combien de mots tiendront sur une ligne - étant donné que cela peut varier si la largeur de l'écran ou la taille de la police change - il est impossible de le faire de manière robuste en ajoutant du HTML.
Le pseudo-sélecteur d'éléments ::first-line
le fera pour vous de manière fiable - même si le nombre de mots augmente ou diminue, il ne sélectionnera que la première ligne.
Il agit comme si un <span>
était comme par magie placé autour de cette première ligne formatée, et était mis à jour à chaque fois que la longueur de la ligne changeait.
Vous pouvez voir que cela sélectionne la première ligne des deux paragraphes.
Combiner pseudo-classes et pseudo-éléments
Si vous souhaitez mettre en gras la première ligne du premier paragraphe, vous pouvez enchaîner les sélecteurs :first-child
et ::first-line
Essayez de modifier l'exemple précédent en direct pour qu'il utilise le CSS suivant. Nous souhaitons sélectionner la première ligne du premier élément <p>
, qui se trouve à l'intérieur d'un élément <article>
article p:first-child::first-line {
font-size: 120%;
font-weight: bold;
}
Générer du contenu avec ::before et ::after
Il existe quelques pseudo-éléments spéciaux, qui sont utilisés avec la propriété content
pour insérer du contenu dans votre document en utilisant le CSS.
Vous pouvez les utiliser pour insérer une chaîne de texte, comme dans l'exemple ci-dessous. Essayez de changer la valeur du texte de la propriété content
et vous verrez qu'elle change en sortie. Vous pouvez également changer le pseudo-élément ::before
en ::after
et voir le texte inséré à la fin de l'élément au lieu du début.
L'insertion de chaînes de caractères à partir de CSS n'est pas vraiment quelque chose que nous faisons très souvent sur le web, car ce texte est inaccessible pour certains lecteurs d'écran et pourrait être difficile à trouver et à modifier à l'avenir.
Une utilisation plus pertinente de ces pseudo-éléments consiste à insérer une icône, par exemple la petite flèche ajoutée dans l'exemple ci-dessous, qui est un indicateur visuel que nous ne voudrions pas voir lu par un lecteur d'écran :
Ces pseudo-éléments sont aussi fréquemment utilisés pour insérer une chaîne vide, qui peut ensuite être stylisée comme n'importe quel élément de la page.
Dans l'exemple suivant, nous avons ajouté une chaîne vide en utilisant le e pseudo-élément ::before
pseudo-element. Nous l'avons défini en display: block
afin de pouvoir la styliser avec une largeur et une hauteur. Nous utilisons ensuite le CSS pour la styliser comme n'importe quel élément. Vous pouvez jouer avec le CSS et modifier son apparence et son comportement.
L'utilisation des pseudo-éléments ::before
et ::after
avec la propriété content
est appelée "Generated Content" en CSS, et vous verrez souvent cette technique utilisée pour diverses tâches. Un bon exemple est le site CSS Arrow Please, qui vous aide à générer une flèche avec le CSS. Examinez le CSS lorsque vous créez votre flèche et vous verrez les pseudo-éléments ::before
and ::after
utilisés. Chaque fois que vous voyez ces sélecteurs, regardez la propriété content
pour voir ce qui est ajouté au document.
Section de référence
Il existe un grand nombre de pseudo-classes et pseudo-éléments, une bonne liste de références est donc utile. Vous trouverez ci-dessous des tableaux les répertoriant, avec pour chacun le lien vers la page de référence sur MDN. Vous y trouverez toutes les informations sur leur utilisation.
Pseudo-classes
Sélecteur | Description |
---|---|
:active |
Matches when the user activates (for example clicks on) an element. |
:any-link |
Matches both the :link and :visited states of a link. |
:blank |
Matches an <input> element whose input value is empty. |
:checked |
Matches a radio button or checkbox in the selected state. |
:current |
Matches the element, or an ancestor of the element, that is currently being displayed. |
:default |
Matches the one or more UI elements that are the default among a set of similar elements. |
:dir |
Select an element based on its directionality (value of the HTML dir attribute or CSS direction property). |
:disabled |
Matches user interface elements that are in an disabled state. |
:empty |
Matches an element that has no children except optionally white space. |
:enabled |
Matches user interface elements that are in an enabled state. |
:first |
In Paged Media, matches the first page. |
:first-child |
Matches an element that is first among its siblings. |
:first-of-type |
Matches an element which is first of a certain type among its siblings. |
:focus |
Matches when an element has focus. |
:focus-visible |
Matches when an element has focus and the focus should be visible to the user. |
:focus-within |
Matches an element with focus plus an element with a descendent that has focus. |
:future |
Matches the elements after the current element. |
:hover |
Matches when the user hovers over an element. |
:indeterminate |
Matches UI elements whose value is in an indeterminate state, usually checkboxes. |
:in-range |
Matches an element with a range when its value is in-range. |
:invalid |
Matches an element, such as an <input> , in an invalid state. |
:lang |
Matches an element based on language (value of the HTML lang attribute). |
:last-child |
Matches an element which is last among its siblings. |
:last-of-type |
Matches an element of a certain type that is last among its siblings. |
:left |
In Paged Media, matches left-hand pages. |
:link |
Matches unvisited links. |
:local-link |
Matches links pointing to pages that are in the same site as the current document. |
:is() |
Matches any of the selectors in the selector list that is passed in. |
:not |
Matches things not matched by selectors that are passed in as a value to this selector. |
:nth-child |
Matches elements from a list of siblings — the siblings are matched by a formula of the form an+b (e.g. 2n + 1 would match elements 1, 3, 5, 7, etc. All the odd ones.) |
:nth-of-type |
Matches elements from a list of siblings that are of a certain type (e.g. <p> elements) — the siblings are matched by a formula of the form an+b (e.g. 2n + 1 would match that type of element, numbers 1, 3, 5, 7, etc. All the odd ones.) |
:nth-last-child |
Matches elements from a list of siblings, counting backwards from the end. The siblings are matched by a formula of the form an+b (e.g. 2n + 1 would match the last element in the sequence, then two elements before that, then two elements before that, etc. All the odd ones, counting from the end.) |
:nth-last-of-type |
Matches elements from a list of siblings that are of a certain type (e.g. <p> elements), counting backwards from the end. The siblings are matched by a formula of the form an+b (e.g. 2n + 1 would match the last element of that type in the sequence, then two elements before that, then two elements before that, etc. All the odd ones, counting from the end.) |
:only-child |
Matches an element that has no siblings. |
:only-of-type |
Matches an element that is the only one of its type among its siblings. |
:optional |
Matches form elements that are not required. |
:out-of-range |
Matches an element with a range when its value is out of range. |
:past |
Matches the elements before the current element. |
:placeholder-shown |
Matches an input element that is showing placeholder text. |
:playing |
Matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “playing”. |
:paused |
Matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “paused”. |
:read-only |
Matches an element if it is not user-alterable. |
:read-write |
Matches an element if it is user-alterable. |
:required |
Matches form elements that are required. |
:right |
In Paged Media, matches right-hand pages. |
:root |
Matches an element that is the root of the document. |
:scope |
Matches any element that is a scope element. |
:valid |
Matches an element such as an <input> element, in a valid state. |
:target |
Matches an element if it is the target of the current URL (i.e. if it has an ID matching the current URL fragment). |
:visited |
Matches visited links. |
Pseudo-éléments
Sélecteur | Description |
---|---|
::after |
Matches a stylable element appearing after the originating element's actual content. |
::before |
Matches a stylable element appearing before the originating element's actual content. |
::first-letter |
Matches the first letter of the element. |
::first-line |
Matches the first line of the containing element. |
::grammar-error |
Matches a portion of the document containing a grammar error as flagged by the browser. |
::selection |
Matches the portion of the document that has been selected. |
::spelling-error |
Matches a portion of the document containing a spelling error as flagged by the browser. |