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 : cible une classe (
.highlight) - Sélecteur d’ID : cible un identifiant unique (
#menu)
Le sélecteur de type cible tous les éléments d’un type donné dans le document.
Exemple HTML
<h1>Titre Principal</h1>
<p>
Les légumes sont bons pour la santé.
<span>Mangez des carottes</span> et des épinards.
</p>
<p>
Les fruits aussi : <strong>pommes</strong> et <em>oranges</em>.
</p>
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 :
- Tous les
<span>auront un fond jaune - Tous les
<strong>et<em>seront en violet - Le
<h1>sera en bleu
Le sélecteur de classe commence par un point (.) et cible tous les éléments possédant cette classe.
Syntaxe
.nom-de-classe {
/* styles */
}
Exemple pratique
<h1 class="highlight">Titre Important</h1>
<p>
Texte normal avec <span class="highlight">partie surlignée</span>.
</p>
<p class="highlight">
Paragraphe entièrement mis en évidence.
</p>
.highlight {
background-color: yellow;
}
Cibler une classe sur un élément spécifique
/* Uniquement les span avec la classe highlight */
span.highlight {
background-color: yellow;
}
/* Uniquement les h1 avec la classe highlight */
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.
Exemple HTML
<div class="notebox">Note simple.</div>
<div class="notebox warning">Attention !</div>
<div class="notebox danger">Danger !</div>
<div class="danger">Pas de style (manque notebox)</div>
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"> n’aura aucun style car il lui manque la classe notebox.
Le sélecteur d’ID commence par un dièse (#) et cible l’élément unique possédant cet ID.
Règle importante
Exemple
<h1 id="main-heading">Titre Principal</h1>
<p>Premier paragraphe.</p>
<p id="intro">Paragraphe d'introduction.</p>
#intro {
background-color: yellow;
}
h1#main-heading {
color: rebeccapurple;
}
Quand utiliser ID vs Classe ?
| ID (#) | Classe (.) |
|---|---|
| Unique par page | Réutilisable |
| Navigation, ancres | 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
Exemple de conflit
.special {
color: red;
}
p {
color: blue;
}
<p class="special">De quelle couleur suis-je ?</p>
Réponse : Le texte sera rouge car la classe a une spécificité plus élevée que le sélecteur de type.
La cascade en 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
<div class="card">
<h3>Carte Standard</h3>
<p>Contenu de base.</p>
</div>
<div class="card featured">
<h3>Carte Vedette</h3>
<p>Mise en avant spéciale.</p>
</div>
<div class="card warning">
<h3>Carte Alerte</h3>
<p>Message important.</p>
</div>
<div id="hero-card" class="card featured">
<h3>Carte Hero</h3>
<p>La plus importante.</p>
</div>
CSS
/* Base commune */
.card {
border: 2px solid #ccc;
border-radius: 8px;
padding: 1rem;
margin: 1rem 0;
background: white;
}
/* Variantes par classe */
.card.featured {
border-color: gold;
background: #fffef0;
}
.card.warning {
border-color: red;
background: #fff0f0;
}
/* Style unique par ID */
#hero-card {
border-width: 4px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
