Testez vos compétences : Les sélecteurs

L'objectif de ce test de compétences est de vous aider à évaluer si vous comprenez les sélecteurs CSS.

Pour compléter ces tâches, vous ne devez modifier que le CSS, pas le HTML.

Note : Pour obtenir de l'aide, consultez notre guide d'utilisation Testez vos compétences. Vous pouvez également nous contacter par l'un de nos canaux de communication.

Les sélecteurs 1

Pour compléter la tâche :

Rendez les titres <h1> bleus.
Donnez aux titres <h2> un fond bleu et un texte blanc.
Faites en sorte que le texte entouré d'un <span> ait une taille de police de 200%.

Le point de départ de la tâche ressemble à ceci :

Voici le code sous-jacent pour ce point de départ :

html

<div class="container">
  <h1>Ceci est un titre</h1>
  <p>
    Les légumes, c'est un plus pour vous,
    <span>c'est pourquoi je vous demande</span> de mettre davantage de
    chou-rave, ciboulette, daikon, amarante, tatsoi, tomatillo, melon, haricots
    azuki, ail.
  </p>
  <h2>Un titre de niveau 2</h2>
  <p>
    Feuilles de betterave, maïs, soko, endive, courge à gumbo. Persil, échalote,
    courgette, tatsoi, pousses de pois, fèves, chou vert, pissenlit, gombo,
    wakamé, tomate. Pissenlit, concombre, arachide, pois, cacahuète, soko,
    courgette.
  </p>
</div>

css

body {
  font: 1.2em / 1.5 sans-serif;
}
/* Ajoutez des styles ici */

Le style mis à jour doit ressembler à ceci :

Cliquez ici pour afficher la solution

Vous devez cibler les sélecteurs h1, h2 et span pour changer leur couleur ou leur taille.

css

h1 {
  color: blue;
}

h2 {
  background-color: blue;
  color: white;
}

span {
  font-size: 200%;
}

Les sélecteurs 2

Pour compléter la tâche :

Donnez à l'élément avec un id de special un fond jaune.
Donnez à l'élément avec une classe de alerte une bordure grise solide de 2px.
Si l'élément avec une classe de alerte a également une classe de stop, faites en sorte que le fond soit rouge.
Si l'élément avec une classe de alerte a également une classe de go, faites en sorte que le fond soit vert.

Le point de départ de la tâche ressemble à ceci :

Voici le code sous-jacent pour ce point de départ :

html

<div class="conteneur">
  <h1>Ceci est un titre</h1>
  <p>
    Les légumes, c'est un plus pour vous,
    <span class="alerte">c'est pourquoi je vous demande</span> de mettre
    davantage de chou-rave, ciboulette, daikon, amarante, tatsoi, tomatillo,
    melon, haricots azuki, ail.
  </p>
  <h2 id="special">Un titre de niveau 2</h2>
  <p>Gumbo, betterave verte, maïs, soko, endive, gumbo, gourd.</p>
  <h2>Un autre titre de niveau 2</h2>
  <p>
    <span class="alerte go">Persil, échalote</span>, courgette, tatsoi, pousses
    de pois, fèves, chou vert, pissenlit, gombo, wakamé, tomate. Pissenlit,
    concombre, arachide, pois, cacahuète, soko, courgette.
  </p>
</div>

css

body {
  font: 1.2em / 1.5 sans-serif;
}
/* Ajoutez des styles ici */

Le style mis à jour doit ressembler à ceci :

Cliquez ici pour afficher la solution

Cela teste votre compréhension de la différence entre les sélecteurs de classe et d'identifiant, ainsi que la manière de cibler plusieurs classes sur un élément.

css

#special {
  background-color: yellow;
}

.alert {
  border: 2px solid grey;
}

.alert.stop {
  background-color: red;
}

.alert.go {
  background-color: green;
}

Les sélecteurs 3

Pour compléter la tâche :

Mettez en forme les liens, en rendant l'état du lien orange, les liens visités verts et en supprimant le soulignement au survol.
Faites en sorte que le premier élément à l'intérieur du conteneur ait une font-size: 150% et que la première ligne de cet élément soit rouge.
Rayez toutes les autres lignes du tableau en sélectionnant ces lignes et en leur donnant une couleur de fond de #333333 et une couleur de premier plan blanche.

Le point de départ de la tâche ressemble à ceci :

Voici le code sous-jacent pour ce point de départ :

html

<div class="conteneur">
  <p>
    Les légumes, <a href="http://example.com">c'est un plus pour vous</a>, c'est
    pourquoi je vous demande de mettre davantage de chou-rave, ciboulette,
    daikon, amarante, tatsoi, tomatillo, melon, haricots azuki, ail.
  </p>
  <p>
    Feuilles de betterave, maïs, soko, endive, courge à gumbo. Persil, échalote,
    courgette, tatsoi, pousses de pois, fèves, chou vert, pissenlit, gombo,
    wakamé, tomate. Pissenlit, concombre, arachide, pois, cacahuète, soko,
    courgette.
  </p>
  <table>
    <tbody>
      <tr>
        <th>Fruits</th>
        <th>Légumes</th>
      </tr>
      <tr>
        <td>Pomme</td>
        <td>Pomme de terre</td>
      </tr>
      <tr>
        <td>Orange</td>
        <td>Carotte</td>
      </tr>
      <tr>
        <td>Tomate</td>
        <td>Panais</td>
      </tr>
      <tr>
        <td>Kiwi</td>
        <td>Oignon</td>
      </tr>
      <tr>
        <td>Banane</td>
        <td>Betterave</td>
      </tr>
    </tbody>
  </table>
</div>

css

body {
  font: 1.2em / 1.5 sans-serif;
}
* {
  box-sizing: border-box;
}

table {
  border-collapse: collapse;
  width: 300px;
}

td,
th {
  padding: 0.2em;
  text-align: left;
}

/* Ajoutez des styles ici */

Le style mis à jour doit ressembler à ceci :

Cliquez ici pour afficher la solution

Appliquez une pseudo-classe (:first-child) et un pseudo-élément (::first-line) au contenu. Mettez en forme les états :link, :visited et :hover de l'élément a, et créez des lignes de tableau alternées en utilisant la pseudo-classe :nth-child.

css

.conteneur p:first-child {
  font-size: 150%;
}

.conteneur p:first-child::first-line {
  color: red;
}

a:link {
  color: orange;
}

a:visited {
  color: green;
}

a:hover {
  text-decoration: none;
}

tr:nth-child(even) {
  background-color: #333333;
  color: white;
}

Les sélecteurs 4

Pour compléter la tâche :

Mettez en forme les paragraphes qui suivent directement un élément <h2> en rouge.
Mettez en forme les éléments de liste qui sont un enfant direct de l'élément <ul> avec une classe list comme suit :
- Supprimez leurs puces.
- Donnez-leur une bordure inférieure grise de 1px.

Le point de départ de la tâche ressemble à ceci :

Voici le code sous-jacent pour ce point de départ :

html

<div class="conteneur">
  <h2>Ceci est un titre</h2>
  <p>Ce paragraphe vient après le titre.</p>
  <p>Ceci est le deuxième paragraphe.</p>

  <h2>Un autre titre</h2>
  <p>Ce paragraphe vient après le titre.</p>
  <ul class="liste">
    <li>Un</li>
    <li>
      Deux
      <ul>
        <li>2.1</li>
        <li>2.2</li>
      </ul>
    </li>
    <li>Trois</li>
  </ul>
</div>

css

body {
  font: 1.2em / 1.5 sans-serif;
}

/* Ajoutez des styles ici */

Le style mis à jour doit ressembler à ceci :

Cliquez ici pour afficher la solution

Cette tâche vérifie que vous comprenez comment utiliser différents combinateurs. Voici une solution appropriée :

css

h2 + p {
  color: red;
}

.liste > li {
  list-style: none;
  border-bottom: 1px solid #cccccc;
}

Les sélecteurs 5

Pour compléter la tâche, fournissez des solutions pour les défis suivants en utilisant des sélecteurs d'attributs :

Ciblez l'élément <a> avec un attribut title et donnez-lui une bordure rose (border-color: pink).
Ciblez l'élément <a> avec un attribut href qui contient le mot contact quelque part dans sa valeur et donnez-lui une bordure orange (border-color: orange).
Ciblez l'élément <a> avec une valeur href commençant par https et donnez-lui une bordure verte (border-color: green).

Le point de départ de la tâche ressemble à ceci :

Voici le code sous-jacent pour ce point de départ :

html

<ul>
  <li><a href="https://example.com">Lien 1</a></li>
  <li><a href="http://example.com" title="Visitez example.com">Lien 2</a></li>
  <li><a href="/contact">Lien 3</a></li>
  <li><a href="../contact/index.html">Lien 4</a></li>
</ul>

css

body {
  font: 1.2em / 1.5 sans-serif;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin-bottom: 0.5em;
}

a {
  display: block;
  padding: 0.5em;
}

a {
  border: 5px solid grey;
}

/* Ajoutez des styles ici */

Le style mis à jour doit ressembler à ceci :

Cliquez ici pour afficher la solution

Pour sélectionner les éléments avec un attribut title, nous pouvons ajouter title à l'intérieur des crochets (a[title]), ce qui sélectionne le deuxième lien, qui est le seul avec un attribut title.
Pour cibler l'élément <a> avec un attribut href qui contient le mot « contact » quelque part dans sa valeur et lui donner une bordure orange (border-color: orange). Il y a deux choses que nous voulons correspondre ici, la valeur href /contact et aussi ../contact. Nous devons donc correspondre à la chaîne de caractères « contact » n'importe où dans la valeur en utilisant *=. Cela sélectionne les troisième et quatrième liens.
Pour cibler l'élément <a> avec une valeur href commençant par https et lui donner une bordure verte (border-color: green). Recherchez une valeur href qui commence par « https », donc utilisez ^= pour ne sélectionner que le premier lien.

css

a[title] {
  border-color: pink;
}
a[href*="contact"] {
  border-color: orange;
}
a[href^="https"] {
  border-color: green;
}

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 8 juil. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu