Les pseudo-classes

Les pseudo-classes sont des compléments que vous pouvez ajouter après votre sélecteur pour le modifier.

En règle générale, une pseudo-classe permet de définir que le style s'applique seulement sous certaines conditions et s'écrit après deux points: comme ceci article:pseudoClasse. Certaines pseudo-classes ont des parenthèses pour préciser leur comportement.

Comme les media queries, les pseudo-classes permettent aussi une mise en forme conditonnelle. Mais plutôt que d'être conditionnelles à l'enviorenement qu'est la page, elle sont conditionnelles à l'état de l'élément associé.

:hover

:hover n'applique du style que si l'élément est survolé. Tout les débutants trouvent ça super, jusqu'à ce qu'ils réalisent que le survol n'existe pas sur téléphone (vous savez, le truc avec un tout petit écran qui représente 70% du trafic)

button:hover {
  background-color: azure;
}

:visited

Encore plus spécifique, :visited permet de donner un style particulier aux liens qui ont été visités.

a {
  color: hotpink;
}

a:visited {
  color: limegreen;
}

Comme ça, les liens que l'utilisateur n'as pas visités seront roses, et ceux visités seront verts. Plutôt que le bleu et mauve standard.

:nth-child(n)

Celui là il est marrant parce qu'il est quand même lié à la structure de l'HTML.

nth-child(n) permet de spécifier que la règle ne s'applique qu'à tous les N enfants.

Par exemple, ce bout de css colorera le fond d'un <li> sur deux.

li:nth-child(2n) {
  background-color: azure;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

:nth-child(3n) aurait été un sur trois, :nth-child(4n) un enfant sur quatre etc...

Il reste plein de pseudo-classes que vous pouvez explorer ici : https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes

Mais je trouve que ce qu'on a vu est pas mal déjà