Pseudo-classes

The CSS Podcast - 015: Pseudo-classes

Imaginons que vous ayez un formulaire d'inscription par e-mail et que vous souhaitiez que le champ du formulaire d'adresse e-mail soit entouré d'un cadre rouge s'il contient une adresse e-mail incorrecte. Comment procéder ? Vous pouvez utiliser une pseudo-classe CSS :invalid, qui fait partie des nombreuses pseudo-classes fournies par le navigateur.

Une pseudo-classe vous permet d'appliquer des styles en fonction des changements d'état et des facteurs externes. Cela signifie que votre conception peut réagir aux entrées utilisateur, comme une adresse e-mail incorrecte. Ils sont abordés dans le module sur les sélecteurs, qui vous explique plus en détail leur fonctionnement.

Contrairement aux pseudo-éléments, que vous pouvez découvrir dans le module précédent, les pseudo-classes s'accrochent à des états spécifiques dans lesquels un élément peut se trouver, plutôt que de styliser généralement des 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

Browser Support

• 1
• 12
• 1
• 2

Source

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 appuyer sur cet état avec :hover pour appliquer des styles. Il s'agit d'un moyen utile d'indiquer qu'un élément peut être utilisé.

:active

Browser Support

• 1
• 12
• 1
• 1

Source

Cet état est déclenché lorsqu'un élément est en cours d'interaction (par exemple, un clic) avant que le clic ne soit relâché. 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

Browser Support

• 1
• 12
• 1
• 1

Source

Si un élément peut être sélectionné (par exemple, un <button>), vous pouvez réagir à cet état à l'aide de la pseudo-classe :focus.

Vous pouvez également réagir si un élément enfant de votre élément reçoit la sélection avec :focus-within.

Les éléments sélectionnables, comme les boutons, affichent un anneau de sélection lorsqu'ils sont sélectionnés, même lorsqu'ils sont cliqués. Dans ce cas, un développeur appliquera le CSS suivant:

button:focus {
    outline: none;
}

Ce CSS supprime l'anneau de sélection par défaut du navigateur lorsqu'un élément reçoit la sélection, ce qui pose un problème d'accessibilité pour les utilisateurs qui naviguent sur une page Web à l'aide d'un clavier. S'il n'y a pas de style de focus, ils ne pourront pas suivre l'emplacement actuel du focus lorsqu'ils utiliseront la touche Tabulation. Avec :focus-visible, vous pouvez présenter un style de focus lorsqu'un élément reçoit le focus via le clavier, tout en utilisant la règle outline: none pour l'empêcher lorsqu'un dispositif de pointage interagit avec lui.

button:focus {
    outline: none;
}

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

:target

Browser Support

• 1
• 12
• 1
• 1.3

Source

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

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

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

#content:target {
    background: yellow;
}

Cela permet de mettre en évidence les zones auxquelles un lien de redirection a été spécifiquement associé, comme le contenu principal d'un site Web.

États historiques

:link

Browser Support

• 1
• 12
• 1
• 1

Source

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

:visited

Vous pouvez styliser un lien déjà visité par l'utilisateur à l'aide de la pseudo-classe :visited. Il s'agit de l'état opposé à :link, mais vous disposez de 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, outline-color et à la couleur des éléments 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 avec une spécificité au moins égale. 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 {}

Remarque : Pour des raisons de sécurité, vous ne pouvez modifier que les styles définis par un état :link ou non visité avec la pseudo-classe :visited. Il est donc important de définir d'abord les styles modifiables. Respecter la règle LVHA vous aidera à y parvenir.

États des formulaires

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

:disabled et :enabled

Browser Support

• 1
• 12
• 1
• 3.1

Source

Si un élément de formulaire, tel qu'un <button>, est désactivé par le navigateur, vous pouvez vous associer à cet état à l'aide de 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 besoin de cette pseudo-classe.

:checked et :indeterminate

Browser Support

• 1
• 12
• 1
• 3.1

Source

La pseudo-classe :checked est disponible lorsqu'un élément de formulaire secondaire, tel qu'une case à cocher ou un bouton 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, si vous disposez d'un bouton "Tout sélectionner" qui coche toutes les cases d'un groupe. Si l'utilisateur devait ensuite décocher l'une de ces cases, la case racine ne représenterait plus "tout" coché et devrait être mise dans un état indéterminé.

L'élément <progress> possède également un état indéterminé qui peut être stylisé. Un cas d'utilisation courant consiste à lui donner un aspect rayé pour indiquer qu'on ne sait pas combien d'espace supplémentaire est nécessaire.

:placeholder-shown

Browser Support

• 47
• 79
• 51
• 9

Source

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'un contenu est ajouté au champ, qu'il comporte un placeholder ou non, cet état ne s'applique plus.

États de validation

Browser Support

• 10
• 12
• 4
• 5

Source

Vous pouvez répondre à la validation des formulaires HTML à l'aide de pseudo-classes telles que :valid, :invalid et :in-range. Les pseudo-classes :valid et :invalid sont utiles pour les contextes tels qu'un champ d'adresse e-mail qui comporte un pattern qui 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 au champ suivant en toute sécurité.

La pseudo-classe :in-range est disponible si une entrée comporte un min et un max, comme une entrée numérique et la valeur se situe 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 facultatifs peuvent être sélectionnés à l'aide de la pseudo-classe :optional.

Remarque : Il n'est pas recommandé de se fier uniquement à la couleur pour indiquer les changements d'état, en particulier le rouge et le vert, car les utilisateurs daltoniens et malvoyants peuvent avoir du mal à voir un changement d'état, voire ne pas le voir du tout. Il est judicieux d'utiliser la couleur pour indiquer les changements d'état, ainsi que des modifications de texte et d'icônes pour signifier visuellement le changement.

Sélectionner des éléments par indice, ordre et occurrence

Un groupe de pseudo-classes sélectionne les éléments en fonction de leur emplacement dans le document.

:first-child et :last-child

Browser Support

• 4
• 12
• 3
• 3.1

Source

Si vous souhaitez trouver 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

Browser Support

• 2
• 12
• 1.5
• 3.1

Source

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

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

Vous pouvez sélectionner :first-of-type et :last-of-type, qui semblent au premier abord faire la même chose que :first-child et :last-child, mais considérez ce code HTML:

<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 serait de couleur rouge, car le premier enfant est un paragraphe et non un div. La pseudo-classe :first-of-type est utile dans ce contexte.

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

Même si le premier <div> est le deuxième enfant, il s'agit toujours du 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

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

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

Vous pouvez également transmettre plusieurs indices dans 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éguliers à l'aide de la microsyntaxe An+B.

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

Ce sélecteur sélectionne tous les troisièmes éléments, en commençant par l'élément 3. n dans cette expression est l'index, qui commence à zéro. Le 3 (3n) correspond au facteur de multiplication de cet indice.

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

Vous pouvez tester ce type de sélecteur avec cet outil de test de l'enfant n° n ou cet outil de sélection de la quantité.

:only-of-type

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

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

Rechercher des éléments vides

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

:empty

Browser Support

• 1
• 12
• 1
• 3.1

Source

Si un élément n'a pas d'enfants, la pseudo-classe :empty s'applique à eux. Les enfants ne sont pas seulement des éléments HTML ou des nœuds de texte. Ils peuvent également être des espaces blancs, ce qui peut prêter à 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 vide entre les <div> d'ouverture et de fermeture. Par conséquent, le vide ne fonctionnera pas.

La pseudo-classe :empty peut s'avérer utile si vous avez peu de contrôle sur le code HTML et que vous souhaitez masquer des éléments vides, comme un éditeur de contenu WYSIWYG. Ici, un éditeur a ajouté un paragraphe vide et isolé.

<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 le trouver et le masquer.

.post :empty {
    display: none;
}

Rechercher et exclure plusieurs éléments

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

:is()

Browser Support

• 88
• 88
• 78
• 14

Source

Si vous souhaitez trouver tous les éléments enfants h2, li et img d'un élément .post, vous pouvez envisager d'écrire une liste de sélecteurs comme suit:

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

Avec la pseudo-classe :is(), vous pouvez écrire une version plus compacte:

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

La pseudo-classe :is est non seulement plus compacte qu'une liste de sélecteurs, mais elle est aussi plus tolérante. Dans la plupart des cas, si une erreur ou un sélecteur non compatible se produit dans une liste de sélecteurs, l'ensemble de la liste ne fonctionne plus. En cas d'erreur dans les sélecteurs transmis dans une pseudo-classe :is, le sélecteur non valide est ignoré, mais ceux qui sont valides sont utilisés.

:not()

Browser Support

• 1
• 12
• 1
• 3.1

Source

Vous pouvez également exclure des éléments à l'aide de la pseudo-classe :not(). Par exemple, vous pouvez l'utiliser pour styliser tous les liens qui ne comportent pas d'attribut class.

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

Une pseudo-classe :not peut également vous aider à améliorer l'accessibilité. Par exemple, un <img> doit avoir un 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;
}

Vérifier vos connaissances

Tester vos connaissances sur les pseudo-classes

Les pseudo-classes agissent comme si une classe avait été appliquée dynamiquement à un élément, tandis que les pseudo-éléments agissent sur l'élément lui-même.

Vrai

Vérifiez si un seul ou deux : sont utilisés comme caractère distinctif clé dans le sélecteur.

Faux

Les pseudo-éléments sont destinés aux parties, les pseudo-classes à l'état.

Parmi les propositions suivantes, lesquelles sont des pseudo-classes fonctionnelles ?

:is()

🎉

:target

Les pseudo-classes fonctionnelles sont suivies de () pour indiquer qu'elles acceptent des paramètres.

:empty

Les pseudo-classes fonctionnelles sont suivies de () pour indiquer qu'elles acceptent des paramètres.

:not()

🎉

Quelles pseudo-classes sont dues à une interaction avec l'utilisateur ?

:hover

🎉

:press

Essayez encore.

:squeeze

Essayez encore.

:target

🎉

:focus-within

🎉

Parmi les propositions suivantes, lesquelles sont des pseudo-classes d'état <form> ?

:enabled

🎉

:fresh

Essayez encore.

:indeterminate

🎉

:checked

🎉

:in-range

🎉

:loading

Essayez encore.

:valid

🎉