Les types de sélecteurs
Un sélecteur CSS désigne les éléments HTML à styliser. Il en existe trois principaux :
- Sélecteur d'élément : cible toutes les balises d'un type :
h1,p,a - Sélecteur de classe : cible les éléments avec une classe donnée :
.card,.btn-primary - Sélecteur d'id : cible un élément unique :
#header,#menu
En pratique, on utilise surtout les classes (90% du temps). Les id sont réservés aux cas uniques.
Les combinateurs
Les combinateurs permettent de cibler des éléments selon leur position dans l'arbre HTML :
div p: descendant : tous les<p>à l'intérieur d'un<div>, même imbriquésdiv > p: enfant direct : seulement les<p>directement enfants du<div>h2 + p: frère adjacent : le<p>juste après un<h2>
Le « Cascading » : la cascade
Le C de CSS signifie Cascading (cascade). Quand plusieurs règles ciblent le même élément, le navigateur les applique dans un ordre de priorité, comme une cascade d'eau où chaque couche recouvre la précédente :
- 1. Styles du navigateur : les styles par défaut (les titres sont gros, les liens sont bleus)
- 2. Votre CSS : vos règles écrasent les styles par défaut
- 3. Ordre d'apparition : si deux règles identiques, la dernière gagne
- 4. Spécificité : une règle plus spécifique l'emporte (voir ci-dessous)
C'est pour ça que l'ordre de vos fichiers CSS compte, et que mettre un style en bas du fichier peut « écraser » celui du haut.
La spécificité
La spécificité est le système de points qui décide quelle règle gagne quand plusieurs ciblent le même élément :
- Sélecteur d'élément (
p) : spécificité faible - Classe (
.card) : spécificité moyenne - Id (
#header) : spécificité forte - Inline (
style="...") : spécificité très forte !important: écrase tout (mais c'est une mauvaise pratique)
Règle d'or : Ne jamais utiliser !important sauf cas de force majeure. Si vous en avez besoin, c'est que la structure de vos sélecteurs est à revoir.
Propriétés courantes
color: couleur du textebackground-color: couleur de fondfont-family: police de caractèresfont-size: taille du textefont-weight: graisse (normal,bold,600...)text-align: alignement (left,center,right)text-decoration: soulignement, barré... (none,underline)
Types of selectors
A CSS selector designates which HTML elements to style. There are three main types:
- Element selector — targets all tags of a type:
h1,p,a - Class selector — targets elements with a given class:
.card,.btn-primary - ID selector — targets a unique element:
#header,#menu
In practice, you'll use classes 90% of the time. IDs are reserved for unique cases.
Combinators
Combinators let you target elements based on their position in the HTML tree:
div p— descendant: all<p>inside a<div>, even nesteddiv > p— direct child: only<p>directly inside the<div>h2 + p— adjacent sibling: the<p>right after an<h2>
The "Cascading" — the cascade
The C in CSS stands for Cascading. When multiple rules target the same element, the browser applies them in a priority order, like layers of water where each one overrides the previous:
- 1. Browser defaults — built-in styles (headings are big, links are blue)
- 2. Your CSS — your rules override defaults
- 3. Source order — if two identical rules exist, the last one wins
- 4. Specificity — a more specific rule wins (see below)
That's why the order of your CSS files matters, and why a style at the bottom of your file can "override" one at the top.
Specificity
Specificity is the point system that decides which rule wins when multiple target the same element:
- Element selector (
p) — low specificity - Class (
.card) — medium specificity - ID (
#header) — high specificity - Inline (
style="...") — very high specificity !important— overrides everything (but it's a bad practice)
Golden rule: Never use !important unless absolutely necessary. If you need it, your selector structure needs rethinking.
Common properties
color— text colorbackground-color— background colorfont-family— font familyfont-size— text sizefont-weight— weight (normal,bold,600...)text-align— alignment (left,center,right)text-decoration— underline, strikethrough... (none,underline)
Copiez ce prompt dans Claude ou ChatGPT :
Donne-moi 5 exemples de sélecteurs CSS du plus simple au plus complexe, avec une explication de la spécificité de chacun et un cas d'utilisation concret.
Sans relire la réponse de l'IA : avec tes mots, comment décides-tu lequel de .menu a et #nav a l'emporte ?
#nav a vaut 1 id + 1 élément, .menu a vaut 1 classe + 1 élément. On compare colonne par colonne de gauche à droite : la colonne id (1 contre 0) tranche tout de suite, donc #nav a gagne, quel que soit l'ordre dans le fichier. Un id pèse plus lourd que n'importe quel nombre de classes.L'IA a abusé de !important partout. Corrigez la spécificité en utilisant des classes au lieu de !important.
Tu demandes à l'IA de styliser le lien actif du menu. Voici sa réponse. Ton rôle de relecteur : l'accepter telle quelle ou la rejeter, et dire pourquoi.
#sidebar nav ul.menu li.item a.link.active {
color: red;
}!important qu'on cherche justement à éviter. Et il casse dès que tu déplaces le menu hors du #sidebar. Le réflexe pro : une seule classe ciblée, par exemple .menu-link.active, suffit et reste maintenable.Sans remonter dans la leçon : que ciblent respectivement .card, #card et card, et lequel des trois a la spécificité la plus forte ?
.card (avec un point) cible tous les éléments ayant la classe card ; #card (avec un dièse) cible l'unique élément dont l'id vaut card ; card (sans rien) cible une balise <card>, qui n'existe pas en HTML standard. C'est #card qui a la spécificité la plus forte : un id l'emporte sur une classe, qui l'emporte sur un élément.div > p ?!important ?You can now target any element. What is left is understanding how it takes up space. In the next lesson we break down the box model: content, padding, border and margin, the four layers that explain why a box ends up the size it does.
Lesson 3: The box model →