À retenir
- C'est le lien entre la structure HTML et le style visuel.
- Il peut être très large (tous les paragraphes) ou très précis (un seul bouton).
- Maîtriser les sélecteurs est la base indispensable du développement web moderne.
Un sélecteur est un outil de ciblage utilisé dans le code pour désigner précisément quels éléments d'une page web on souhaite modifier. On peut l'imaginer comme une étiquette ou une adresse que l'on donne à l'ordinateur pour lui dire : « Applique cette règle de couleur uniquement à ce titre-là ».
Étymologie
Emprunté à l'anglais selector (celui qui choisit), dérivé du verbe to select. Dans l'informatique moderne, le terme s'est imposé avec l'arrivée du langage CSS (feuilles de style) pour séparer le fond (le texte) de la forme (le style).
Exemples d'usage
h1: un sélecteur de balise qui cible tous les titres principaux d'une page..bouton-bleu: un sélecteur de classe qui cible tous les éléments portant cette étiquette spécifique.#menu-principal: un sélecteur d'identifiant qui cible un élément unique et précis dans la page.
Cas d'usage
Il intervient principalement en CSS pour définir le design (couleurs, tailles, polices) et en JavaScript pour manipuler le contenu de la page dynamiquement (par exemple, pour faire apparaître un menu au clic).
Bonnes pratiques
Privilégiez l'utilisation des classes (ex: .mon-style) plutôt que de cibler directement les balises HTML. Évitez les sélecteurs trop longs ou trop complexes (ex: div ul li span a), car ils ralentissent l'affichage de la page et sont difficiles à maintenir dans le temps.
Synonymes
Conseil
Quand vous débutez, apprenez bien la différence entre une classe (utilisable partout) et un ID (unique à un élément). C'est l'erreur la plus courante qui bloque la réutilisation du code.
Questions fréquentes
Peut-on utiliser plusieurs sélecteurs pour une même règle ?
Oui, en les séparant par une virgule, on peut appliquer le même style à plusieurs types d'éléments en une seule fois.
Un sélecteur peut-il cibler un élément qui n'existe pas encore ?
En CSS, le sélecteur restera simplement inactif. En JavaScript, cela provoquera généralement une erreur si vous tentez de manipuler un élément absent.