Il existe de nombreux types de sélecteurs CSS et autant de moyens de cibler des contenus HTML en CSS :
- On peut cibler un type d’élément (comme l’élément
ppar exemple) en précisant le nom générique du type d’élément auquel on souhaite appliquer certains styles en CSS (auquel cas les styles s’appliqueront à tous les éléments de ce type) ; - On peut donner un nom précis à un élément en HTML à l’aide d’un attribut
classouidpar exemple et ensuite cibler l’élément ou les élément en CSS grâce à leurs attributs ; - On peut utiliser ce qu’on appelle des sélecteur CSS combinateurs, c’est-à-dire combiner des sélecteurs CSS simples pour en créer de complexes nous permettant de cibler des contenus HTML de manière très précise ;
- On peut encore cibler les éléments HTML grâce au fait qu’ils possèdent un attribut en particulier ou qu’un attribut possède une valeur ;
- On peut cibler les éléments HTML en CSS en utilisant des pseudo classes et ainsi n’appliquer certains styles à ces éléments que lors d’un état particulier ;
- On peut cibler les éléments HTML en utilisant les pseudo éléments en CSS et donc n’appliquer des styles qu’à une certaine partie de l’élément sélectionné.
Les sélecteurs de type « éléments HTML » sont appelés des sélecteurs CSS simples car il suffit d’indiquer le nom d’un élément pour lui attribuer des styles.
En revanche, l’utilisation de caractères spéciaux pour naviguer dans notre page HTML et cibler un élément en particulier va créer ce qu’on appelle des sélecteurs CSS complexes car un sélecteur complexe va être composé de différents sélecteurs juxtaposés.
Liste complète de tous les sélecteurs CSS (sélecteurs CSS3 et CSS4 inclus)
Vous pourrez trouver ci-dessous une liste exhaustive de tous les sélecteurs CSS que l’on va pouvoir utiliser pour cibler du contenu HTML. Attention cependant : certains des sélecteurs de cette liste sont encore en phase expérimentale et ne vont pas fonctionner avec tous les navigateurs tout simplement car ils seront intégrés dans la prochaine grande version du CSS : le CSS4.
Pour cette raison, le tableau ci-dessous contient la version CSS à laquelle est attachée chaque sélecteur afin que vous puissiez rapidement voir et savoir si un sélecteur va pouvoir être directement utilisable ou pas.
Nous détaillerons dans la suite de ce tutoriel le fonctionnement de chacun des sélecteurs CSS supportés par la majorité des navigateurs.
| Sélecteur | Description | Version CSS |
|---|---|---|
E |
Sélectionne tous les élément de type E | 1 |
E .maclasse |
Sélectionne les éléments E possédant un attribut class="maclasse" |
1 |
E #monid |
Sélectionne un élément E possédant un attribut id="monid" |
1 |
E:link |
Sélectionne tout élément E représentant l’ancre d’un lien non visité jusqu’à présent | 1 |
E:visited |
Sélectionne tout élément E représentant l’ancre d’un lien déjà visité | 1 |
E, F |
Sélectionne tous les éléments de type E et de type F | 1 |
E F |
Sélectionne tous les éléments F à l’intérieur des éléments E | 1 |
E:active |
Sélectionne un élément E qui est actuellement cliqué | 1 |
E::first-letter |
Sélectionne la première lettre de tout élément E | 1 |
E::first-line |
Sélectionne la première ligne (dans le résultat final) de tout élément E | 1 |
* |
Sélectionne tous les éléments | 2 |
E > F |
Sélectionne les éléments F enfants directs des éléments E | 2 |
E + F |
Sélectionne tout élément F placé directement après un élément E | 2 |
E[foo] |
Sélectionne tout élément E possédant un attribut foo |
2 |
E[foo="bar"] |
Sélectionne tout élément E possédant un attribut foo dont la valeur est exactement « bar » |
2 |
E[foo~="bar"] |
Sélectionne tout élément E possédant un attribut foo dont la valeur contient distinctement « bar » (c’est-à-dire dont la valeur contient le mot « bar » séparé du reste par des espaces) |
2 |
E[foo|="en"] |
Sélectionne tout élément E possédant un attribut foo dont la valeur commence par « en » séparé du reste par un tiret (ou hyphen en anglais) |
2 |
E:hover |
Sélectionne un élément E qui se situe sous le curseur de la souris | 2 |
E:focus |
Sélectionne un élément E qui a le focus | 2 |
E:first-child |
Sélectionne tout élément E étant le premier enfant de son parent | 2 |
E:lang(fr) |
Sélectionne tout élément E dont l’attribut langage possède la valeur « fr » | 2 |
E::after |
Ce sélecteur permet d’intégrer du contenu après un élément E | 2 |
E::before |
Ce sélecteur permet d’intégrer du contenu avant un élément E | 2 |
E ~ F |
Sélectionne tout élément F placé après un élément E dans la page | 3 |
E[foo^="bar"] |
Sélectionne tout élément E possédant un attribut foo dont la valeur commence exactement par « bar » |
3 |
E[foo$="bar"] |
Sélectionne tout élément E possédant un attribut foo dont la valeur se termine exactement par « bar » |
3 |
E[foo*="bar"] |
Sélectionne tout élément E possédant un attribut foo dont la valeur contient la valeur « bar » |
3 |
E:target |
Sélectionne un élément E contenant une ancre qui vient d’être cliquée à partir d’un lien ancre | 3 |
E:enabled |
Sélectionne tout élément E avec lequel l’utilisateur peut interagir et qui est activé | 3 |
E:disabled |
Sélectionne tout élément E avec lequel l’utilisateur peut interagir et qui est desactivé | 3 |
E:root
| Sélectionne un élément E racine du document | 3 |
E:empty |
Sélectionne tout élément E qui ne possède pas d’enfant (ni de noeud de type texte) | 3 |
E:nth-child(n) |
Sélectionne tout élément E étant le n-ième enfant de son parent | 3 |
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 | 3 |
E:checked |
Sélectionne tout élément E de type input coché au sens large (checked ou selected) | 3 |
E:last-child |
Sélectionne tout élément E étant le dernier enfant de son parent | 3 |
E:only-child |
Sélectionne tout élément E qui est le seul enfant de son parent | 3 |
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 | 3 |
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 | 3 |
E:first-of-type |
Sélectionne tout élément E premier enfant de son type par rapport à son parent | 3 |
E:last-of-type |
Sélectionne tout élément E dernier enfant de son type par rapport à son parent | 3 |
E:only-of-type |
Sélectionne tout élément E seul enfant de son type par rapport à son parent | 3 |
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 |
E::selection |
Permet de sélectionner une partie active d’un élément E déjà sélectionnée par l’utilisateur | 3/4 |
E >> F
| Sélectionne tous les éléments F à l’intérieur des éléments E. Ce sélecteur est strictement équivalent au précédent mais représente la nouvelle syntaxe de celui-ci qui sera rendue officielle avec le CSS4. | 4 |
F || E |
Sélectionne un élément E qui représente une cellule dans un tableau ou dans une grille appartenant à une colonne représentée par un élément F | 4 |
E[foo="bar" i] |
Sélectionne tout élément E possédant un attribut foo dont la valeur est exactement « bar » sans tenir compte de la casse (l’utilisation de majuscules / minuscules). Le « i » représente ici « case insensitive » c’est-à-dire « insensible à la casse » en français |
4 |
E:any-link |
Sélectionne tout élément E étant l’ancre d’un lien, que celui-ci ait été cliqué ou non. Utiliser cette pseudo classe est équivalent à utiliser :link et :visited |
4 |
E:scope |
Sélectionne un élément E étant l’élément de référence désigné. | 4 |
E:current |
Sélectionne un élément E actuellement affiché ou lu au sein d’un canvas comportant une dimension temporelle ou l’un de ses parents | 4 |
E:current() |
Alternative à E:current. On va pouvoir passer une liste de sélecteurs en argument de :current(). L’élément sélectionné sera l’élément :current qui correspond au(x) sélecteur(s) passé(s) | 4 |
E:past |
Sélectionne un élément E dont l’affichage précède immédiatement celui de l’élément :current | 4 |
E:future |
Sélectionne un élément E dont l’affichage suit immédiatement celui de l’élément :current | 4 |
E:drop |
Sélectionne un élément E qui peut potentiellement recevoir un objet HTML dans le cadre d’un glissé-déposé (drag and drop) | 4 |
E:drop(active) |
Version alternative de E:drop. Sélectionne l’élément E qui est actuellement la cible d’un drag and drop pour l’élément que l’on est en train de faire glisser | 4 |
E:drop(valid) |
Version alternative de E:drop. Sélectionne l’élément E qui est actuellement la cible d’un drag and drop pour l’élément que l’on est en train de faire glisser uniquement si cet élément peut recevoir l’objet qui va y être déposé | 4 |
E:drop(invalid) |
Sélectionne tout élément E qui ne peut pas recevoir l’objet actuellement glissé mais qui pourrait recevoir un autre type d’objet | 4 |
E:indeterminate |
Sélectionne tout élément E de type input qui est dans un état indéterminé, c’est-à-dire ni coché ni non-coché | 4 |
E:user-error |
Sélectionne tout élément E de type input altéré par l’utilisateur et dont la valeur passée est invalide | 4 |
E:blank |
Sélectionne tout élément E ne possédant pas de contenu à part éventuellement des espaces | 4 |
E:nth-column(n)
| Sélectionne tout élément E représentant une cellule appartenant à la n-ième colonne d’un tableau ou d’une grille | 4 |
E:nth-last-column(n) |
Sélectionne tout élément E représentant une cellule appartenant à la n-ième colonne d’un tableau ou d’une grille en comptant à partir de la fin | 4 |
:playing |
Sélectionne tout média capable d’être joué (audio, vidéo…) lorsque l’élément en question est en train d’être joué (ou lu) | 4 |
:paused |
Sélectionne tout média capable d’être joué (audio, vidéo…) lorsque l’élément en question n’est pas en cours de lecture (en pause, en cours de chargement etc.) | 4 |
E:matches(E1, .c1) |
Sélectionne tout élément E qui est soit de type E1 ou qui possède un attribut class= »c1″ | 4 |
E:has(E1, .c1) |
Sélectionne un élément E si au moins un des sélecteurs passés en paramètre correspond à l’élément (selon la portée, :scope, de l’élément) | 4 |
E:dir(ltr) |
Sélectionne tout élément E dont on à spécifié une direction de lecture « de gauche à droite » (la direction est à priori déterminée par la langue déclarée dans le document. Par exemple, pour le français, ce sera de gauche à droite par défaut) | 4 |
E::inactive-selection |
Permet de sélectionner une partie inactive d’un élément E déjà sélectionnée par l’utilisateur | 4 |
E::spelling-error |
Sélectionne une partie d’un élément E qui a été identifiée par le user agent comme mal orthographiée | 4 |
E::grammar-error |
Sélectionne une partie d’un élément E qui a été identifiée par le user agent comme grammaticalement incorrecte | 4 |
E::marker |
Permet de sélectionner le marqueur de tout élément E dont le type d’affichage est display : list-item (par exemple la puce ou le numéro de l’élément d’un élément li) |
4 |
E::placeholder |
Sélectionne le texte de l’attribut placeholder d’un élément E de type input | 4 |
Les sélecteurs CSS de type élément HTML (sélecteurs CSS simples)
Comme je vous le disais précédemment, nous allons pouvoir appliquer des styles à du contenu HTML en CSS en utilisant des sélecteurs qui vont permettre d’indiquer à quels éléments HTML doivent s’appliquer nos styles CSS.
Les sélecteurs CSS de type élément sont des sélecteurs CSS simples qui permettent de cibler un type d’élément en se basant sur le nom générique de l’élément.
Par exemple, le sélecteur CSS p va cibler tous les éléments p (c’est-à-dire tous les paragraphes) d’une page HTML et nous permettre d’appliquer des styles à tous les éléments de ce type dans notre page.
De même, le sélecteur CSS h1 va nous permettre d’appliquer des styles à notre titre h1 ; le sélecteur a va nous permettre de mettre en forme nos liens, etc.
See the Pen Cours HTML CSS 3.4.1 by Pierre (@pierregiraud) on CodePen.
Les sélecteurs CSS combinés et les combinateurs
En CSS, certains caractères vont posséder une signification spéciale comme c’est le cas dans de nombreux langages de programmation.
Certains caractères, en particulier, vont nous permettre de combiner plusieurs sélecteurs afin de créer de nouveaux sélecteurs combinés.
Sélectionner tous les éléments avec le sélecteur CSS universel ou sélecteur étoile (*)
Le sélecteur CSS étoile * ne nous permet pas à proprement parler de combiner différents sélecteurs simples entre eux mais permet de sélectionner tous les éléments HTML d’une page d’un coup ; c’est pourquoi il est également appelé sélecteur CSS universel.
Ce sélecteur va donc nous permettre d’appliquer les mêmes styles à tous les éléments d’une page. Cela peut être très utile pour par exemple définir une police par défaut ou effectuer un reset des marges de tous les éléments pour ensuite les positionner plus précisément.
See the Pen Cours HTML CSS 3.4.2 by Pierre (@pierregiraud) on CodePen.
Appliquer des styles à plusieurs éléments avec le caractère virgule (,)
Pour appliquer un même style à deux types éléments différents sans avoir à recopier le style deux fois en CSS, nous allons simplement pouvoir séparer nos deux sélecteurs par une virgule. Les styles CSS déclarés juste après s’appliqueront ainsi aux deux éléments ou groupes d’éléments sélectionnés.
Bien évidemment, rien ne nous empêche d’appliquer un même style à 3, 4, … éléments ou groupes d’éléments. Le tout est de séparer les différents sélecteurs par des virgules.
See the Pen Cours HTML CSS 3.4.3 by Pierre (@pierregiraud) on CodePen.
Utiliser plusieurs sélecteurs CSS à la suite
En mentionnant plusieurs sélecteurs à la suite en CSS, nous allons pouvoir appliquer des styles à certains éléments contenus dans d’autres éléments.
Par exemple, utiliser le sélecteur p a en CSS va nous permettre d’appliquer des styles à tous les éléments a contenus dans des éléments p et seulement aux éléments a contenus dans des éléments p
See the Pen Cours HTML CSS 3.4.4 by Pierre (@pierregiraud) on CodePen.
Appliquer des styles aux enfants directs d’un autre élément
Nous allons également pouvoir cibler uniquement un élément ou un groupe d’éléments enfants directs d’un autre élément en utilisant le signe de supériorité stricte ou le caractère chevron fermant >.
Un élément est un enfant direct ou « descendant direct » d’un autre élément s’il est directement contenu dans celui-ci.
Par exemple, nous allons pouvoir appliquer des styles à tous les liens (éléments a) qui sont des enfants directs de l’élément body et uniquement à ceux-ci :
See the Pen Cours HTML CSS 3.4.5 by Pierre (@pierregiraud) on CodePen.
Sélectionner l’élément suivant directement un autre élément en CSS
Le CSS va nous permettre de cibler encore plus précisément un élément en ciblant l’élément suivant directement un autre élément grâce au caractère +.
Par exemple, on va pouvoir cibler les éléments a (liens) suivant directement un élément p :
See the Pen Cours HTML CSS 3.4.6 by Pierre (@pierregiraud) on CodePen.
Sélectionner tous les éléments suivant un autre élément en CSS
Le caractère ~ va nous être plus permissif que le caractère + en nous permettant cette fois-ci de sélectionner tous les éléments déclarés après un autre élément en HTML de même niveau (c’est-à-dire possédant le même parent direct).
Par exemple, on va pouvoir cibler tous les éléments a placés après un élément p et qui sont de même niveau :
See the Pen Cours HTML CSS 3.4.7 by Pierre (@pierregiraud) on CodePen.
Ici, nos styles CSS ne s’appliquent pas à aux deux liens dans notre paragraphe et dans notre élément de liste car ceux-ci ne sont pas au même niveau que les différents paragraphes de notre page : ils sont inclus dans d’autres éléments et ne possèdent donc pas le même parent qu’un autre paragraphe pouvant les précéder.
Sélectionner des éléments HTML en CSS grâce à leurs attributs id et class
Souvent, nous ne pourrons pas nous contenter d’utiliser des sélecteurs CSS simples éléments pour mettre en forme nos pages. En effet, nous voudrons appliquer des styles particuliers à certains éléments d’un type (certains paragraphes par exemple) et pas à tous.
Pour appliquer des styles particuliers à un élément en particulier ou à une groupe d’éléments personnalisés, on peut s’appuyer sur des attributs id et class données à nos éléments en HTML.
Pour cibler un élément portant un id en particulier en CSS, il va suffire d’indiquer le nom de l’id précédé par un # comme ceci : #nom_id.
Pour appliquer des styles à une classe, il va suffire en CSS d’indiquer le nom de l’attribut class précédé cette fois-ci par un . comme ceci : .nom_class.
See the Pen
Exemple d’utilisation #1 class et id HTML & CSS by Pierre (@pierregiraud)
on CodePen.
Pour rappel, la différence entre les attributs id et class en HTML est que chaque id doit être unique dans une page (chaque id doit posséder une valeur unique) tandis qu’on peut tout à fait attribuer la même valeur à différents attributs class pour différents éléments.
De plus, notez qu’il est tout à fait possible d’ajouter un id et un ou plusieurs attributs class à un même élément HTML.
See the Pen
Attribuer plusieurs attributs class à un élément HTML by Pierre (@pierregiraud)
on CodePen.
Sélecteurs et ordre d’application des règles en cas de conflit en CSS
Précédemment, nous avons vu qu’on pouvait appliquer des styles CSS à un élément en le ciblant grâce à son nom, grâce à son id ou encore grâce à son ou ses attributs class.
Mais que se passe t-il en cas de conflits de styles CSS, c’est-à-dire dans la situation où on définit un comportement différent pour une même propriété CSS via des sélecteurs différents pour un même élément HTML ?
En cas de conflits entre les styles CSS, c’est toujours le style du sélecteur ciblant le plus précisément un élément HTML qui va s’appliquer. Ainsi, un sélecteur #id qui repose sur un attribut id qui est unique par exemple ciblera toujours plus précisément un élément HTML qu’un sélecteur de type élément.
See the Pen
HTML class et id : Ordre de priorité des règles CSS si conflit by Pierre (@pierregiraud)
on CodePen.
On va bien évidemment également tout à fait pouvoir utiliser les sélecteurs combinateurs avec les sélecteurs de classe et d’id pour cibler plus précisément certains éléments. Ecrire p .nom_de_classe par exemple ciblera tous les éléments p possédant une classe .nom_de_classe et uniquement les éléments p.
Les autres sélecteurs CSS d’attributs
Le CSS va également nous permettre de cibler des éléments HTML en fonction de la valeur de leurs attributs, ce qui va être un autre bon moyen de ne sélectionner que certains éléments HTML en particulier. Nous appellerons ces sélecteurs des sélecteurs d’attributs.
Sélectionner un élément HTML possédant un attribut (sans valeur) en CSS
Nous allons également pouvoir en CSS sélectionner des éléments HTML possédant un attribut simple. Par exemple, nous allons pouvoir sélectionner tous les éléments a possédant un attribut rel en utilisant la syntaxe a[rel].
Sélectionner un élément HTML possédant un attribut avec une valeur précise en CSS
Nous allons également pouvoir sélectionner de façon plus précise les éléments HTML possédant un attribut auquel on a attribué une valeur en particulier en CSS. Par exemple, nous allons pouvoir sélectionner tous les éléments a possédant un attribut rel avec une valeur exactement égale à nofollow en utilisant la syntaxe a[rel="nofollow"].
Sélectionner un élément HTML possédant un attribut contenant une valeur séparée par des espaces en CSS
Nous allons encore pouvoir sélectionner en CSS un élément HTML possédant un attribut qui contient une valeur (parmi d’autres) en CSS. La valeur doit être ici distincte des autres, c’est-à-dire séparée des autres par un espace (on ne peut pas indiquer une partie d’un mot par exemple). Par exemple, on va pouvoir cibler tous les éléments img d’une page dont l’attribut alt contient le texte « html » grâce à la syntaxe suivante : img[alt~="html"].
Sélectionner un élément HTML possédant un attribut contenant une valeur en CSS
Si l’on souhaite maintenant cibler un élément HTLM dont l’attribut contient une certaine valeur, sans poser la restriction « la valeur doit être distincte des autres », il faudra utiliser (en reprenant l’exemple précédent) la syntaxe suivante : img[alt*="html"].
Sélectionner des éléments HTML possédant des attributs commençant par une certaine valeur en CSS
Le CSS va également nous permettre de cibler des éléments HTML possédant des attributs dont la valeur commence par une certaine valeur. Nous allons à nouveau devoir utiliser deux syntaxes différentes selon que l’on souhaite ajouter une contrainte sur le fait que la valeur indiquée doit être séparée des autres via un tiret ou pas.
Pour cibler nos image en HTML possédant un attribut alt commençant par la valeur distincte « le », par exemple, nous utiliserons la syntaxe img[alt|="html"].
Pour cibler nos image en HTML possédant un attribut alt commençant par la valeur « le » sans forcément que cette valeur soit distincte, nous utiliserons cette fois-ci la syntaxe : img[alt^="html"].
Sélectionner des éléments HTML possédant des attributs finissant par une certaine valeur en CSS
Finalement, nous allons pouvoir en CSS cibler des éléments HTML possédant un attribut dont la valeur se termine par une certaine valeur, sans plus de restriction que cela.
Nous allons ainsi par exemple pouvoir cibler tous nos éléments de lien a possédant un attribut href dont la valeur se termine par « .com » avec la syntaxe suivante : a[href$=".com"].
Les sélecteurs CSS basés sur les 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é.
Pour cibler les éléments HTML par pseudo-classes en CSS, nous allons faire précéder l’état en question du signe « : ». Ainsi, pour appliquer des styles à des liens lorsqu’un utilisateur passe sa souris dessus, nous écrirons par exemple a:hover.
Dans cette partie, je vous propose de grouper les pseudo-classes par « sous type » cohérents pour en faire une étude groupée :
- Les pseudo-classes CSS relatives aux actions des utilisateurs ;
- Les pseudo-classes CSS relatives aux input ;
- Les pseudo-classes CSS relatives à la structure du document ;
- La pseudo-classe CSS :lang
- La pseudo-classe CSS :not
Sélectionner des éléments HTML en utilisant les pseudo-classes CSS relatives aux actions des utilisateurs
Commençons déjà par voir comment sélectionner les éléments HTML en CSS en utilisant les pseudo-classes CSS relatives aux actions des utilisateurs.
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 éléments de lien (élément HTML a) 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.
La pseudo-classe CSS :input va nous permettre de cibler et d’appliquer des styles à un élément lorsque celui-ci possède le focus, c’est-à-dire lorsque le curseur de la souris se trouve dedans. Cette pseudo-classe va s’avérer utile pour styliser le champ de formulaire (élément HTML input) dans lequel l’utilisateur se trouve actuellement pour le mettre en relief par exemple.
La pseudo-classe CSS :target va nous permettre de cibler et d’appliquer des styles à un élément contenant une ancre (un attribut id) qui vient d’être cliquée. Par exemple, imaginons qu’on ait une page relativement longue avec un sommaire qui utilise les ancres pour renvoyer l’utilisateur à la section correspondante. On va pouvoir appliquer des styles à la section vers laquelle l’utilisateur est renvoyé après qu’il ait cliqué sur le lien du sommaire relatif à celle-ci grâce à la pseudo-classe :target
See the Pen
Cours HTML CSS 10.2.1 by Pierre (@pierregiraud)
on CodePen.
Sélectionner des éléments HTML en utilisant les pseudo-classes CSS relatives aux input
Cette deuxième partie va être consacrée aux pseudo-classes CSS qui vont nous servir à styliser majoritairement des éléments de formulaire input selon différents états : élément coché, champ obligatoire, valeur renseignée dans le champ valide ou pas, etc.
La pseudo-classe CSS :checked va nous permettre de cibler / sélectionner les éléments input cochés, que ce soit des boutons radios input type="radio" ou des cases à cocher input type="checkbox".
Les pseudo-classes CSS :required et :optional vont nous permettre de sélectionner respectivement les éléments HTML input disposant d’un attribut required et au contraire ceux qui n’en disposent pas pour leur appliquer des styles particuliers.
Les pseudo-classes CSS :disabled et :enabled vont nous permettre de sélectionner respectivement les éléments HTML input disposant d’un attribut disabled et au contraire ceux qui n’en disposent pas.
Les pseudo-classes CSS :valid et :invalid vont nous permettre de sélectionner et de mettre en forme les éléments HTML input auxquels on a respectivement donné une valeur qui semble valide et au contraire une valeur qui semble invalide par rapport au type d’input spécifié. Ces sélecteurs vont nous permettre d’alerter un utilisateur par rapport au bon remplissage des champs ou pas. Les pseudo-classe :valid et :invalid vont fonctionner avec tous les éléments de formulaire possédant des limitations intrinsèques, comme par exemple un input type="email" (qui doit recevoir une valeur qui a la forme d’un email), un input type="number" (qui doit recevoir un nombre en valeur) ou encore avec des restrictions ajoutées par les attributs min et max.
Les pseudo-classes CSS :in-range et :out-of-range vont nous permettre de sélectionner et d’appliquer des styles aux éléments input possédant des limitations sur la fourchette de valeurs qu’ils peuvent accepter. La pseudo-classe CSS :in-range va ainsi nous permettre de mettre en forme des éléments input dont la valeur fournie se situe dans la fourchette des valeurs acceptées tandis que la pseudo-classe CSS :out-of-range va au contraire nous permettre de mettre en forme des éléments input dont la valeur fournie se situe en dehors de la fourchette des valeurs acceptées.
Le sélecteur CSS :default va nous permettre de sélectionner et de mettre en forme un élément input qui est l’élément défini par défaut dans une liste ou un groupe d’éléments. Cette pseudo-classe va pouvoir être utilisée sur des éléments input type="checkbox", input type="radio" ou encore sur des éléments de liste option et même avec des boutons button.
Finalement, les pseudo-classes CSS :read-only et :read-write vont nous permettre de sélectionner et d’appliquer des styles aux éléments input avec lesquels respectivement l’utilisateur ne va pas pouvoir interagir (c’est-à-dire les éléments possédant un attribut readonly ou disabled) ou ceux avec lesquels l’utilisateur va pouvoir interagir.
See the Pen
Sélecteur CSS attribut input by Pierre (@pierregiraud)
on CodePen.
Sélectionner un élément HTML en utilisant les pseudo-classes CSS relatives à la structure du document
Certaines pseudo-classes CSS vont nous permettre de sélectionner les éléments HTML en fonction de leur place dans le document (leur place dans le DOM). Ces pseudo-classes vont donc nous permettre de cibler des éléments en s’appuyant sur leurs parents ou enfants.
La pseudo-classe CSS :root va déjà nous permettre de sélectionner l’élément racine du document. Bien souvent, l’élément racine d’une page HTML va être l’élément html. Cependant, ça ne va pas être toujours le cas notamment dans des documents utilisant d’autres langages comme le XML.
La pseudo-classe CSS :empty va nous permettre de sélectionner des éléments HTML qui n’ont pas d’enfant. Par exemple, pour sélectionner tous les éléments p d’un document ne possédant pas d’enfant, on va pouvoir écrire en CSS p:empty.
Les pseudo-classes CSS :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 enfant de leur parent tandis que l’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.
Pour être encore plus précis dans la sélection d’éléments HTML par rapport à leur parent, 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 n-ième enfant de son parent ou un élément qui est le n-iè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.
On va également pouvoir sélectionner le n-ième élément enfant ou le n-ième élément enfant d’un certain type par rapport à son parent en commençant à compter par la fin (ce qui signifie que le dernier enfant d’un élément sera compté comme le premier et etc.) grâce aux pseudo-classes et sélecteurs CSS :nth-last-child(n) et :nth-last-of-type(n). Ainsi, on va pouvoir sélectionner tous les éléments p qui sont le deuxième élément en partant de la fin de leur parent (c’est-à-dire les avant derniers) grâce à la pseudo-classe CSS p:nth-last-child(2) et tous les éléments p qui sont les deuxièmes enfants de type p de leur parent en comptant à partir du dernier.
Finalement, on va pouvoir sélectionner des éléments HTML selon que ce soit les seuls éléments enfants de leur parent ou les seuls éléments enfants de leur type par rapport à leur parent. Pour cela, nous allons utiliser les pseudo-classes :only-child et :only-of-type. Pour sélectionner par exemple tous les paragraphes qui sont les seuls enfants de leur parent, nous utiliserons le sélecteur CSS p:only-child. Pour sélectionner tous les éléments p qui sont les seuls enfants de leur type dans leur parent, nous utiliserons le sélecteur CSS p:only-of-type.
See the Pen
Sélecteurs CSS :first-child, :first-of-type, etc by Pierre (@pierregiraud)
on CodePen.
Notez que dans le cas où deux sélecteurs ont la même priorité, ciblent les mêmes éléments et leur appliquent les mêmes propriétés alors ce sont les styles relatif au dernier sélecteur utilisé qui seront appliqués. Cela explique que notre premier span soit violet dans l’exemple ci-dessus.
Sélectionner des éléments HTML avec la pseudo-classe CSS :lang
La pseudo-classe CSS :lang va nous permettre de sélectionner un élément HTML en fonction de la valeur de son attribut lang. Par exemple, pour sélectionner un paragraphe avec un attribut lang="fr", on pourra utiliser le sélecteur CSS p:lang(fr).
Sélectionner des éléments HTML avec la pseudo-classe CSS :not
Nous allons également pouvoir sélectionner tous les éléments HTML qui ne sont pas d’un certain type ou qui ne répondent pas à un certain critère grâce à la pseudo-classe CSS :not. Par exemple, pour sélectionner tous les éléments qui ne sont pas des paragraphes, on utilisera le sélecteur CSS :not(p). Si on souhaite sélectionner tous les éléments qui ne sont pas des paragraphes ni des éléments span et qui ne possèdent par de classe .conteneur on pourra écrire en CSS :not(p, span, .conteneur.
Les sélecteurs CSS basés sur les pseudo-éléments
Les pseudo-éléments CSS vont nous permettre de ne cibler qu’une partie d’un élément HTML pour lui appliquer des styles. Les pseudo-éléments sont reconnaissables par l’emploi d’un double deux-points :: avant la déclaration du mot clef désignant la partie de l’élément qui va être ciblé.
Insérer du contenu avant ou après un élément HTML ciblé en CSS
Les pseudo-éléments ::before et ::after vont nous permettre respectivement de cibler la partie d’un document juste avant et juste après un certain élément HTML. Ces pseudo-éléments vont être utilisés pour insérer des règles ou du contenu avant ou après un élément en CSS.
Par exemple, pour insérer du contenu avant chacun des paragraphes d’une page, nous utiliserons le sélecteur CSS p::before. Si l’on souhaite ajouter du contenu après chacun des paragraphes d’une page, on utilisera plutôt le sélecteur p::after.
See the Pen
Cours HTML CSS 10.3.1 by Pierre (@pierregiraud)
on CodePen.
Sélectionner la première lettre d’un élément en CSS
Nous allons pouvoir ne sélectionner que la première lettre d’un certain élément HTML contenant du texte en utilisant le pseudo-élément ::first-letter pour ensuite lui appliquer toutes sortes de mise en forme. Par exemple, pour sélectionner la première lettre de tous les paragraphes d’une page, nous utiliserons le sélecteur CSS p::first-letter.
See the Pen
Cours HTML CSS 10.3.2 by Pierre (@pierregiraud)
on CodePen.
Sélectionner la première ligne d’un élément en CSS
De même, nous allons pouvoir ne sélectionner que la première ligne d’un élément HTML grâce au pseudo-élément ::first-line pour appliquer des styles à cette première ligne. Attention, la mise en forme va ici être dépendante de l’écran de chacun de vos visiteurs puisque la « première ligne » correspond ici à la première ligne dans le rendu visuel de la page de vos visiteurs. Ainsi, pour sélectionner la première ligne de tous les paragraphes de notre page nous utiliserons le sélecteur CSS p::first-line.
See the Pen
Cours HTML CSS 10.3.3 by Pierre (@pierregiraud)
on CodePen.
Sélectionner la partie d’un élément déjà sélectionnée par l’utilisateur
Finalement, nous allons pouvoir appliquer des styles particuliers à certaines parties de nos éléments HTML en fonction de ce qui est déjà présélectionné par l’utilisateur grâce au pseudo-élément ::selection. Les styles n’apparaitront que sur la partie de l’élément sélectionnée par un utilisateur. Pour sélectionner et appliquer des mises en forme particulières à la partie sélectionnée de tous les paragraphes d’une page, nous utiliserons donc le sélecteur CSS p::selection.
Attention toutefois à la compatibilité et à l’utilisation de ce sélecteur : celui-ci devait être intégré à la sortie du CSS3 mais a finalement été abandonné bien que la plupart des navigateurs le supportent. Il fera normalement parti des recommandations pour le CSS4.
See the Pen
Cours HTML CSS 10.3.4 by Pierre (@pierregiraud)
on CodePen.
