Cibler le dernier enfant

Fait partie de la section CSS Mastery du Journey HTML de Coddy — leçon 14 sur 43.

La pseudo-classe :last-child sélectionne les éléments qui sont le dernier enfant de leur parent.

Par exemple :

<div class="parent">
  <p>First paragraph</p>
  <p>Middle paragraph</p>
  <p>Last paragraph</p>
</div>

Pour styliser uniquement le dernier paragraphe, utilisez la pseudo-classe :last-child :

p:last-child {
  color: red;
  font-weight: bold;
}

Après avoir appliqué ce CSS, seul « Last paragraph » sera rouge et en gras car c'est le dernier enfant du div parent.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Défi

Facile

Créez une règle CSS pour styliser le dernier élément <p> dans n'importe quel groupe de paragraphes.

Stylisez-le avec une couleur de fond bleue (#046ae0) et du texte white.
Définissez la font weight du dernier paragraphe sur bold.

Aide-mémoire

La pseudo-classe :last-child sélectionne les éléments qui sont le dernier enfant de leur parent :

p:last-child {
  color: red;
  font-weight: bold;
}

Cela stylisera uniquement le dernier élément de paragraphe à l'intérieur de son conteneur parent.

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
    <title>Targeting the Last Child</title>
  <style>
    /* Write your CSS rule here */

  </style>
</head>
<body>
    <div> 
        <h2>Exploring the Universe</h2>
        <p>The universe is vast, with countless stars and galaxies waiting to be discovered.</p>
        <p>New technologies allow us to explore deeper into space, revealing its many secrets.</p>
        <p>We continue to learn more about distant planets and the possibility of life beyond Earth.</p> 
    </div>
    <div>
        <h2>The Deep Ocean</h2>
        <p>Our oceans are mysterious, covering most of Earth, yet we know so little about them.</p>
        <p>Many species live in extreme conditions, some of which are still being discovered today.</p>
        <p>Exploring the ocean depths gives us insights into life at the planet's most remote locations.</p> 
    </div>
</body>
</html>

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.