CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 3 · Application directe du cours

Qui gagne ?

Cascade, spécificité et héritage · niveau 2

Énoncé


  <section class="encart">
    <p class="info">Premier paragraphe</p>
    <p class="info important">Deuxième paragraphe</p>
    <p id="note" class="info">Troisième paragraphe</p>
  </section>


/* 1 */
.encart p {
  color: #1f3a68;
}

/* 2 */
p.info {
  color: #a8520a;
}

/* 3 */
section p.info {
  color: #555;
}

/* 4 */
.info.important {
  color: #8c1d18;
}

/* 5 */
#note {
  color: #2e6b30;
}

Donner la couleur de chacun des trois paragraphes, en justifiant par la spécificité des règles en concurrence.

Corrigé

Spécificités : (1) .encart p $(0, 1, 1)$ ; (2) p.info $(0, 1, 1)$ ; (3) section p.info $(0, 1, 2)$ ; (4) .info.important $(0, 2, 0)$ ; (5) #note $(1, 0, 0)$ .

Premier paragraphe (info) : règles 1, 2, 3. La règle 3 est la plus spécifique : gris #555. (Entre 1 et 2, à égalité, la 2 l'aurait emporté par l'ordre.)
Deuxième (info important) : règles 1 à 4. La règle 4, $(0, 2, 0)$ , bat la 3, $(0, 1, 2)$ , car on compare $b$ avant $c$ : rouge foncé #8c1d18.
Troisième (note) : règles 1, 2, 3 et 5. L'identifiant l'emporte : vert #2e6b30.

Vérification dans Chromium : rgb(85, 85, 85), rgb(140, 29, 24), rgb(46, 107, 48).

100 % gratuit

La suite du chapitre est sur Adloun

Exercice suivant et tuteur

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.

Le cours du chapitre · Tous les exercices du chapitre

Exercice suivant et tuteur →