Cibler le premier enfant

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

La pseudo-classe :first-child cible le premier élément parmi un groupe d'éléments frères.

Par exemple :

<section>
  <p>This paragraph will be blue and bold.</p>
  <p>This paragraph will have default styling.</p>
</section>

Tout paragraphe qui est le premier élément enfant de son parent sera coloré en bleu et aura un texte en gras.

p:first-child {
  color: blue;
  font-weight: bold;
}

Vous pouvez combiner et appliquer des sélecteurs de descendant, d'enfant et d'autres sélecteurs pour cibler des éléments plus spécifiquement. Voici un autre exemple :

div:first-child h1 {
 color: red;
}

Ceci sélectionne le premier élément div parmi ses frères, puis change la couleur du texte de la balise <h1> à l'intérieur de celui-ci en rouge.

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 qui cible le premier élément de liste (<li>) dans n'importe quelle liste non ordonnée (<ul>) et le stylise avec :

Une couleur de texte 'blue'
Une couleur d'arrière-plan 'lightyellow'
Un padding gauche de '10px'

Aide-mémoire

La pseudo-classe :first-child cible le premier élément parmi un groupe d'éléments frères.

p:first-child {
  color: blue;
  font-weight: bold;
}

Vous pouvez combiner :first-child avec d'autres sélecteurs pour un ciblage plus spécifique :

div:first-child h1 {
  color: red;
}

Ceci sélectionne le premier élément div parmi ses frères, puis cible la balise h1 à l'intérieur de celui-ci.

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
    <title>Targeting the First Child</title>
  <style>
    /* Write your CSS rule here */
    
  </style>
</head>
<body>
  <h2>Grocery List</h2>
  <ul>
    <li>Fresh Apples</li>
    <li>Organic Bananas</li>
    <li>Whole Wheat Bread</li>
  </ul>
  
  <h2>To-Do List for the Day</h2>
  <ul>
    <li>Complete coding challenge</li>
    <li>Go for a walk in the park</li>
  </ul>
</body>
</html>

Testez-vous

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