Sélecteurs
Les sélecteurs sont utilisés pour cibler les éléments HTML à mettre en forme dans nos pages web. Dans cette session de formation, nous découvrirons les sélecteurs les plus simples qu’on puisse trouver, ce sont ceux que vous utiliserez le plus couramment dans votre travail de création des sites web.
Qu’est-ce qu’un sélecteur ?
Vous les avez déjà rencontrés : toute règle CSS commence par un sélecteur.
Un sélecteur est une expression qui indique au navigateur à quel élément HTML à cibler pour applique la la déclaration CSS de la règle.
1
2
3
h1{
color:red
}
L’attribut Id et Classe
Les attributs id et class sont particuliers en HTML puisqu’ils n’ont pas été créés pour préciser le fonctionnement d’un élément HTML en particulier (ce qui est normalement le rôle de tout attribut HTML) mais vont être principalement utilisés pour cibler certains éléments HTML et leur appliquer des styles en CSS.
Les attributs HTML class et id sont des attributs dits globaux car on va pouvoir les ajouter dans la balise ouvrante de n’importe quel élément HTML.
1
2
3
4
<h1 class="titre">Qu'est-ce que l'ordinateur</h1>
<p id="definition">
Un ordinateur est un appareil ..
</p>
Sélecteur de type
Un sélecteur de type cible un élément HTML (une balise) de votre document, on parle aussi de sélecteur de balise ou d’élément. Dans notre exemple nous utilisons les sélecteurs h1 et a. Chaque instance de la balise <h1> et <a> est ainsi mise en forme.
1
2
3
4
5
<h1 class="titre">Qu'est-ce que l'ordinateur</h1>
<p id="definition">
Un <a href="https://fr.wikipedia.org/wiki/Ordinateur" target="_blank">
ordinateur</a> est un ...
</p>
1
2
3
4
h1 {
color:indigo;
}
a{ color: red }
Le sélecteur universel
Le sélecteur universel est indiqué par un astérisque (*) et sélectionne tout dans le document. Dans l’exemple suivant, nous avons utilisé le sélecteur universel pour supprimer les marges par défaut de tous les éléments.
1
2
3
* {
margin: 0px;
}
Cela signifie qu’au lieu du style par défaut ajouté par le navigateur, qui espace les en-têtes et les paragraphes avec des marges, tout est collé, la distinction des paragraphes est mal aisée.
Pratique :sélecteur universel
L’objectif de travail pratique :
- Découvrir le sélecteur universel
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
* {
margin: 0px;
}
</style>
<h1 class="titre">Qu'est-ce que l'ordinateur</h1>
<p id="definition">
Un <a href="https://fr.wikipedia.org/wiki/Ordinateur" target="_blank">
ordinateur</a> est un appareil électronique capable de
réaliser rapidement des opérations mathématiques,
logiques, des manipulations de chaînes de caractères
ou des recherches. Il est composé de deux grandes parties :
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Labore nobis ea voluptatum doloribus debitis quis perferendis
quia id iste. Quasi?
</p>
Sélecteurs de classe
Le sélecteur de classe commence par un point . et sélectionne tout élément du document auquel cette classe est appliquée.
Dans l’exemple, nous avons créé une classe appelée .titre et nous l’avons appliquée à plusieurs élément de titre. Tous les éléments auxquels la classe est appliquée ont changé leurs apparence.
1
2
3
.titre {
color:red;
}
Pratique : Sélecteurs de classe
L’objectif de travail pratique :
- Découvrir le sélecteur de classe
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
.titre {
color:red;
}
</style>
<h1 class="titre">Qu'est-ce que l'ordinateur</h1>
<p id="definition">
Un <a href="https://fr.wikipedia.org/wiki/Ordinateur" target="_blank">
ordinateur</a> est un appareil électronique capable de réaliser
rapidement des opérations mathématiques, logiques, des manipulations
de chaînes de caractères ou des recherches.
</p>
<h2>Unité centrale </h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, nemo?</p>
<h2 class="titre">Périphériques d'entrée ou de sortie</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, nemo?</p>
Cibler un élément appartenant à plus d’une classe
Vous pouvez attribuer plusieurs classes à un même élément et les sélectionner individuellement, ou cibler l’élément seulement quand toutes les classes apparaissent dans le sélecteur. Cela peut s’avérer utile si vous créez des composants qui peuvent être combinés de différentes manières sur votre site.
L’exemple suivant présente deux paragraphe. Si le paragraphe est dans la classe paragraphe elle a une arrière plan pink et padding 10px. Si de plus elle est dans la classe important on change la bordure et la graisse le texte en blod.
On indique au navigateur la combinaison de classes ciblée en enchaînant les sélecteurs de classe sans laisser d’espace entre.
1
2
3
4
5
6
7
8
.paragraphe {
background-color: pink;
padding: 10px;
}
.important {
border: 2px solid black;
font-weight:bold
}
Pratique : plusieurs classe
L’objectif de travail pratique :
- Découvrir le sélecteur avec plusieurs classe
Code source
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.paragraphe {
background-color: pink;
padding: 10px;
}
.important {
border: 2px solid black;
font-weight:bold
}
</style>
</head>
<body>
<h1 class="important">Qu'est-ce que l'ordinateur</h1>
<p class="paragraphe">
Un <a href="https://fr.wikipedia.org/wiki/Ordinateur" target="_blank">
ordinateur</a> est un appareil électronique capable de réaliser
rapidement des opérations mathématiques, logiques, des manipulations
de chaînes de caractères ou des recherches.
</p>
<h2 class="important">Unité centrale </h2>
<p class="paragraphe important">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, nemo?
</p>
</body>
</html>
Sélecteurs d’ID
Un sélecteur d’ID commence par un # plutôt que par un point, mais est essentiellement utilisé de la même manière qu’un sélecteur de classe. Une ID ne peut cependant être utilisée qu’une seule fois par document.
1
2
3
4
5
<h1 class="titre">Qu'est-ce que l'ordinateur</h1>
<p id="definition">
Un <a href="https://fr.wikipedia.org/wiki/Ordinateur" target="_blank">
ordinateur</a> est un ..
</p>
1
2
3
4
5
#definition {
background-color: pink;
padding: 10px;
font-size: 24px;
}
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 h1 et pour une classe .special, je pourrais écrire deux règles :
1
2
3
4
5
6
7
h1 {
color: blue;
}
.special {
color: blue;
}
ou bien une seule règle en combinant les sélecteurs, séparés par une virgule :
1
2
3
h1, .special {
color: blue;
}
