Dans cet article, le troisième de notre série sur les sélecteurs, nous parlerons des pseudo-sélecteurs. Ces derniers ne sélectionnent pas des éléments à proprement parler, mais plutôt des parties d'éléments, ou des éléments dans un certain contexte uniquement. Ils comportent deux types principaux : les pseudo-classes et les pseudo-éléments.

Pseudo-classes

Activer une pseudo-classe de CSS consiste à ajouter un mot‑clé à la fin d'un sélecteur en le faisant précéder de deux‑points  (:) ; elle s'utilise pour spécifier que vous voulez donner un style à l'élément mais seulement quand il est dans un certain état. Par exemple, vous souhaitez donner un style différent à un élément lien lorsque le pointeur de souris passe dessus ou à une case à cocher selon qu'elle est activée ou désactivée ou bien encore à un élément s'il est premier enfant de son parent dans l'arbre DOM.

Nous n'allons pas pousser l'étude de chaque pseudo-classe maintenant, ce n'est pas l'objectif de l'Espace d'Apprentissage d'enseigner tout en détail exhaustivement. Nous en verrons certainement quelques-unes plus en détail plus tard, le cas échéant.

Un exemple de pseudo-classe

Pour le moment, voyons un simple exemple d'utilisation de pseudo-classe. Primo, un morceau de code HTML :

<a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a>

Puis quelques règles CSS :

/* Ces styles composeront notre lien dans chacun de ses états */
a {
  color: blue;
  font-weight: bold;
}

/* Nous voulons que les liens visités aient la même couleur que
   les liens non visités */
a:visited {
  color: blue;
}

/* Nous mettrons le lien en surbrillance quand il est survolé par le
   pointeur de souris, activé ou reçoit le focus (clavier) */
a:hover,
a:active,
a:focus {
  color: darkred;
  text-decoration: none;
}

Bien, maintenant jouons avec le lien que nous venons de styliser !

Apprentissage actif : une liste d'informations zébrée

À votre tour. Dans ce paragraphe d'apprentissage actif, vous devez ajouter des pseudo-classes pour mettre des bandes de zébrage dans une liste de liens d'informations et pour les styler de manière diffétente quand le pointeur de souris passe dessus. Dans cet exercice, il vous suffit de modifier les trois dernières règles. Quelques astuces :

  1. Nous avons déjà vu comment écrire la deuxième pseudo-classe pour le survol.
  2. Pour les bandes alternées, vous devrez utiliser une pseudo classe comme :nth-of-type(). La pseudo-classe aura deux règles de couleur légérement différentes selon que l'élément est de rang pair ou impair. Voyons si vous trouverez comment faire cela !

Si vous faites une erreur, vous pouvez tout Réinitialiser à l'aide du bouton correspondant. Si vous êtes vraiment bloqué, pressez Voir la solution pour afficher une réponse possible.

Pseudo-éléments

Les pseudo-elements ressemblent beaucoup aux pseudo-classes, mais il y a quelques différences. Les mots-clés sont cette fois-ci précédés par deux fois deux‑points (::) ; ils s'ajoutent à la fin du sélecteur pour ne retenir qu'une partie de ce dernier.

Ils ont chacun un comportement propre et des caractéristiques intéressantes, mais les étudier en détail pour l'instant serait hors de propos.

Un exemple de pseudo-élément

Voici un simple exemple de CSS qui sélectionne une espace après chaque lien et y ajoute une flèche :

<ul>
  <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a> est défini dans le glossaire de MDN.</li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML">HTML</a> est defini dans le glossaire de MDN.</li>
</ul>

Ajoutons cette règle CSS :

/* Une flèche sera ajoutée après tous les éléments avec un attribut "href", dont
 les valeurs commencent par "http" (pour indiquer qu'il s'agit d'un lien externe */
[href^=http]::after {
  content: '⤴';
}

Voici ce que nous obtenons :

Apprentissage actif : un paragraphe raffiné

Pour l'apprentissage actif, nous avons un paragraphe de style raffiné ! Tout ce que vous avez à faire ici est d'appliquer les deux ensembles de règles, à la première ligne du paragraphe et à la première lettre, en utilisant les pseudo-éléments ::first-line et ::first-letter. La première ligne du paragraphe sera mise en gras et la première lettre sera transformée en lettrine — un joli chapeau — lui donnant un style suranné.

Si vous faites une erreur, vous pouvez tout Réinitialiser à l'aide du bouton correspondant. Si vous êtes vraiment bloqué, pressez Voir la solution pour afficher une réponse possible.

Dans l'article suivant

Nous bouclerons le thème des sélecteurs des CSS en regardant Combinaisons et sélecteurs multiples.

 

Dans ce module

Étiquettes et contributeurs liés au document

Contributeurs à cette page : Dralyab
Dernière mise à jour par : Dralyab,