Les Sélecteurs CSS : Guide Complet pour Cibler vos Éléments
Apprenez à utiliser tous les types de sélecteurs CSS pour cibler précisément les éléments HTML. Des sélecteurs de type aux classes et IDs, maîtrisez l’art de la sélection CSS.
Objectifs pédagogiques
- Comprendre le rôle des sélecteurs CSS
- Maîtriser les sélecteurs de type, classe et ID
- Combiner plusieurs sélecteurs efficacement
- Comprendre la spécificité CSS
Un sélecteur CSS est la première partie d’une règle CSS. Il indique au navigateur quels éléments HTML doivent recevoir les styles définis.
/* Le sélecteur est "h1" */
h1 {
color: blue;
font-size: 2em;
}
L’élément ou les éléments sélectionnés sont appelés le sujet du sélecteur.
Types de sélecteurs principaux
- Sélecteur de type : cible un élément HTML (
h1,p,div) - Sélecteur de classe : targets a class (
.highlight) - Sélecteur d’ID : targets a unique identifier (
#menu)
Le sélecteur de type cible tous les éléments d’un type donné dans le document.
HTML example
Main Title
Les légumes sont bons pour la santé.
<span>Mangez des carottes</span> et des épinards.
Fruits too: apples and oranges .
CSS avec sélecteurs de type
body {
font-family: sans-serif;
}
span {
background-color: yellow;
}
strong {
color: rebeccapurple;
}
em {
color: rebeccapurple;
}
h1 {
color: blue;
}
Résultat :
- All the
<span>will have a yellow background - All the
<strong>Andwill be in purple - THE
<h1>will be in blue
Le sélecteur de classe commence par un point (.) et cible tous les éléments possédant cette classe.
Syntax
.class-name {
/* styles */
}
Practical example
Important Title
Texte normal avec <span class="highlight">partie surlignée</span>.
Paragraphe entièrement mis en évidence.
.highlight {
background-color: yellow;
}
Cibler une classe sur un élément spécifique
/* Only spans with the highlight class */
span.highlight {
background-color: yellow;
}
/* Only h1 tags with the highlight class */
h1.highlight {
background-color: pink;
}
<div class="box warning large">
Vous pouvez cibler des éléments ayant plusieurs classes simultanément en les enchaînant sans espace.
HTML example
CSS avec sélecteurs combinés
.notebox {
border: 4px solid #666666;
padding: 0.5em;
margin: 0.5em;
}
/* Élément ayant les DEUX classes */
.notebox.warning {
border-color: orange;
font-weight: bold;
}
.notebox.danger {
border-color: red;
font-weight: bold;
}
<div class="danger"> will have no style because it lacks class notebox.
Le sélecteur d’ID commence par un dièse (#) et cible l’élément unique possédant cet ID.
Règle importante
Example
First paragraph. Introductory paragraph.Main Title
#intro {
background-color: yellow;
}
h1#main-heading {
color: rebeccapurple;
}
When to use ID vs Class?
| ID (#) | Class (.) |
|---|---|
| Unique per page | Réutilisable |
| Navigation, anchors | Styles répétitifs |
| Haute spécificité | Spécificité moyenne |
Quand plusieurs règles ciblent le même élément, CSS utilise la spécificité pour déterminer laquelle appliquer.
Ordre de spécificité (du plus faible au plus fort)
- Sélecteurs de type (
p,h1) Рsp̩cificit̩: 0,0,1 - S̩lecteurs de classe (
.special) – spécificité: 0,1,0 - Sélecteurs d’ID (
#main) Рsp̩cificit̩: 1,0,0
Example of conflict
.special {
color: red;
}
p {
color: blue;
}
<p class="special">What color am I?</p>
Réponse : The text will be red car la classe a une spécificité plus élevée que le sélecteur de type.
The waterfall in action
p { color: red; }
p { color: blue; } /* Celui-ci gagne (dernière règle) */
Créez un système de cartes avec différents états :
HTML
Basic content.
Standard Card
Featured Card
<p>Mise en avant spéciale.</p>
Alert Map
Important message.
Hero Card
The most important one.
CSS
/* Common base */
.card {
border: 2px solid #ccc;
border-radius: 8px;
padding: 1rem;
margin: 1rem 0;
background: white;
}
/* Variants by class */
.card.featured {
border-color: gold;
background: #fffef0;
}
.card.warning {
border-color: red;
background: #fff0f0;
}
/* Unique style per ID */
#hero-card {
border-width: 4px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
