Exercice 7/20

  • Dans le fichier stylesheet.css, attribuez la police Garamond à tous les ‹p› de la page HTML. N'utilisez pas le sélecteur universel * pour cela !
  • Attribuez au paragraphe Introduction la propriété font-weight et sa valeur bold (c'est une nouvelle propriété qui met en gras le texte).
  • Attribuez la couleur #7ac5cd au paragraphe Synopsis.
  • Attribuez la couleur #000000 ainsi que la propriété text-decoration et sa valeur underline aux ‹p› imbriqués dans le ‹ul›;
  • Cliquez sur soumettre ma réponse pour vérifier vos résultats;

Leçon 7/20

Essayons maintenant quelque chose de plus complexe.

Rappelez-vous que vous pouvez atteindre un élément qui est l'enfant d'un autre élément de cette façon :

div div p {
    /* votre CSS */ 
}

En écrivant div div p { , nous sélectionnons tous les ‹p› imbriqués quelque part dans la page HTML à l'intérieur d'une ‹div›; cette ‹div› est elle-même imbriquée quelque part à l'intérieur d'une autre ‹div›.

Si vous voulez sélectionner un enfant direct, c'est-à-dire un élément qui est directement imbriqué à l'intérieur d'un autre élément et sans aucun autre élément entre les deux, vous devez utiliser le symbole **>**, comme ceci :

div > p {
    /* votre CSS*/ 
}

En procédant ainsi, seuls les ‹p› qui sont imbriqués directement à l'intérieur d'une ‹div› seront sélectionnés. Cela ne sélectionnera pas les paragraphes qui sont, par exemple, imbriqués dans des ‹div› qui sont elles-mêmes imbriquées dans d'autres ‹div›.

Commentaires les mieux notés

  • angylee-30

    angylee-30

    Je ne comprends pas où est mon erreur ?! Le message d'erreur me dit que je n'ai pas saisi la règle pour le paragraphe introduction ! Hors je l'ai fait et il apparaît bien en gras comme le veut la règle.

    le 06/12/2019 à 16h52

  • t.yazid-46

    t.yazid-46

    Il ne faut pas mettre le ( > ) juste. ul p{ }

    le 22/05/2019 à 14h00

  • pejo.mischelle-1

    pejo.mischelle-1

    Erreur(s) : Vérifiez la syntaxe du sélecteur pour le paragraphe "Synopsis". (je ne comprends toujours pas) voici mon code: p { font-family:Garamond; } body > p { font-weight:bold; } div > p { color:#7ac5cd; } ul p { color:#000000;text-decoration:underline; }

    le 03/11/2018 à 13h31

  • denyzor-99

    denyzor-99

    @meriambensalha-29 rhaaa ... merci beaucoup. J'avais buggé, bonne journée ! en plus j'avais oublié un caractère dans ma couleur en hexa.

    le 29/10/2018 à 15h30

  • clovis.taerea-11

    clovis.taerea-11

    pas facile cette exo mais j'ai réussie :)

    le 26/01/2020 à 15h05

20 Commentaires

  • damien.valentini-17

    damien.valentini-17

    Bonjour, j'ai "Il vous manque la règle css pour le paragraphe Synopsis", peut-on valider mon code svp

    le 23/10/2020 à 08h51

  • meriam

    meriam Admin

    Bonjour, pour le paragraphe synopsis, vous devez utiliser le sélecteur de l'enfant direct.

    le 23/10/2020 à 14h17

  • celestin.lamy01-59

    celestin.lamy01-59

    Bonjour, mon code semble correct mais j'ai un message d'erreur ("Il vous manque la règle css pour le paragraphe Synopsis")

    le 22/10/2020 à 00h54

  • meriam

    meriam Admin

    Bonjour, le paragraphe synopsis il fut utiliser le sélecteur de l'enfant direct.

    le 23/10/2020 à 14h24

  • valentin.lieppe-43

    valentin.lieppe-43

    Bonjour, un message d'erreur m'indique qu'il me manque la règle css pour le paragraphe synopsis

    le 17/10/2020 à 16h09

  • meriam

    meriam Admin

    Bonjour, votre code est correct.

    le 19/10/2020 à 13h17

  • jinnyrae-13

    jinnyrae-13

    bonjour, je ne vois pas du tout le problème

    le 13/10/2020 à 10h58

  • meriam

    meriam Admin

    Bonjour, votre dernier code est correct.

    le 13/10/2020 à 12h04

  • mroeam-11

    mroeam-11

    Bonjour tout mon code est correct mais je n'arrive pas à passer à la question suivante merci

    le 12/10/2020 à 11h02

  • meriam

    meriam Admin

    Bonjour, il suffit de cliquer sur le bouton "leçon suivante" une fois l'exercice est validé.

    le 13/10/2020 à 15h50

  • emmanuel.poutet-92

    emmanuel.poutet-92

    Il vous manque la règle css pour le paragraphe Introduction

    le 06/10/2020 à 06h02

  • meriam

    meriam Admin

    Bonjour, vous devez utiliser le sélecteur de l'enfant direct body > p (c'est à dire entre body et p il n' ya aucun élément intermédiaire)

    le 07/10/2020 à 16h43

  • kleberkunha-8

    kleberkunha-8

    Hello Meriam, could you please validate my code please, i did all but the system won't let pass, thanks.

    le 06/10/2020 à 03h00

  • meriam

    meriam Admin

    Bonjour, votre code est validé.

    le 07/10/2020 à 16h21

  • ganky2727-37

    ganky2727-37

    bonjour je ne trouve pas de solution pourtant mon code semble correct :

    le 30/09/2020 à 20h38

  • meriam

    meriam Admin

    Votre code est correct.

    le 02/10/2020 à 15h50

  • arnauddelabarre-33

    arnauddelabarre-33

    Bonjour, Je ne comprends pas; mon code permet bien d'arriver à l'objectif mais le système refuse de le valider. "Il vous manque la règle css pour les paragraphes imbriqués dans le ul"

    le 25/09/2020 à 14h28

  • meriam

    meriam Admin

    bonjour, votre dernier code est correct.

    le 25/09/2020 à 16h06

  • g.batte

    g.batte

    p { font-family: Garamond; } body > p { font-weight: bold; } div p{ color:#7ac5cd; } ul p{ color:#000000; text-decoration: underline; }

    le 24/09/2020 à 12h32

  • coman.cyprien-96

    coman.cyprien-96

    p{font-family:Garamond;} body > p{font-weight:bold} div > p{color:#7ac5cd;} ul > p{color:#000000; text-decoration:underline;}

    le 15/09/2020 à 17h49

  • meriam

    meriam Admin

    Bonjour, votre code est correct.

    le 16/09/2020 à 10h40

  • tristancals38-92

    tristancals38-92

    p{font-family: Garamond;} body > p{font-weight: bold;} div p{color:#7ac5cd;} ul p{color:#000000; text-decoration:underline;}

    le 11/09/2020 à 10h03

  • correiawilliam-90

    correiawilliam-90

    non en fait

    le 08/09/2020 à 10h55

  • meriam

    meriam Admin

    Bonjour, votre dernier code est correct.

    le 08/09/2020 à 15h53

  • correiawilliam-90

    correiawilliam-90

    Merci Meriam, j'ai trouvé la solution

    le 08/09/2020 à 10h54

  • jsqhfg12-64

    jsqhfg12-64

    non je viens de changer il m'affiche toujours le meme code d'erreur que faire ?

    le 02/09/2020 à 14h35

  • meriam

    meriam Admin

    Bonjour, il vous manque un sélecteur il faut attribuez la police Garamond à tous les ‹p›, il suffit d'écrire p { font-family:Garamond;}

    le 03/09/2020 à 14h49

  • jsqhfg12-64

    jsqhfg12-64

    bonjour je suis bloqué pourtant mon code semble bon que faire ?

    le 30/08/2020 à 10h46

  • meriam

    meriam Admin

    Bonjour, le dernier sélecteur est ul p {}

    le 31/08/2020 à 15h51

  • thomas.fourdan-74

    thomas.fourdan-74

    Bonjour, navré mais je suis bloqué malgré vos consignes ? Merci pour votre aide

    le 27/08/2020 à 16h29

  • meriam

    meriam Admin

    Bonjour thomas, il faut supprimer le code suivant '&#123' que avez ajouté dans chaque sélecteur.

    le 28/08/2020 à 10h37

  • william.dusautoir-36

    william.dusautoir-36

    il me manque 1regle css pour le paragraphe introduction ? mon code p { font-family: Garamond; } body>p { font-weight: bold; } div>p{ color: #7ac5cd; } ul p { color:#000000; text-decoration: underline; }

    le 24/08/2020 à 14h47

  • meriam

    meriam Admin

    Bonjour, laissez espace avant et aprés le signe >

    le 24/08/2020 à 14h56

  • sa.tahiris-22

    sa.tahiris-22

    j'ai le même problème que vous alors que le résultat est là. je ne vois pas où est le problème au niveau de l'introduction

    le 18/08/2020 à 16h16

  • meriam

    meriam Admin

    Bonjour, votre code est validé.

    le 24/08/2020 à 19h29

index.html
stylesheet.css
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>À vous de jouer !</title> </head> <body> <p>Introduction : La spécificité en CSS</p> <div> <p>Synopsis : Quand vous fixez la propriété d'un sélecteur comme "p" à une certaine valeur, cette valeur s'applique à <strong>tous</strong> les "p". Cependant, si vous changez cette même propriété en choisissant une autre valeur pour une occurrence spécifique de p, ce changement va <strong>prendre le dessus</strong> sur la propriété par défaut. </p> <ul> <li><p>Si vous écrivez p {font-family:Garamond;}, tous les "p" seront en police Garamond.</p></li> <li><p>MAIS si vous écrivez li p {font-family:Verdana;}, les "p" à <strong>l'extérieur</strong> de "li" seront en Garamond et les "p" <strong>l'intérieur</strong> de "li" seront en Verdana. </p></li> <li><p>En résumé : plus vos sélecteurs sont précis (spécifiques), plus votre CSS met des priorités dans l'application des styles.</p></li> </ul> </div> </body> </html>