Pseudo-classes

Podcast CSS – 015: Pseudo-classes

Supposons que vous ayez un formulaire d'inscription par e-mail et que vous souhaitiez que le champ de ce formulaire soit entouré d'une bordure rouge s'il contient une adresse e-mail non valide. Comment procéder ? Vous pouvez utiliser une pseudo-classe CSS :invalid, qui est l'une des nombreuses pseudo-classes fournies par le navigateur.

Une pseudo-classe vous permet d'appliquer des styles en fonction de changements d'état et de facteurs externes. Cela signifie que votre conception peut réagir à l'entrée utilisateur telle qu'une adresse e-mail non valide. Ceux-ci sont abordés dans le module Sélecteurs, qui sont présentés plus en détail dans ce module.

Contrairement aux pseudo-éléments, que vous pouvez découvrir dans le module précédent, les pseudo-classes sont liées à des états spécifiques dans lesquels un élément peut se trouver, plutôt qu'à un style général à certaines parties de cet élément.

États interactifs

Les pseudo-classes suivantes s'appliquent en raison d'une interaction d'un utilisateur avec votre page.

:hover

Si un utilisateur dispose d'un dispositif de pointage tel qu'une souris ou un pavé tactile, et qu'il le place sur un élément, vous pouvez vous connecter à cet état avec :hover pour appliquer des styles. Cela permet d'indiquer qu'il est possible d'interagir avec un élément.

:active

Cet état est déclenché lorsqu'un élément fait l'objet d'une interaction active (un clic, par exemple) avant que le clic ne soit libéré. Si un dispositif de pointage tel qu'une souris est utilisé, cet état correspond au moment où le clic commence et n'a pas encore été relâché.

:focus, :focus-within et :focus-visible

Si un élément peut être sélectionné, comme un <button>, vous pouvez réagir à cet état avec la pseudo-classe :focus.

Vous pouvez également réagir si un élément enfant de votre élément est sélectionné avec :focus-within.

Les éléments sélectionnables, comme les boutons, affichent un anneau de sélection lorsqu'ils sont dans le champ de vision, même lorsque l'utilisateur clique dessus. Dans ce type de situation, le développeur applique le CSS suivant:

button:focus {
    outline: none;
}

Ce CSS supprime l'anneau de sélection par défaut du navigateur lorsqu'un élément est sélectionné, ce qui pose un problème d'accessibilité pour les utilisateurs qui naviguent sur une page Web avec un clavier. Si aucun style de curseur n'est défini, ils ne pourront pas savoir où se trouve actuellement le curseur lorsque vous utiliserez la touche Tab. Avec :focus-visible, vous pouvez présenter un style de curseur lorsqu'un élément est sélectionné à l'aide du clavier, tout en utilisant la règle outline: none pour l'empêcher lorsqu'un appareil de type pointeur interagit avec lui.

button:focus {
    outline: none;
}

button:focus-visible {
    outline: 1px solid black;
}

:target

La pseudo-classe :target sélectionne un élément dont le id correspond à un fragment d'URL. Supposons que votre code HTML soit le suivant:

<article id="content">
    …
</article>

Vous pouvez associer des styles à cet élément lorsque l'URL contient #content.

#content:target {
    background: yellow;
}

Cela est utile pour mettre en évidence les zones qui ont pu être spécifiquement associées à un lien, comme le contenu principal d'un site Web, via un lien d'ancrage.

États historiques

:link

La pseudo-classe :link peut être appliquée à n'importe quel élément <a> ayant une valeur href qui n'a pas encore été visité.

:visited

Vous pouvez styliser un lien déjà consulté par l'utilisateur à l'aide de la pseudo-classe :visited. Il s'agit de l'état opposé à :link, mais vous avez moins de propriétés CSS à utiliser pour des raisons de sécurité. Vous ne pouvez appliquer un style qu'à color, background-color, border-color et outline-color, ainsi qu'à la couleur des SVG fill et stroke.

De l'importance de l'ordre des modificateurs

Si vous définissez un style :visited, il peut être remplacé par une pseudo-classe de lien ayant au moins la même spécificité. C'est pourquoi nous vous recommandons d'utiliser la règle LVHA pour styliser les liens avec des pseudo-classes dans un ordre particulier : :link, :visited, :hover, :active.

a:link {}
a:visited {}
a:hover {}
a:active {}

États des formulaires

Les pseudo-classes suivantes peuvent sélectionner des éléments de formulaire, dans les différents états dans lesquels ils peuvent se trouver lors d'une interaction avec eux.

:disabled et :enabled

Si un élément de formulaire, tel qu'une <button>, est désactivé par le navigateur, vous pouvez vous connecter à cet état avec la pseudo-classe :disabled. La pseudo-classe :enabled est disponible pour l'état opposé, bien que les éléments de formulaire soient également :enabled par défaut. Vous n'aurez donc peut-être pas accès à cette pseudo-classe.

:checked et :indeterminate

La pseudo-classe :checked est disponible lorsqu'un élément de formulaire secondaire, tel qu'une case à cocher ou une case d'option, est coché.

L'état :checked est un état binaire(vrai ou faux), mais les cases à cocher ont un état intermédiaire lorsqu'elles ne sont ni cochées, ni décochées. C'est ce qu'on appelle l'état :indeterminate.

Par exemple, lorsque la commande "Tout sélectionner" coche toutes les cases d'un groupe. Si l'utilisateur décoche ensuite l'une de ces cases, la case racine ne représente plus "toutes" cochées et doit donc être placée dans un état indéterminé.

L'élément <progress> présente également un état indéterminé qui peut être stylisé. Un cas d'utilisation courant consiste à lui donner une apparence rayée pour indiquer qu'on ne sait pas ce qu'il faut faire.

:placeholder-shown

Si un champ de formulaire comporte un attribut placeholder et aucune valeur, la pseudo-classe :placeholder-shown peut être utilisée pour associer des styles à cet état. Dès qu'il y a du contenu dans le champ, qu'il ait un placeholder ou non, cet état ne s'applique plus.

États de validation

Vous pouvez répondre à la validation de formulaire HTML avec des pseudo-classes telles que :valid, :invalid et :in-range. Les pseudo-classes :valid et :invalid sont utiles dans des contextes tels qu'un champ d'adresse e-mail dont le champ pattern doit être mis en correspondance pour qu'il soit un champ valide. Cet état de valeur valide peut être présenté à l'utilisateur pour l'aider à comprendre qu'il peut passer en toute sécurité au champ suivant.

La pseudo-classe :in-range est disponible si une entrée possède une min et une max, par exemple une entrée numérique et que la valeur se trouve dans ces limites.

Avec les formulaires HTML, vous pouvez déterminer qu'un champ est obligatoire avec l'attribut required. La pseudo-classe :required sera disponible pour les champs obligatoires. Les champs non obligatoires peuvent être sélectionnés avec la pseudo-classe :optional.

Sélectionner des éléments par leur index, leur ordre et leur occurrence

Il existe un groupe de pseudo-classes qui sélectionnent des éléments en fonction de leur emplacement dans le document.

:first-child et :last-child

Si vous souhaitez rechercher le premier ou le dernier élément, vous pouvez utiliser :first-child et :last-child. Ces pseudo-classes renvoient le premier ou le dernier élément d'un groupe d'éléments frères.

:only-child

Vous pouvez également sélectionner des éléments sans frères et sœurs, à l'aide de la pseudo-classe :only-child.

:first-of-type et :last-of-type

Vous pouvez sélectionner :first-of-type et :last-of-type qui, au début, ressemblent à :first-child et :last-child, mais considérez le code HTML suivant:

<div class="my-parent">
    <p>A paragraph</p>
    <div>A div</div>
    <div>Another div</div>
</div>

Et ce CSS:

.my-parent div:first-child {
    color: red;
}

Aucun élément ne sera coloré en rouge, car le premier enfant est un paragraphe et non un élément div. La pseudo-classe :first-of-type est utile dans ce contexte.

.my-parent div:first-of-type {
    color: red;
}

Bien que le premier <div> soit le deuxième enfant, il reste le premier de type dans l'élément .my-parent. Avec cette règle, il sera donc de couleur rouge.

:nth-child et :nth-of-type

Vous n'êtes pas non plus limité aux premier et dernier enfants et types. Les pseudo-classes :nth-child et :nth-of-type vous permettent de spécifier un élément situé dans un certain indice. L'indexation dans les sélecteurs CSS commence à 1.

Vous pouvez également transmettre bien d'autres index à ces pseudo-classes. Si vous souhaitez sélectionner tous les éléments pairs, vous pouvez utiliser :nth-child(even).

Vous pouvez également créer des sélecteurs plus complexes qui recherchent des éléments à des intervalles régulièrement espacés, à l'aide de la microsyntaxe An+B.

li:nth-child(3n+3) {
    background: yellow;
}

Ce sélecteur sélectionne tous les trois éléments, en commençant par l'élément 3. Dans cette expression, n correspond à l'indice, qui commence à zéro. Le 3 (3n) correspond à la multiplication par vous de cet indice.

Imaginons que vous ayez 7 éléments <li>. Le premier élément sélectionné est 3, car 3n+3 se traduit par (3 * 0) + 3. L'itération suivante choisirait l'élément 6, car n est maintenant incrémenté de 1, soit (3 * 1) + 3). Cette expression fonctionne à la fois pour :nth-child et :nth-of-type.

Vous pouvez jouer avec ce type de sélecteur sur ce nième testeur enfant ou cet outil de sélection de quantité.

:only-of-type

Enfin, vous pouvez rechercher le seul élément d'un certain type dans un groupe de frères et sœurs à l'aide de :only-of-type. Cela est utile si vous souhaitez sélectionner des listes ne comportant qu'un seul élément ou si vous souhaitez rechercher le seul élément en gras dans un paragraphe.

Rechercher des éléments vides

Il peut parfois être utile d'identifier des éléments complètement vides. Il existe également une pseudo-classe pour cela.

:empty

Si un élément n'a pas d'enfants, la pseudo-classe :empty s'y applique. Les enfants ne sont pas que des éléments HTML ou des nœuds de texte: ils peuvent également contenir des espaces blancs, ce qui peut être source de confusion lorsque vous déboguez le code HTML suivant et que vous vous demandez pourquoi il ne fonctionne pas avec :empty:

<div>
</div>

En effet, il y a un espace blanc entre les champs <div> d'ouverture et de fermeture. Par conséquent, le champ vide ne fonctionnera pas.

La pseudo-classe :empty peut être utile si vous avez peu de contrôle sur le code HTML et souhaitez masquer les éléments vides, tels qu'un éditeur de contenu WYSIWYG. Ici, un éditeur a ajouté un paragraphe vide et errant.

<article class="post">
 <p>Donec ullamcorper nulla non metus auctor fringilla.</p>
 <p></p>
 <p>Curabitur blandit tempus porttitor.</p>
</article>

Avec :empty, vous pouvez trouver cet élément et le masquer.

.post :empty {
    display: none;
}

Rechercher et exclure plusieurs éléments

Certaines pseudo-classes vous aident à écrire du code CSS plus compact.

:is()

Si vous souhaitez rechercher tous les éléments enfants h2, li et img dans un élément .post, vous pouvez écrire une liste de sélecteurs comme celle-ci:

.post h2,
.post li,
.post img {
    …
}

La pseudo-classe :is() vous permet d'écrire une version plus compacte:

.post :is(h2, li, img) {
    …
}

La pseudo-classe :is est non seulement plus compacte qu'une liste de sélecteur, mais elle est également plus tolérante. Dans la plupart des cas, si une liste de sélecteurs contient une erreur ou un sélecteur non compatible, celle-ci ne fonctionnera plus. Si les sélecteurs transmis d'une pseudo-classe :is comportent une erreur, le sélecteur non valide sera ignoré, mais les sélecteurs valides seront utilisés.

:not()

Vous pouvez également exclure des éléments avec la pseudo-classe :not(). Par exemple, vous pouvez l'utiliser pour appliquer un style à tous les liens qui n'ont pas d'attribut class.

a:not([class]) {
    color: blue;
}

Une pseudo-classe :not peut également vous aider à améliorer l'accessibilité. Par exemple, un élément <img> doit avoir un élément alt, même s'il s'agit d'une valeur vide. Vous pouvez donc écrire une règle CSS qui ajoute un contour rouge épais aux images non valides:

img:not([alt]) {
    outline: 10px red;
}

Testez vos connaissances

Tester vos connaissances sur les pseudo-classes