Sélecteurs avancés

Les combinateurs permettent un ciblage précis.

article p { line-height: 1.7; }
nav > a { padding: 0.5rem; }
h2 + p { margin-top: 0; }

• Descendant : espace
• Enfant direct : >
• Frere adjacent : +

Un bon sélecteur réduit le besoin de classes inutiles.

L'objectif est de cibler juste ce qu'il faut, sans rendre les sélecteurs trop longs ou fragiles.

A retenir

Un sélecteur avancé doit rester lisible. Si la chaine devient trop longue, c'est souvent un signal qu'il faut revoir la structure HTML ou ajouter une classe bien nommée.

Mini pratique

Prends une zone article avec plusieurs paragraphes. Teste un sélecteur descendant puis un sélecteur enfant direct pour comparer le résultat.

Erreurs fréquentes

• appliquer des valeurs sans vérifier l'impact sur mobile
• surcharger la feuille de style au lieu de simplifier les sélecteurs
• corriger un symptôme visuel sans comprendre la cause (cascade, flux ou dimensions)

Checklist rapide

• la règle est-elle lisible et cohérente avec le reste du module ?
• le rendu reste-t-il correct sur petit écran ?
• la solution est-elle maintenable sans !important ?

Mini défi

Reprends l'exemple de cette leçon, retire une règle inutile, et conserve exactement le même rendu visuel.