Podcast CSS – 015: pseudo-classes
Supposons que vous ayez un
formulaire d'inscription par e-mail,
et que vous souhaitez que le champ du formulaire d'e-mail ait 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 des changements d'état et de facteurs externes. Cela signifie que votre conception peut réagir à une entrée utilisateur telle qu’une adresse e-mail non valide. Ces paramètres sont abordés dans le module sélecteurs. et ce module vous les présentera en détail.
Contrairement aux pseudo-éléments, Vous en saurez plus 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 que de styliser généralement les 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
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Si un utilisateur a un dispositif de pointage
comme une souris ou un pavé tactile,
et le placent
sur un élément,
vous pouvez vous rattacher
à cet état avec
:hover
pour appliquer des styles
Il s'agit d'un moyen utile pour indiquer qu'il est possible d'interagir avec un élément.
:active
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Cet état est déclenché lorsqu'un élément fait l'objet d'une interaction active : comme un clic, avant le relâchement du clic. Si un périphérique de pointage comme une souris est utilisé, cet état correspond au début du clic et n'a pas encore été relâché.
:focus
, :focus-within
et :focus-visible
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Si un élément peut être sélectionné (par exemple, un <button>
) :
vous pouvez réagir à cet état
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 focus dès lors qu'ils font la mise au point, même si l'utilisateur clique dessus. Dans ce type de situation, un développeur applique le CSS suivant:
button:focus {
outline: none;
}
Ce CSS supprime l'anneau de focus par défaut du navigateur lorsqu'un élément est sélectionné,
ce qui présente un problème d'accessibilité pour les utilisateurs qui naviguent sur une page Web avec un clavier.
Si aucun style de focus n'est défini,
ils ne pourront pas savoir où se trouve le curseur en utilisant la touche Tabulation.
Avec :focus-visible
vous pouvez présenter un style de focus lorsqu'un élément est sélectionné via le clavier,
tout en utilisant la règle outline: none
pour l'empêcher lorsqu'un périphérique de pointeur interagit avec elle.
button:focus {
outline: none;
}
button:focus-visible {
outline: 1px solid black;
}
:target
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
:target
La pseudo-classe sélectionne un élément dont l'élément 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 est utile pour mettre en évidence les domaines qui ont pu être spécifiquement liés, comme le contenu principal d'un site Web, via un lien "Ignorer".
États historiques
:link
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
:link
La pseudo-classe peut être appliquée à n'importe quel élément <a>
ayant une valeur href
qui n'a pas encore été consultée.
:visited
Vous pouvez appliquer un style à un lien déjà consulté par l'utilisateur à l'aide de la méthode
Pseudo-classe :visited
.
C'est l'état opposé à :link
, mais vous avez moins de propriétés CSS à utiliser pour
raisons de sécurité.
Vous ne pouvez appliquer un style qu'aux types suivants : 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
,
elle peut être remplacée par une pseudo-classe de lien ayant au moins une valeur de spécificité égale.
Pour cette raison,
nous vous recommandons d'utiliser la règle LVHA pour styliser les liens avec des pseudo-classes dans un ordre particulier:
:link
, :visited
, :hover
et :active
.
a:link {}
a:visited {}
a:hover {}
a:active {}
États du formulaire
Les pseudo-classes suivantes peuvent sélectionner des éléments de formulaire, dans les différents états dans lesquels ces éléments pourraient se trouver au cours de leurs interactions.
:disabled
et :enabled
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
S'il s'agit d'un élément du formulaire,
tel qu'un <button>
est désactivé par le navigateur,
vous pouvez vous rattacher à cet état avec
Pseudo-classe :disabled
.
:enabled
est disponible pour l'état opposé,
bien que les éléments du formulaire soient également :enabled
par défaut,
Par conséquent, il se peut que vous n'ayez pas
besoin de cette pseudo-classe.
:checked
et :indeterminate
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
:checked
est disponible lorsqu'un élément de formulaire associé,
comme une case à cocher ou
une case d'option est cochée.
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 que l'on appelle
l'état :indeterminate
.
C'est le cas, par exemple, lorsque l'option "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 à cocher racine ne représente plus "all" en cours de vérification, et doivent donc être placés dans un état indéterminé.
L'élément <progress>
présente également un état indéterminé auquel un style peut être appliqué.
Un cas d'utilisation courant consiste à lui donner une apparence rayée pour indiquer qu'il est inconnu du volume de plus nécessaire.
:placeholder-shown
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Si un champ de formulaire comporte un attribut placeholder
et aucune valeur,
le :placeholder-shown
peut être utilisée pour associer des styles à cet état.
Dès qu'il y a du contenu sur le terrain,
qu'elle comporte un placeholder
ou non,
cet état ne s'appliquera plus.
États de validation
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Vous pouvez répondre à la validation de formulaire HTML avec des pseudo-classes comme
:valid
,
:invalid
et
:in-range
Les pseudo-classes :valid
et :invalid
sont utiles pour les contextes
tel qu'un champ d'adresse e-mail dont l'pattern
doit correspondre,
pour qu'il soit un champ valide.
L'utilisateur peut voir cet état de valeur valide,
en les aidant à comprendre qu’ils peuvent
passer au champ suivant en toute sécurité.
La pseudo-classe :in-range
est disponible si une entrée possède un min
et un max
.
comme une entrée numérique et que la valeur est comprise dans ces limites.
Avec les formulaires HTML,
vous pouvez déterminer qu'un champ est obligatoire à l'aide de l'attribut required
.
:required
une pseudo-classe sera disponible pour les champs obligatoires.
Les champs qui ne sont pas obligatoires peuvent être sélectionnés à l'aide de la commande
Pseudo-classe :optional
.
Sélectionner des éléments en fonction de leur index, leur ordre et leur occurrence
Il existe un groupe de pseudo-classes qui sélectionnent les éléments en fonction de leur emplacement dans le document.
:first-child
et :last-child
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Si vous voulez trouver
le premier ou le dernier élément,
vous pouvez utiliser
:first-child
et
:last-child
Ces pseudo-classes renverront le premier ou le dernier élément d'un groupe d'éléments frères.
:only-child
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Vous pouvez également sélectionner des éléments
qui n'ont pas de frères et sœurs,
avec le
Pseudo-classe :only-child
.
:first-of-type
et :last-of-type
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Vous pouvez sélectionner
:first-of-type
et
:last-of-type
, qui, au début,
semblent avoir la même fonction que :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 n'est coloré en 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 type dans l'élément .my-parent
,
donc avec cette règle, il sera coloré en rouge.
:nth-child
et :nth-of-type
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Vous n'êtes pas non plus limité aux premier et dernier enfants, et aux types.
Les :nth-child
et
:nth-of-type
Les pseudo-classes vous permettent de spécifier un élément ayant un certain index.
L'indexation dans les sélecteurs CSS commence à 1.
Vous pouvez également transmettre plus d'un 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 pour rechercher des éléments à intervalles réguliers, à l'aide de la microsyntaxe An+B.
li:nth-child(3n+3) {
background: yellow;
}
Ce sélecteur sélectionne
tous les trois éléments,
à partir de l'élément 3.
Dans cette expression, n
correspond à l'index.
qui commence à zéro, le 3 (3n
) correspond au nombre de fois où vous multipliez 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 passé à 1
.
donc (3 * 1) + 3)
.
Cette expression fonctionne à la fois pour :nth-child
et :nth-of-type
.
Vous pouvez tester ce type de sélecteur n-ième testeur enfant ou cette outil de sélection de quantité.
:only-of-type
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Enfin, vous pouvez trouver le seul élément d'un certain type dans un groupe de frères et sœurs avec
:only-of-type
Cela est utile si vous souhaitez sélectionner des listes contenant un seul élément,
ou si vous voulez trouver 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 aussi une pseudo-classe.
:empty
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Si un élément n'a pas d'enfants, le
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 aussi être des espaces blancs,
Ce qui peut être déroutant lorsque vous déboguez le code HTML suivant et que vous vous demandez pourquoi il ne fonctionne pas avec :empty
:
<div>
</div>
La raison en est qu'il y a un espace blanc entre les <div>
d'ouverture et de fermeture,
donc vide ne fonctionnera pas.
La pseudo-classe :empty
peut être utile si vous avez peu de contrôle sur le code HTML et que vous souhaitez masquer les éléments vides.
comme un éditeur de contenu WYSIWYG.
Ici, un éditeur a ajouté un paragraphe vide.
<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 code CSS plus compact.
:is()
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Si vous souhaitez trouver tous les éléments enfants h2
, li
et img
dans un élément .post
, procédez comme suit :
vous pouvez envisager d'écrire une liste de sélecteur comme ceci:
.post h2,
.post li,
.post img {
…
}
Avec le :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 également plus tolérante.
Dans la plupart des cas,
s'il y a une erreur ou un sélecteur non
compatible dans une liste de sélecteurs,
la liste complète de
sélecteurs ne fonctionnera plus.
Si les sélecteurs transmis dans une pseudo-classe :is
comportent une erreur,
le sélecteur non valide sera ignoré, mais il utilisera ceux qui sont valides.
:not()
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Vous pouvez également exclure des éléments
Pseudo-classe :not()
.
Par exemple, vous pouvez l'utiliser pour appliquer un style à 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;
}
Testez vos connaissances
Tester vos connaissances sur les pseudo-classes
Les pseudo-classes agissent comme si une classe était appliquée de manière dynamique à un élément, tandis que les pseudo-éléments agissent sur un élément lui-même.
Parmi les propositions suivantes, lesquelles sont une pseudo-classe fonctionnelle ?
:empty
:not()
:target
:is()
Parmi les pseudo-classes suivantes, lesquelles sont dues à une interaction de l'utilisateur ?
:focus-within
:target
:hover
:squeeze
:press
Parmi les propositions suivantes, lesquelles sont des pseudo-classes d'état <form>
?
:fresh
:indeterminate
:valid
:checked
:loading
:in-range
:enabled