Adloun

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

Qui est désigné ?

Sélecteurs · niveau 1 (application)

Énoncé


  <main>
    <h1 class="titre">Nouveautés</h1>
    <article class="carte">
      <h2 class="titre">Programmation Java</h2>
      <p class="prix">32,00 €</p>
    </article>
    <p class="prix promo">Tout le rayon informatique à −10 %</p>
    <p>Retrait gratuit en boutique.</p>
  </main>

Pour chacun des sélecteurs suivants, donner les éléments désignés :

  • .titre
  • h2.titre
  • .prix
  • .prix.promo
  • .carte .prix
  • main > p
  • p:not(.prix)
  • .carte, .promo

Corrigé

  • .titre : le <h1> et le <h2>.
  • h2.titre : le <h2> seul.
  • .prix : les deux paragraphes « 32,00 € » et « Tout le rayon… ».
  • .prix.promo : « Tout le rayon… » (il porte les deux classes).
  • .carte .prix : « 32,00 € », le seul prix situé dans la carte.
  • main > p : « Tout le rayon… » et « Retrait gratuit » ; « 32,00 € » a pour parent l'article.
  • p:not(.prix) : « Retrait gratuit ».
  • .carte, .promo : l'article et le paragraphe « Tout le rayon… » (la virgule fait une union).

Chaque réponse a été vérifiée dans Chromium avec document.querySelectorAll, qui accepte les mêmes sélecteurs que CSS — un bon réflexe dans la console des outils de développement.

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 →