Télécharger le PDF du cours
Il existe de nombreuses pseudo-classes en CSS. Dans cette leçon, nous n’allons étudier en détail que les plus utilisées car toutes les pseudo-classes s’utilisent de manière similaire (la syntaxe sera toujours la même).
Ainsi, il vous suffira de comprendre comment appliquer une pseudo-classe pour savoir toutes les utiliser, à condition bien évidemment de savoir à quoi correspond chaque pseudo-classe.
Pour cela, je vais également vous fournir un tableau récapitulatif de toutes les pseudo-classes actuellement disponibles afin que vous puissiez piocher dedans selon vos besoins.
Définition et syntaxe des pseudo-classes
Les pseudo-classes vont nous permettre de cibler des éléments HTML en fonction de leur état, ou plus exactement d’appliquer des règles CSS à des éléments HTML uniquement dans un certain contexte (lorsqu’ils sont dans un certain état).
Ainsi, nous allons pouvoir modifier les styles d’un lien HTML selon que le curseur de la souris d’un visiteur soit dessus (état hover) ou qu’il ait été déjà cliqué (état visited).
Pour utiliser une pseudo classe en CSS, il faudra commencer avec un sélecteur « classique » (simple ou complexe) qui sera suivi du caractère : (deux points) puis du nom de la pseudo-classe ou de l’état à appliquer.
Par exemple, on va pouvoir changer la couleur de fond des éléments div d’une page en orange lors du survol du curseur de la souris uniquement en écrivant en CSS div:hover{background-color : orange ;}.
Les pseudo-classes :hover, :visited, :active et :link
La pseudo-classe :hover va nous permettre d’appliquer des styles à un élément HTML uniquement lorsque celui-ci est survolé par la souris d’un utilisateur. Cette pseudo-classe peut être utilisée avec la majorité des éléments HTML mais on l’utilisera généralement pour appliquer des styles différents à des liens lorsqu’un utilisateur passe sa souris dessus.
La pseudo-classe CSS :visited va nous permettre d’appliquer des styles à un élément déjà visité, c’est-à-dire déjà cliqué. En pratique, cette pseudo-classe va une nouvelle fois surtout être utilisée avec des éléments de lien. Ainsi, on va pouvoir changer l’apparence d’un lien après que celui-ci ait été cliqué, lorsque l’utilisateur revient sur notre page de départ.
La pseudo-classe CSS :active va elle nous permettre de modifier les styles d’un élément HTML lors d’un état très particulier qui est le moment où l’on clique sur l’élément. Pour bien visualiser cet état, je vous conseille de rester cliqué sur l’élément en question le temps de voir les changements de style. Une nouvelle fois, en pratique, cette pseudo-classe va généralement être utilisée pour modifier l’apparence des liens au moment du clic.
La pseudo-classe :link va elle nous permettre au contraire de cibler tous les liens non visités et de leur appliquer des styles particuliers en CSS.
See the Pen Cours HTML CSS 10.2.1 by Pierre (@pierregiraud) on CodePen.
Notez qu’en cas d’application de plusieurs des pseudo-classes ci-dessus à un élément on respectera l’ordre d’écriture suivant en CSS : d’abord les déclarations liées à :link puis :visited puis :hover et enfin :active.
Cela va permettre d’avoir le comportement le plus logique en cas de conflit : les styles liés à :active s’appliqueront uniquement lors du clic sur l’élément, ceux liés à :hover s’appliqueront lors du survol sans clic et etc.
Les pseudo-classes :first-child, :first-of-type, :last-child et :last-of-type
Les pseudo-classes :first-child et :first-of-type vont nous permettre de sélectionner respectivement un élément qui va être le premier enfant de son parent et un élément qui va être le premier élément enfant de ce type de son parent.
Par exemple, le sélecteur p:first-child va sélectionner tous les éléments p d’une page qui sont les premiers enfant de leur parent tandis que le sélecteur CSS p:first-of-type va nous permettre de sélectionner tous les éléments p qui sont le premier élément p enfant de leur parent.
A l’inverse, les pseudo-classes CSS :last-child et :last-of-type vont nous permettre de sélectionner respectivement un élément qui va être le dernier enfant de son parent et un élément qui va être le dernier élément enfant de ce type de son parent.
Ainsi, le sélecteur CSS last-child va sélectionner tous les éléments p d’une page qui sont les derniers enfants de leur parent tandis qu’on va pouvoir sélectionner tous les éléments p qui sont le dernier élément p enfant de leur parent grâce au sélecteur CSS last-of-type.
See the Pen Cours HTML CSS 10.2.2 by Pierre (@pierregiraud) on CodePen.
Notez que dans si plusieurs pseudo-classes ciblent un même élément, alors les styles appliqués en cas de conflit à l’élément seront une nouvelle fois ceux de la dernière pseudo-classe déclarée en CSS. Regardez plutôt le code ci-dessous pour vous en convaincre :
See the Pen Cours HTML CSS 10.2.3 by Pierre (@pierregiraud) on CodePen.
Ici, chacun de nos éléments div ne contient qu’un paragraphe qui est donc à la fois le premier enfant du div, premier élément de ce type, dernier enfant et dernier élément de ce type. On se contente d’inverser l’ordre des déclarations en CSS à chaque fois.
Les pseudo-classes :nth-child() et :nth-of-type()
Pour pouvoir cibler n’importe quel élément HTML en fonction de sa place dans le document, nous allons également pouvoir utiliser les sélecteurs CSS :nth-child(n) et nth-of-type(n) qui vont nous permettre de sélectionner un élément HTML qui est le énième enfant de son parent ou un élément qui est le énième enfant de ce type de son parent.
Par exemple, le sélecteur CSS p:nth-child(2) va nous permettre de sélectionner tous les éléments p qui sont les deuxièmes enfants de leur parent tandis que le sélecteur p:nth-of-type(2) sélectionne tous les paragraphes qui sont les deuxièmes enfants de type p de leur parent.
See the Pen Cours HTML CSS 10.2.4 by Pierre (@pierregiraud) on CodePen.
Là encore, si plusieurs pseudo-classes ciblent le même élément (que ce soit :first-child, :nth-child(), :nth-of-type() ou :last-child, etc. alors en cas de conflit les styles de la dernière pseudo-classe déclarée s’appliqueront.
Liste complète des pseudo-classes et définition
Vous pourrez trouver ci-dessous toutes les pseudo-classes avec la description de leur comportement et la version CSS dans laquelle elles sont passées comme recommandation pour référence.
Les pseudo-classes dont la version est « 3/4 » sont celles dont la définition initiale a été posée avec le CSS3 mais dont la définition va certainement être modifiée avec la prochaine version du CSS.
De plus, notez que certaines pseudo-classes ont été créées pour ne fonctionner qu’avec certains éléments en particulier et notamment avec des éléments de formulaire que nous étudierons plus tard.
| Sélecteur | Description | Version CSS |
|---|---|---|
E:link |
Sélectionne tout élément E représentant l’ancre d’un lien non visité jusqu’à présent | CSS1 |
E:visited |
Sélectionne tout élément E représentant l’ancre d’un lien déjà visité | CSS1 |
E:active |
Sélectionne un élément E au moment où il est cliqué | CSS1 |
E:hover |
Sélectionne un élément E lorsque le curseur de la souris passe dessus | CSS2 |
E:focus |
Sélectionne un élément E qui a le focus (dans lequel le curseur de la souris est placé) | CSS2 |
E:first-child |
Sélectionne tout élément E étant le premier enfant de son parent | CSS2 |
E:lang(fr) |
Sélectionne tout élément E dont l’attribut langage possède la valeur « fr » | CSS2 |
E:target |
Sélectionne un élément E contenant une ancre qui vient d’être cliquée à partir d’un lien ancre | CSS3 |
E:enabled |
Sélectionne tout élément E avec lequel l’utilisateur peut interagir et qui est activé | CSS3 |
E:disabled |
Sélectionne tout élément E avec lequel l’utilisateur peut interagir et qui est desactivé | CSS3 |
E:root
| Sélectionne un élément E racine du document | CSS3 |
E:empty |
Sélectionne tout élément E qui ne possède pas d’enfant (ni de noeud de type texte) | CSS3 |
E:nth-child(n) |
Sélectionne tout élément E étant le n-ième enfant de son parent | CSS3 |
E:nth-last-child(n) |
Sélectionne tout élément E étant le n-ième enfant de son parent en comptant les enfants à partir du dernier | CSS3 |
E:checked |
Sélectionne tout élément E de type input coché au sens large (checked ou selected) | CSS3 |
E:last-child |
Sélectionne tout élément E étant le dernier enfant de son parent | CSS3 |
E:only-child |
Sélectionne tout élément E qui est le seul enfant de son parent | CSS3 |
E:nth-of-type(n) |
Sélectionne tout élément E étant le n-ième enfant d’un certain type par rapport à son parent | CSS3 |
E:nth-last-of-type(n) |
Sélectionne tout élément E étant le n-ième enfant d’un certain type par rapport à son parent en comptant à partir de la fin | CSS3 |
E:first-of-type |
Sélectionne tout élément E premier enfant de son type par rapport à son parent | CSS3 |
E:last-of-type |
Sélectionne tout élément E dernier enfant de son type par rapport à son parent | CSS3 |
E:only-of-type |
Sélectionne tout élément E seul enfant de son type par rapport à son parent | CSS3 |
E:read-write |
Sélectionne tout élément E de type input avec lequel l’utilisateur peut interagir (comme un champ dans lequel il peut écrire par exemple) | 3-UI/4 |
E:read-only |
Sélectionne tout élément E de type input avec lequel l’utilisateur ne peut pas interagir (éléments possédant un attribut disabled par exemple) | 3-UI/4 |
E:placeholder-shown |
Sélectionne tout élément E qui affiche actuellement la valeur de son attribut placeholder | 3-UI/4 |
E:default |
Sélectionne un élément E dans une liste ou un groupe qui est l’élément défini par défaut | 3-UI/4 |
E:valid |
Sélectionne tout élément E de type input dont la valeur est évaluée comme valide (dont la valeur possède une forme correspondant à ce qui est attendu) | 3-UI/4 |
E:invalid |
Sélectionne tout élément E de type input dont la valeur est évaluée comme invalide (valeur ne correspondant pas à ce qui est attendu) | 3-UI/4 |
E:in-range |
Sélectionne tout élément E de type input dont la valeur fournie se situe dans une fourchette de valeurs prédéfinies | 3-UI/4 |
E:out-of-range |
Sélectionne tout élément E de type input dont la valeur fournie se situe en dehors d’une certaine fourchette de valeurs prédéfinies | 3-UI/4 |
E:required |
Sélectionne tout élément E de type input dont la valeur doit être renseignée (élément possédant un attribut required) | 3-UI/4 |
E:optional |
Sélectionne tout élément E de type input dont la valeur ne doit pas obligatoirement être renseignée | 3-UI/4 |
E:not(E1, .c1) |
Sélectionne tout élément E qui n’est pas de type E1 et qui ne possède pas d’attribut class= »c1″ | 3/4 |
Notez qu’il existe encore d’autres pseudo-classes très particulières comme :first (pour gérer l’impression de la première page d’un document) ou qui ne sont pas encore au statut de recommandation mais qui sont pour le moment en développement comme dir(), scope, drop, indeterminate, etc.
