Maîtrise les différentes façons de cibler les éléments HTML avec les sélecteurs CSS, incluant les sélecteurs d'élément, de classe, d'ID, de groupement et de descendants.
Un sélecteur CSS détermine à quels éléments HTML un ensemble de styles sera appliqué. Choisir le bon sélecteur est l'une des compétences les plus importantes en CSS. Voici les types les plus courants :
Sélecteur d'élément — Cible tous les éléments d'un type donné. Écrire p { ... } stylise chaque <p> de la page.
Sélecteur de classe — Cible les éléments avec un attribut class spécifique. Préfixé par un point : .highlight { ... } cible <span class="highlight">.
Sélecteur d'ID — Cible un élément unique avec un attribut id spécifique. Préfixé par un dièse : #header { ... } cible <div id="header">. Les IDs doivent être uniques par page.
Sélecteur universel — L'astérisque * cible tous les éléments de la page. Utile pour les réinitialisations, mais à utiliser avec parcimonie.
Les sélecteurs de classe sont le pilier du CSS. Contrairement aux IDs, une classe peut être appliquée à plusieurs éléments, et un élément peut avoir plusieurs classes.
<style>
/* Element selector — all paragraphs */
p {
font-size: 16px;
}
/* Class selector — elements with class="highlight" */
.highlight {
background-color: yellow;
padding: 4px;
}
/* ID selector — the one element with id="title" */
#title {
color: darkblue;
font-size: 28px;
}
</style>
<h1 id="title">CSS Selectors</h1>
<p>This is a normal paragraph.</p>
<p class="highlight">This paragraph is highlighted.</p>Tu peux combiner les sélecteurs pour créer des règles de ciblage plus spécifiques :
Sélecteur de groupement — Applique les mêmes styles à plusieurs sélecteurs en les séparant par des virgules.
h1, h2, h3 { color: navy; }Sélecteur de descendant — Cible les éléments imbriqués dans un autre élément en séparant les sélecteurs par un espace.
article p { color: gray; }Cela stylise uniquement les éléments <p> qui sont à l'intérieur d'un <article>, laissant les autres paragraphes non affectés.
Chaînage de sélecteurs — Combine une balise et une classe (sans espace) pour cibler les éléments qui correspondent aux deux.
p.intro { font-size: 20px; }Cela cible uniquement <p class="intro">, pas les autres éléments .intro ou les autres éléments <p>.
Les sélecteurs de descendants sont extrêmement utiles pour délimiter les styles à des sections spécifiques d'une page sans ajouter de classes supplémentaires partout.
Quel sélecteur cible un élément avec class="card" ?