Le premier paragraphe — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 2)

Le premier paragraphe

Sélecteurs · niveau 2

Énoncé

On veut mettre en gras le premier paragraphe de chaque section de la page « À propos ».


body {
  font-family: system-ui, sans-serif;
}

/* Le premier paragraphe de chaque section, en gras */
section p:first-child {
  font-weight: bold;
}


  <section>
    <h2>Notre histoire</h2>
    <p>Fondée en 1987 par deux anciens étudiants.</p>
    <p>Elle fournit les manuels du Quartier latin.</p>
  </section>

Aucun paragraphe n'est en gras. Expliquer, puis proposer deux corrections. Laquelle résiste le mieux si l'on ajoute une image entre le titre et le paragraphe ?

Corrigé

p:first-child désigne un paragraphe qui est le premier enfant de son parent. Dans la section, le premier enfant est le <h2> : aucun paragraphe n'est concerné (dans Chromium, les deux paragraphes ont font-weight: 400).

Deux corrections :

section p:first-of-type : le premier paragraphe parmi les frères de type <p> ;
section h2 + p : le paragraphe qui suit immédiatement le titre.

Si l'on insère une image entre le titre et le paragraphe, h2 + p ne désigne plus rien, alors que p:first-of-type désigne toujours le bon paragraphe. Fichier corrigé :


body {
  font-family: system-ui, sans-serif;
}

/* Le premier paragraphe de chaque section, en gras */
section p:first-of-type {
  font-weight: bold;
}