Les pseudo-classes CSS

Les pseudo-classes vont nous permettre d’appliquer des styles à des éléments HTML uniquement lorsque ceux-ci sont dans un certain état (cliqués, activés, etc.).

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 : 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.

Support HTML pour exemple d'utilisation des pseudo classes active hover visited link

Utilisation des pseudo classes CSS hover active visited link

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 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 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.

Support HTML pour exemple d'utilisation des pseudo classes first-child last-child first-of-type

Utilisation des pseudo classes CSS first-child, first-of-type, last-child et last-of-type

On peut sélectionner des éléments grâce aux pseudo classes first-child last-child en CSS

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.

Support HTML pour exemple d'utilisation de la pseudo classe CSS nth-child

Utilisation de la pseudo classe CSS nth-child

On cible le énième enfant d'un élément HTML en CSS avec nth-child

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électeurDescriptionVersion CSS
E:linkSélectionne tout élément E représentant l’ancre d’un lien non visité jusqu’à présentCSS1
E:visitedSélectionne tout élément E représentant l’ancre d’un lien déjà visitéCSS1
E:activeSélectionne un élément E au moment où il est cliquéCSS1
E:hoverSélectionne un élément E lorsque le curseur de la souris passe dessusCSS2
E:focusSélectionne un élément E qui a le focus (dans lequel le curseur de la souris est placé)CSS2
E:first-childSélectionne tout élément E étant le premier enfant de son parentCSS2
E:lang(fr)Sélectionne tout élément E dont l’attribut langage possède la valeur « fr »CSS2
E:targetSélectionne un élément E contenant une ancre qui vient d’être cliquée à partir d’un lien ancreCSS3
E:enabledSélectionne tout élément E avec lequel l’utilisateur peut interagir et qui est activéCSS3
E:disabledSé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 documentCSS3
E:emptySé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 parentCSS3
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 dernierCSS3
E:checkedSélectionne tout élément E de type input coché au sens large (checked ou selected)CSS3
E:last-childSélectionne tout élément E étant le dernier enfant de son parentCSS3
E:only-childSélectionne tout élément E qui est le seul enfant de son parentCSS3
E:nth-of-type(n)Sélectionne tout élément E étant le n-ième enfant d’un certain type par rapport à son parentCSS3
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 finCSS3
E:first-of-typeSélectionne tout élément E premier enfant de son type par rapport à son parentCSS3
E:last-of-typeSélectionne tout élément E dernier enfant de son type par rapport à son parentCSS3
E:only-of-typeSélectionne tout élément E seul enfant de son type par rapport à son parentCSS3
E:read-writeSé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-onlySé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-shownSélectionne tout élément E qui affiche actuellement la valeur de son attribut placeholder3-UI/4
E:defaultSélectionne un élément E dans une liste ou un groupe qui est l’élément défini par défaut3-UI/4
E:validSé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:invalidSé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-rangeSélectionne tout élément E de type input dont la valeur fournie se situe dans une fourchette de valeurs prédéfinies3-UI/4
E:out-of-rangeSélectionne tout élément E de type input dont la valeur fournie se situe en dehors d’une certaine fourchette de valeurs prédéfinies3-UI/4
E:requiredSé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:optionalSélectionne tout élément E de type input dont la valeur ne doit pas obligatoirement être renseignée3-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.

Laisser un commentaire