Pseudo-classes

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

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 2. <ph type="x-smartling-placeholder">

Source

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

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 1. <ph type="x-smartling-placeholder">

Source

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

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 1. <ph type="x-smartling-placeholder">

Source

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

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 1.3. <ph type="x-smartling-placeholder">

Source

: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

Navigateurs pris en charge

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 1. <ph type="x-smartling-placeholder">

Source

: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

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 3.1. <ph type="x-smartling-placeholder">

Source

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

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 3.1. <ph type="x-smartling-placeholder">

Source

: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

  • Chrome: 47 <ph type="x-smartling-placeholder">
  • Edge: 79 <ph type="x-smartling-placeholder">
  • Firefox: 51 <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

Source

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

  • Chrome: 10. <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 4. <ph type="x-smartling-placeholder">
  • Safari: 5. <ph type="x-smartling-placeholder">

Source

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

  • Chrome: 4. <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 3. <ph type="x-smartling-placeholder">
  • Safari: 3.1. <ph type="x-smartling-placeholder">

Source

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

  • Chrome: 2. <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 1.5. <ph type="x-smartling-placeholder">
  • Safari: 3.1. <ph type="x-smartling-placeholder">

Source

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

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 3.5. <ph type="x-smartling-placeholder">
  • Safari: 3.1. <ph type="x-smartling-placeholder">

Source

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

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 3.5. <ph type="x-smartling-placeholder">
  • Safari: 3.1. <ph type="x-smartling-placeholder">

Source

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

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 3.5. <ph type="x-smartling-placeholder">
  • Safari: 3.1. <ph type="x-smartling-placeholder">

Source

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

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 3.1. <ph type="x-smartling-placeholder">

Source

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

  • Chrome: 88 <ph type="x-smartling-placeholder">
  • Edge: 88 <ph type="x-smartling-placeholder">
  • Firefox: 78 <ph type="x-smartling-placeholder">
  • Safari: 14. <ph type="x-smartling-placeholder">

Source

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

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 3.1. <ph type="x-smartling-placeholder">

Source

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.

Vrai
Vérifiez l'utilisation d'un : simple ou double comme caractère distinctif clé dans le sélecteur.
Faux
Les pseudo-éléments correspondent aux pièces et les pseudo-classes aux états.

Parmi les propositions suivantes, lesquelles sont une pseudo-classe fonctionnelle ?

:is()
🎉
:target
Les pseudo-classes fonctionnelles sont précédées de () pour indiquer qu'elles acceptent les paramètres.
:empty
Les pseudo-classes fonctionnelles sont précédées de () pour indiquer qu'elles acceptent les paramètres.
:not()
🎉

Parmi les pseudo-classes suivantes, lesquelles sont dues à une interaction de 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
🎉