HTML 5 - 4.2 : Cibler des balises HTML avec des selecteurs
Les sélecteurs CSS permettent de cibler précisément les éléments HTML à styliser. Le sélecteur d'élément cible tous les éléments d'une balise donnée (par exemple, h1 { color: green; } change la couleur de tous les titres H1). Le sélecteur d'ID cible un élément unique en utilisant le # suivi du nom de l'ID (par exemple, #subtitle { font-size: large; }). Le sélecteur de classe cible tous les éléments ayant une certaine classe en utilisant un . (par exemple, .post { border-left: 4px solid green; }).
On peut combiner plusieurs sélecteurs en les séparant par une virgule pour appliquer le même style à plusieurs éléments. Par exemple, p, h2 { color: gray; } rend gris à la fois les paragraphes et les titres H2. Le sélecteur descendant utilise l'héritage : nav li { font-size: large; font-weight: bold; } ne stylise que les éléments <li> se trouvant à l'intérieur d'une balise <nav>, pas tous les <li> de la page.
Cette flexibilité des sélecteurs permet de créer des styles granulaires : on peut styliser des éléments individuels via un ID, des groupes d'éléments similaires via une classe, ou cibler uniquement les éléments dans un contexte spécifique via des sélecteurs descendants. C'est le fondement de la réutilisabilité et de la maintenabilité du CSS.
En résumé
Cette leçon enseigne comment cibler des éléments HTML avec des sélecteurs CSS pour leur appliquer des styles spécifiques. Elle couvre les cinq méthodes essentielles : les sélecteurs d'éléments (h1, p, header), les sélecteurs d'ID (avec #), les sélecteurs de classe (avec .), les sélecteurs multiples (virgule), et les sélecteurs par descendance basés sur la structure parentale. Chaque technique est démontrée en pratique pour montrer comment styliser différents éléments sans affecter toute la page.
Points clés
- Sélecteurs d'éléments : cibler tous les h1, p ou autres balises d'un type donné pour appliquer le même style
- Sélecteurs d'ID : utiliser le # (ex. #subtitle) pour cibler un unique élément HTML porteur d'un id spécifique
- Sélecteurs de classe : utiliser le . (ex. .post) pour cibler tous les éléments partageant une même classe, indépendamment de leur balise
- Sélecteurs multiples : séparer par une virgule pour appliquer le même style à plusieurs sélecteurs différents (ex. h2, p)
- Sélecteurs par descendance : cibler les éléments via leur parent (ex. nav li) pour styliser uniquement ceux situés dans un conteneur précis
Questions fréquentes
Pourquoi utiliser un ID ou une classe plutôt que simplement cibler la balise HTML ?
Parce que cibler une balise (ex. p) applique le style à TOUS les paragraphes de la page, tandis qu'un ID ou une classe permet de styliser uniquement les éléments choisis, offrant une précision bien plus grande.
Quelle est la différence entre un sélecteur d'ID et un sélecteur de classe ?
Un ID (ex. #subtitle) est unique par page et cible un seul élément, tandis qu'une classe (ex. .post) peut être appliquée à plusieurs éléments différents pour leur attribuer le même style collectivement.
Comment cibler des éléments situés à l'intérieur d'un conteneur spécifique ?
Utiliser un sélecteur par descendance en mentionnant le parent suivi de l'enfant (ex. nav li pour cibler les éléments li uniquement dans une nav), sans affecter les mêmes balises en dehors du conteneur.