Exercice 8/20

  • Le sélecteur p { met par défaut tous les paragraphes ‹p› en bleu;
  • Mais le sélecteur div p { est plus spécifique et met tous les parapgraphes ‹p› dans un ‹div› en rouge;
  • Mais ce n'est pas le cas des deux derniers paragraphes ‹p›;
  • Ils sont bien dans un ‹div› aussi, mais ils ont respectivement un sélecteur .class et #id qui sont eux-même plus spécifiques que le sélecteur div p {. Ils ont donc une couleur particulière;
  • Cliquez sur soumettre ma réponse pour passer à la suite;

Leçon 8/20

Comme vous venez de le voir, certains sélecteurs en "annulent" d'autres quand ils ont un plus grand degré de spécificité.

Cependant, deux autres types de sélecteurs sont encore plus spécifiques que ceux déjà vu : les class et les id.

Commentaires les mieux notés

14 Commentaires

  • lucie_n-59

    lucie_n-59

    en fait c'est bon, ne tene pas compte de mon message. Merci

    le 25/04/2022 à 08h28

  • meriam

    meriam Admin

    Bonjour, N'hésitez pas à demander de l'aide si vous trouvez des problèmes dans les exercices suivants.Bon travail.

    le 25/04/2022 à 13h51

  • vitoderiu-82

    vitoderiu-82

    faute de frappe "paragrPAhe" Ligne 9

    le 17/11/2020 à 13h47

  • meriam

    meriam Admin

    Bonjour, merci pour votre remarque et bon travail. N'hésitez pas à poser des questions si vous rencontrez des problèmes dans les exercices qui suivent.

    le 17/11/2020 à 14h05

  • ramon.emilie-82

    ramon.emilie-82

    d'où viennent le . et # pour green et purple dans le CSS?

    le 05/05/2020 à 08h25

  • meriam

    meriam Admin

    Bonjour, quand vous attribuez une classe à un élément, le sélecteur de type classe doit être précédé par un point '.' suivi du nom de la classe, le sélecteur de type id doit être précéde par #.

    le 05/05/2020 à 09h50

  • johnmauduit-73

    johnmauduit-73

    ok en fait il faut des espaces entre les selecteurs et les chevrons, bref, inutile

    le 23/03/2018 à 12h49

  • mram

    mram Admin

    Pas tant que ça, c'est plus lisible en aérant le code un minimum. C'est commequandonécrit c'estpaspratiquesiilmanquedesespaces.

    le 24/03/2018 à 04h27

  • mram

    mram Admin

    Idem, de mon côté tout s'affiche. ça le fait à tous les exercices ou pas ?

    le 31/01/2017 à 12h37

  • mathieu.louaintier

    mathieu.louaintier

    Bonjour:pourquoi je n ai pas les résultats merci.

    le 27/01/2017 à 17h35

Pour publier un commentaire, vous devez vous connecter.
index.html
stylesheet.css
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Au-delà des éléments HTML</title> </head> <body> <p>Je suis un paragraphe.</p> <p>Je suis un autre paragraphe.</p> <div> <p>Je suis un paragraphe dans un <code>&lsaquo;div&rsaquo;</code>. Le sélecteur qui me met en rouge est plus spécifique que le sélecteur qui met en bleu tous les paragraphes.</p> <p class="green">Je suis un paragraphe dans un <code>&lsaquo;div&rsaquo;</code>, pourtant je ne suis pas en rouge, mais en vert grâce à mon sélecteur "class" très spécifique.</p> <p id="purple">Je suis un paragraphe dans un <code>&lsaquo;div&rsaquo;</code>, pourtant je ne suis pas en rouge, mais en violet grâce à mon sélecteur "id" très spécifique.</p> </div> </body> </html>
p { color: blue; } div p { color: red; } .green { color: green; } #purple { color: purple; }
http://localhost:8080