Pseudo classe
État du HTML
Un élément HTML peut se trouver dans plusieurs états et cet état peut changer lors de son interaction avec l'utilisateur et ce, même si aucun Javascript n'est utilisé. Un exemple simple est la case à coché, le <input type="checkbox">. Ce genre de balise HTML à un état interne pour indiquer si la case est cochée ou non. Plusieurs autres états existes, tel que si un lien a déjà été visité ou non, si la souris est en train de survoler un élément, si un élément est le premier de son parent et plusieurs autres.
En CSS, nous pouvons mettre appliquer des règles CSS sur ces états. Essentiellement, mettre du CSS uniquement si l'état d'un élément HTML a une valeur particulière. Pour ce faire, nous utiliserons les pseudo-classes. Les pseudo-classes sont des sélecteurs CSS qui début toujours par le symbole :. La page ci-dessous fera une démonstration des pseudo-classes les plus typique, mais vous pouvez trouver la liste complète ici:
Survol de souris
Applique du CSS si l'élément est survolé par la souris.
Clique de souris
Applique du CSS si l'élément est présentement cliqué par la souris.
Case coché
Applique du CSS si l'élément est une case à coché ou un bouton radio qui est coché.
Input désactivé
Applique du CSS si l'élément est un input qui a la propriété disabled.
Premier ou dernier élément
Applique du CSS si l'élément est le premier ou le dernier dans son parent.
Inverser la sélection
Applique du CSS si l'élément ne respecte pas la condition interne.