Cibler les éléments d’une page

Vous avez relié une feuille CSS à une page HTML et savez écrire une règle. Il reste à choisir précisément les éléments concernés : un sélecteur trop général peut modifier toute la page, tandis qu’un sélecteur ciblé vous permet d’appliquer un style uniquement à certains contenus.

Dans la leçon sur la structure HTML, vous avez vu comment organiser des titres, des paragraphes et des liens. Ici, vous allez utiliser les noms des éléments, ainsi que les attributs class et id, pour indiquer au navigateur à quels éléments appliquer chaque règle CSS.

Le projet de départ

Créez un dossier avec deux fichiers : index.html et styles.css. Dans le fichier HTML ci-dessous, la feuille externe est reliée dans la zone head au moyen de link et de son attribut href. Vous avez rencontré cette étape dans la leçon précédente ; vérifiez simplement que le nom et l’emplacement du fichier CSS correspondent.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Présentation de l’atelier</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Atelier des plantes</h1>
    <p class="introduction">Des conseils simples pour cultiver chez vous.</p>
  </header>

  <main>
    <section id="horaires">
      <h2>Nos horaires</h2>
      <p>Nous vous accueillons du mardi au samedi.</p>
      <p class="information">Les horaires peuvent changer pendant les jours fériés.</p>
    </section>

    <section>
      <h2>Nos conseils</h2>
      <p>Commencez par choisir une plante adaptée à votre espace.</p>
      <a href="mailto:[email protected]">Nous contacter</a>
    </section>
  </main>
</body>
</html>

Cibler par nom d’élément

Un sélecteur de type est le nom d’un élément HTML, écrit sans signe devant. Par exemple, h1 cible tous les éléments h1 de la page, et p tous ses paragraphes. Cette méthode est pratique pour un style commun, mais elle ne distingue pas les paragraphes de l’introduction de ceux des autres sections.

h1 {
  color: darkgreen;
}

p {
  font-size: 18px;
}

Le titre principal devient vert foncé. La taille de tous les paragraphes est réglée à 18 pixels.

Le code placé entre accolades est une déclaration, comme dans la leçon sur l’écriture d’une règle CSS. Le sélecteur, ici p, se trouve avant l’accolade ouvrante et détermine les éléments auxquels s’appliquent les déclarations.

Cibler par classe

Une classe sert à regrouper des éléments qui partagent un rôle ou un style. Dans le HTML, elle est indiquée avec l’attribut class, par exemple class="information". En CSS, écrivez un point suivi du nom de la classe : .information. Vous pouvez attribuer la même classe à plusieurs éléments, même s’ils ne sont pas du même type.

.introduction {
  color: darkgreen;
}

.information {
  font-weight: bold;
}

Le paragraphe d’introduction est vert foncé. Le paragraphe portant la classe information apparaît en gras.

Dans ces sélecteurs, le point fait partie de la syntaxe CSS : ne l’ajoutez pas à la valeur de l’attribut HTML. Écrivez class="information" dans le HTML, puis .information dans le fichier CSS. Si l’orthographe diffère, la règle ne trouvera pas l’élément attendu.

Cibler par identifiant

Un identifiant sert à désigner un élément précis de la page. Dans le HTML, vous l’écrivez avec l’attribut id, comme id="horaires". En CSS, le sélecteur correspondant commence par un dièse : #horaires. Dans un même document, donnez une valeur d’identifiant unique afin de ne pas rendre le ciblage ambigu.

#horaires {
  background-color: lightyellow;
}

La section qui porte l’identifiant horaires reçoit un arrière-plan jaune clair.

Combiner des sélecteurs

Vous pouvez aussi cibler un élément en fonction de sa place dans le HTML. Un sélecteur descendant combine deux sélecteurs séparés par une espace : section p vise les paragraphes placés à l’intérieur d’une section, quel que soit leur niveau d’imbrication. Il ne sélectionne donc pas un paragraphe qui se trouverait en dehors de toute section.

section p {
  color: darkgreen;
}

#horaires p.information {
  font-weight: bold;
}

Tous les paragraphes situés dans une section sont verts foncés. Parmi eux, le paragraphe de classe information situé dans la section horaires est aussi en gras.

Dans #horaires p.information, le navigateur cherche un élément portant l’identifiant horaires, puis un paragraphe de classe information qui se trouve à l’intérieur. C’est un sélecteur composé : plusieurs critères précisent ensemble la cible. Contrairement à section p, qui contient une espace pour exprimer une relation parent-descendant, p.information n’a pas d’espace et désigne un paragraphe ayant cette classe.

À retenir

• Un sélecteur de type, comme h1 ou p, cible les éléments portant ce nom.
• Un sélecteur de classe commence par un point et peut concerner plusieurs éléments.
• Un sélecteur d’identifiant commence par un dièse et vise un élément unique dans le document.
• Une espace entre des sélecteurs exprime une relation descendant ; sans espace, les critères peuvent viser le même élément.

Dans la prochaine leçon, vous choisirez des couleurs et des unités pour donner une apparence plus précise aux éléments sélectionnés.