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.
L'IA a abusé de !important partout. Corrigez la spécificité en utilisant des classes au lieu de !important.
div > p ?!important ?