Dernière mise à jour : août 2022
Un sélecteur permet de définir un ensemble de règles CSS sur un élément HTML. Il existe plusieurs types de sélecteurs que nous allons détailler dans ce chapitre.
Nous aborderons également les combinateurs qui vont permettre d'associer plusieurs sélecteurs afin de cibler des éléments précis ou encore d'obtenir des combinaisons qui vont se révéler très pratiques. L'union fait la force comme on dit.
Parmi les sélecteurs dits "simples", nous retrouvons plusieurs familles de sélecteurs :
Le sélecteur de type est utilisé seul. Il cible un élément du même type dans un document. Dans le code ci-dessous, on indique que tous les éléments de type h1 dans le document auront la couleur rouge.
h1{
color: red
}
<h1>Mon titre de couleur rouge<h1>
Le sélecteur de classe cible chaque élément d'un document portant le même nom via l'attribut HTML class.
.maclasse{
color: red
}
<p class="maclasse">mon texte en rouge</p>
<div class="maclasse">mon texte en rouge</div>
Le sélecteur d'identifiant permet de cibler un élément via le nom de l'attribut HTML id. Celui-ci doit être le même que celui de l'élément visé dans le document.
Un identifiant est unique. Vous ne pouvez l'utiliser qu'une seule fois dans un document.
/*ici on vise l'élément p dans le document qui possède un identifiant qui se nomme monID*/
p#monID {
color:red
}
<p id="monID">mon texte en rouge</p>
Représenté par un astérisque (*), le sélecteur universel correspond à un élément de n'importe quel type. Dans le troisième niveau CSS, il a été étendu pour être combiné avec des espaces de noms.
/*tous les éléments du document auront la couleur rouge */
* {
color: red
}
Le sélecteur d'attribut permet de cibler un élément ayant un attribut avec ou sans valeur. Il existe plusieurs types de sélecteurs d'attribut :
[attr] : cible un élément possédant un attribut.
/* Les éléments a avec l'attribut title */
a[title] {
color: red
}
[attr=valeur] : cible un élément possédant un attribut avec une valeur.
/*tous les éléments p en langue française auront la couleur rouge*/
p[lang=fr] {
color: red
}
[attr~=valeur] : cible un élément possédant un attribut dont la valeur appartient à une liste de valeurs séparées par des espaces.
/*on vise tous les liens qui contiennent entre autres le mot exemple */
a[title~="exemple"] {
color: red
}
Sera visé l'élément a avec l'attribut title ayant pour mots-clé "mon exemple", "ceci est un exemple" ...
[attr|=valeur] : cible un élément possédant un attribut spécifié en commençant par la valeur nommée dans l'attribut. Celle-ci peut être seule ou suivie d'un tiret.
/*on vise la classe commencant par le mot exemple, vise également exemple-motclé ou exemple-autremotclé... */
[class|="exemple"] {
color: red
}
[attr^=valeur] : cible un élément possédant un attribut dont la première valeur commence par celle-ci. Elle peut aussi être suivie d'un tiret.
[class^="maclasse"] {
color: red
}
[attr$=valeur] : cible un élément possédant un attribut dont la dernière valeur se termine par celle-ci. Elle peut être précédée d'un tiret.
[class$="maclasse"] {
color: red
}
[attr*=valeur] : cible un élément possédant un attribut dont la valeur contient au moins une occurrence d'une chaîne de caractères correspondant à celle-ci.
/* vise tous les liens dont l'url contient "exemple" */
a[href*="exemple"] {
color:red
}
Ajouté dans le quatrième niveau, le sélecteur d'attribut case-sensitivity (voir compatibilité), insensible à la casse, qui peut s'écrire avec un i minuscule ou majuscule, provoque l'adaptation de la valeur de l'attribut d'une manière ASCII.
a[href="#exemple" i] {
color: #614ad3
}
Lien utilisant le sélecteur d'attribut case-sensitivity
Lien utilisant le sélecteur d'attribut case-sensitivity
Vous pouvez remarquer que les deux liens ont la même couleur (violet), pourtant l'identifiant n'est pas écrit de la même manière. Voir le code ci-dessous :
<a href="#eXeMple">Lien utilisant le sélecteur d'attribut case-sensitivity</a>
<a href="#exeMple">Lien utilisant le sélecteur d'attribut case-sensitivity</a>
Comme son nom l'indique, le combinateur va permettre d'associer plusieurs sélecteurs afin d'appliquer une valeur spécifique sur un élément précis.
On distingue quatre types de combinateurs :
Représenté par un espace (un blanc) entre deux sélecteurs. Bientôt remplacé par deux chevrons dans le quatrième niveau de CSS.
div /*le blanc est ici*/ p{
background-color: purple;
color: white;
}
/*niveau 4*/
div>>p{
...
}
Sépare deux sélecteurs. Ne sélectionne que les enfants directs du premier sélecteur.
div > p{
background-color: purple;
color: white;
}
/*Seul le premier élément enfant est visé par rapport à son parent*/
Permet de sélectionner un élément immédiatement précédé par un autre élément.
p+p {
background-color: purple;
color: white;
}
/*ici on permet de viser l'élément enfant qui suit le premier élément enfant à condition que les deux élément possèdent le même élément parent*/
Même fonction que le voisin direct mais sélectionne tous les éléments frères.
h1~p {
background-color: purple;
color: white;
}
Actuellement en production... Nous y reviendrons lorsque son implantation sera effective.