CSS : utiliser les sélecteurs

Le principe du sélecteur

Dans le précédent chapitre, nous avons vu qu’une règle CSS cible un élément puis lui applique des propriétés. Le sélecteur est la clé de ce ciblage. Il en existe plusieurs type ; nous allons nous concentrer sur les trois fondamentaux :

• le sélecteur de balise,
• le sélecteur de classe
• et le sélecteur d’identifiant.

<h1>Bienvenue sur mon site</h1>

<p>Un premier paragraphe ordinaire.</p>
<p class="important">Un paragraphe marqué comme important.</p>
<p class="important encadre">Un paragraphe important ET encadré.</p>
<p id="introduction">Le paragraphe d'introduction, unique dans la page.</p>

Le sélecteur de balise (ou de type)

Le sélecteur le plus simple : on écrit directement le nom de la balise HTML. Tous les éléments correspondants dans la page seront ciblés. Ce sélecteur de balise est pratique pour définir un style de base (la couleur par défaut des paragraphes, la taille des titres…), mais insuffisant dès que vous voulez distinguer un élément des autres : il vous faut alors un sélecteur plus précis.

/* Tous les paragraphes <p> de la page seront en bleu marine */
p {
  color: navy;
  line-height: 1.6;
}

/* Tous les titres <h1> seront centrés */
h1 {
  text-align: center;
  font-size: 2.5rem;
}

Le sélecteur de classe

Pour cibler un ou plusieurs éléments spécifiques, on leur attribue une classe dans le HTML (attribut class), puis on cible cette classe en CSS en la précédant d’un point. L’attribut class est réutilisable autant de fois que nécessaire dans une page.

<!-- Dans le HTML : j'ajoute une classe à certains éléments -->
<p>Un paragraphe ordinaire.</p>
<p class="important">Un paragraphe marqué comme important.</p>
<p class="important">Un autre paragraphe important.</p>

/* Dans le CSS : je cible la classe avec un point */
.important {
  color: red;
  font-weight: bold;
}

Résultat : seuls les deux paragraphes ayant class="important" deviennent rouges et gras. Le premier paragraphe n’est pas affecté.

Les règles à retenir pour les classes

• En HTML, l’attribut s’écrit class (sans point)
• En CSS, le sélecteur s’écrit avec un point : .maClasse
• Donnez des noms simples, sans espaces ni caractères spéciaux : important, carte-produit, texte-centre
• Privilégiez les noms en minuscules séparés par des tirets : texte-important plutôt que texteImportant
• Une classe est réutilisable : c’est même son principe fondamental

Un élément peut avoir plusieurs classes

C’est un usage très courant : on cumule les classes pour combiner les styles. Les noms de classes sont séparés par un espace dans l’attribut class. Ce système de classes combinables est la base du CSS modulaire. Plutôt que de créer une classe important-et-encadre qui fait tout, on crée de petites classes réutilisables qu’on assemble selon les besoins.

<!-- Cet élément cumule deux classes -->
<p class="important encadre">Je suis important ET encadré</p>

/* Chaque classe apporte ses propres propriétés */
.important {
  color: red;
  font-weight: bold;
}

.encadre {
  border: 2px solid red;
  padding: 1rem;
  border-radius: 8px;
}

Le sélecteur d’identifiant

Pour cibler un élément unique, on lui attribue un identifiant dans le HTML (attribut id), puis on le cible en CSS en le faisant précéder d’un dièse #. L’attribut id ne doit apparaître qu’une seule fois dans toute la page.

<!-- Dans le HTML : un seul élément porte cet id -->
<p id="introduction">Le paragraphe d'introduction, unique dans la page.</p>

/* Dans le CSS : je cible l'identifiant avec un dièse */
#introduction {
  font-size: 1.3rem;
  font-style: italic;
  border-left: 4px solid navy;
  padding-left: 1rem;
}

Les règles à retenir pour les identifiants

En pratique, les classes sont bien plus utilisées que les identifiants pour le CSS. Réservez les id aux cas où l’unicité est indispensable.

• En HTML, l’attribut s’écrit id (sans dièse)
• En CSS, le sélecteur s’écrit avec un dièse : #monId
• Un id doit être unique dans toute la page : si vous avez besoin de réutiliser un style, utilisez une classe
• Les mêmes conventions de nommage s’appliquent : pas d’espaces, pas de caractères spéciaux

Récapitulatif des trois sélecteurs

/* Sélecteur de balise : cible les 4 paragraphes */
p {
  font-family: Georgia, serif;
  line-height: 1.6;
}

/* Sélecteur de classe : cible les 2 paragraphes "important" */
.important {
  color: red;
  font-weight: bold;
}

/* Sélecteur d'identifiant : cible uniquement #introduction */
#introduction {
  font-size: 1.3rem;
  font-style: italic;
}

Le principe de cascade et de spécificité

Règle 1 : les styles se cumulent

Le C de CSS signifie Cascading (en cascade). Les propriétés CSS ne se remplacent pas, elles s’additionnent. Si un sélecteur de balise définit la police et qu’un sélecteur de classe définit la couleur, l’élément héritera des deux.

p {
  font-family: Georgia, serif; /* ← tous les paragraphes */
}

.important {
  color: red; /* ← s'ajoute à la police */
}

Un paragraphe ayant class="important" sera en Georgia et en rouge.

Règle 2 : en cas de conflit, le plus spécifique l’emporte

Quand deux règles définissent la même propriété sur le même élément, c’est le sélecteur le plus précis qui gagne :

/* Qui gagne ? */
p {
  color: navy;          /* spécificité faible : sélecteur de balise */
}

.important {
  color: red;           /* spécificité moyenne : sélecteur de classe */
}

#introduction {
  color: green;         /* spécificité forte : sélecteur d'identifiant */
}

L’ordre de priorité, du moins prioritaire au plus prioritaire :

1. Sélecteur de balise (p, h1, div…) → priorité la plus faible
2. Sélecteur de classe (.important, .encadre…) → priorité moyenne
3. Sélecteur d’identifiant (#introduction, #header…) → priorité forte
4. Style inline (style="..." dans la balise) → priorité maximale

Règle 3 : à spécificité égale, le dernier déclaré gagne

Le CSS obéit à une logique en trois temps : d’abord le CSS se cumule, en cas de conflit la spécificité tranche et en dernier recours, c’est l’ordre d’apparition qui départage. « Le dernier qui a parlé a raison » en CSS…

/* Deux classes = même spécificité */
.alerte {
  color: orange;
}

.important {
  color: red;       /* c'est celle-ci qui s'applique car déclarée en dernier */
}

Bonnes pratiques

• Privilégiez les classes pour le stylisme CSS : elles sont réutilisables, modulables et suffisamment spécifiques pour la plupart des cas
• Réservez les identifiants aux ancres de navigation et au JavaScript. En CSS pur, vous en aurez rarement besoin
• Nommez vos classes de manière descriptive : .carte-produit est plus clair que .cp ou .box1
• Partez du général vers le particulier dans votre feuille de style : d’abord les sélecteurs de balise (styles de base), puis les classes (styles spécifiques), puis les identifiants (cas uniques)
• Utilisez l’inspecteur du navigateur (F12) pour comprendre quelles règles s’appliquent à un élément et pourquoi. L’onglet “Styles” affiche les règles dans l’ordre de priorité et barre celles qui sont surchargées