Retour
2/ CSS: Les sélecteurs
Apprendre à styliser vos pages web en utilisant le CSS.
Dans cet article nous explorerons en détails le fonctionnement des différents types de sélécteurs CSS.
0
Dépot GITHUB
Prérequis
Il est conseillé d'avoir suivi la première parti de ce tutoriel:
CSS: Introduction.
Qu'est-ce qu'un sélecteur ?
Un sélecteur est une expression qui indique au navigateur à quelle entité HTML s'applique la règle CSS correspondante.
Le ou les éléments ciblés par le sélecteur sont le sujet de ce sélecteur.
1/ Les Listes de sélecteurs
Quand un groupe de déclarations CSS s'applique à plusieurs éléments distincts, on peut combiner les sélecteurs individuels en une liste.
Par exemple, si j'ai le même CSS pour un <p> et pour un <span>.
On pourrait écrire deux règles :
p{
color: red;
}
span{
color: red;
}
Ou bien une seule règle en combinant les sélecteurs, séparés par une virgule :
p, span{
color: red;
}
2/ Types de sélecteurs
On peut regrouper les sélecteurs en différents groupes:
2.1/ Sélecteurs basique
Commençons par les sélecteur les plus simples et les plus utilisés.
2.1.1/ Sélecteur Universel
Le sélecteur universel * cible tous les éléments du DOM, la balise <body> aussi.
* {
/*Règles à appliquer à tous les élément du DOM*/
}
Resultat:
2.1.2/ Sélecteur de balise
Nous avons déja vu ce sélécteur, qui permet de sélectionner un élément avec le nom de la balise:
div {
/*Règles à appliquer à tous les élément <div> du DOM*/
}
Resultat:
2.1.3/ Sélecteur de classe
On peut regrouper un ensemble d'élément HTML pour leur appliquer le meme style en utilisant les classes.
D'abord, il faut ajouter l'attribut class="a" dans notre document HTML, pour tout élément que nous voulons cibler.
Pour sélectionner les éléments par leur classe en CSS, en utilise .:
.a{
/*Règles à appliquer à tous les éléments aillant pour nom de classe a */
}
Resultat:
2.1.4/ Sélecteur d'identifiant
On peut utiliser l'id d'un élément pour le ciblé en CSS, pour cela on utilise #:
#a{
/*Règles à appliquer à l'élément aillant pour identifiant a */
}
Resultat:
Les identifiants sont censés être unique par page. Même si cela fonctionne, il faut éviter d'attribuer le même identifiant à plusieurs éléments.
2.2/ Sélecteurs combinateurs
On peut regrouper les sélecteurs en différents groupes:
2.2.1/ Sélecteur de descendants
Cible tous les éléments descendant du première élément:
div a {
/*Règles à appliquer à tous les descendant a des div */
}
Resultat:
2.2.2/ Sélecteur d'enfants
Cible tous les éléments enfants directe du première élément;
div > a {
/*Règles à appliquer aux enfants a des div */
}
Resultat:
2.2.3/ Sélecteur de frères
Cible tous les éléments venant à la suite du première élément:
div ~ a {
/*Règles à appliquer à tous les a venant à la suite des div */
}
Resultat:
2.2.4/ Sélecteur de frère adjacent
Cible l'élément venant directement à la suite du première élément:
div + a {
/*Règles à appliquer à l'élement a venant à la suite des div */
}
Resultat:
2.2.5/ Sélecteur 'ou'
Nous l'avons vu plus haut, nous pouvons cibler plusieurs éléments en séparant les sélecteurs par une virgule:
div, a {
/*Règles à appliquer aux éléments div ou a */
}
Resultat:
2.2.6/ Sélecteur 'et'
Nous pouvons cibler les éléments répondant à tous les sélécteurs mentionnés:
div.a {
/*Règles à appliquer aux éléments div dont la classe est a */
}
Resultat:
2.3/ Sélecteurs d'attributs
On peut regrouper les sélecteurs en différents groupes:
2.3.1/ Possédant l'attribut
Cible tous les éléments possédant l'attribut entre [ ]:
[a] {
/*Règles à appliquer à tous les éléments possédant l'attribut a */
}
Resultat:
2.3.2/ Attribut égal à
Cible tous les éléments possédant l'attribut avec la valeur exacte mentionnée:
[a="1"] {
/*Règles à appliquer à tous les éléments possédant l'attribut a
aillant pour valeur 1*/
}
Resultat:
2.3.3/ Attribut qui commence par
Cible tous les éléments dont la valeur de l'attribut commence par la valeur mentionnés:
[a^="1"] {
/*Règles à appliquer à tous les éléments possédant l'attribut a
dont valeur commence par 1*/
}
Resultat:
2.3.4/ Attribut qui finit par
Cible tous les éléments dont la valeur de l'attribut finit par la valeur mentionnés:
[a$="1"] {
/*Règles à appliquer à tous les éléments possédant l'attribut a
dont valeur fini par 1*/
}
Resultat:
2.3.5/ Attribut contenant une valeur
Cible tous les éléments dont la valeur de l'attribut possède quelque part la valeur mentionnés:
[a*="1"] {
/*Règles à appliquer à tous les éléments possédant l'attribut a
dont valeur contient 1 quelque parts*/
}
Resultat:
3/ Pseudo classe
Une pseudo-classe est un mot-clé qui peut être ajouté à un sélecteur afin d'indiquer l'état spécifique dans lequel l'élément doit être pour être ciblé par la déclaration.
3.1/ Etat
On peut préciser dans quel état l'élément est pour que style soit appliqué:
3.1.1/ Souris sur l'élément
Afin d'appliquer du style à un élément quand l'utilisateur passe la souris dessus, on utilise la pseudo-classe hover:
a:hover {
/*Règles à appliquer à tous les élément a quand la souris passe dessus*/
}
3.1.2/ L'élément est en focus
Applique du style à un élément est en focus, c'est à dire, quand l'utilisateur séléctionne un élément avec le tab ou en cliquant dessus:
a:focus {
/*Règles à appliquer à tous les élément a quand la souris passe dessus*/
}
3.1.3/ Champs obligatoire
Applique du style aux champs utilisateur possédant l'attribut required:
a:required {
/*Règles à appliquer à tous les élément champs d'utilisateur obligatoire*/
}
3.1.4/ Champs sélectionné
Applique du style aux cases à cocher quand elle sont cochées:
a:checked {
/*Règles à appliquer aux cases à cocher quand elle sont cochées*/
}
3.1.5/ Champs désactivé
Applique du style aux champs utilisateur possedant l'attribut disabled:
a:diabled {
/*Règles à appliquer aux champs désactivé*/
}
3.2/ Position
On peut ajouter des pseudo-classe aux sélecteurs afin de préciser leurs postition relativement au parent:
3.2.1/ Premier enfant
Applique le style aux éléments qui sont premier enfant d'un contenant:
a:first-child {
/*Règles à appliquer à tous les élément a à la premiere position*/
}
Resultat:
3.2.2/ Dernier enfant
Applique le style aux éléments qui sont dernier enfant d'un contenant:
a:last-child {
/*Règles à appliquer à tous les élément a à la derniere position*/
}
Resultat:
3.2.3/ Enfant à la position
Applique le style aux éléments enfant aillant pour position la formule mentionnée entre parenthèses () dans un contenant:
a:nth-child(2n) {
/*Règles à appliquer à tous les élément a dont la position est un nombre pair*/
}
Resultat:
Conclusion
Le CSS offre une grande flexibilité pour sélectionner et ciblé les éléments HTM voulus.
Dans le prochain chapitre, nous verrons en détails le Modèle de Boîtes CSS, son fonctionnement ainsi que sa terminologie, pour vous permettre de réaliser des mises en pages plus complexes.
