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

870 Commentaires

  • sidahmedrose-40

    sidahmedrose-40

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

    le 12/12/2022 à 14h02

  • Patricio M

    Patricio M Admin

    le code est bon, sauf que tu dois laisser des un espace entre la lettre et l'accolade

    le 12/12/2022 à 16h02

  • adeline-24

    adeline-24

    Bonjour à tous ? J'espère que je ne suis pas seule ! Je ne saisis pas mon erreur ! Quelqu'un peut m'aider ?

    le 01/12/2022 à 09h43

  • Patricio M

    Patricio M Admin

    Je peux t'aider: c'est div > p et non div p. Le > selectionne tous les p où le parent est une <div>

    le 01/12/2022 à 09h55

  • hafida-62

    hafida-62

    bonjour, voici mon code: j'ai le bon résultat mais un message apparait disant qu'il manque la règle css pour l'introduction alors que c'est bien en gras

    le 12/10/2022 à 11h25

  • Patricio M

    Patricio M Admin

    c'est div > p et non body div > p. Puis tu dois laisser des espaces, sinon le bot ne valide pas

    le 13/10/2022 à 11h41

  • samaityoucef-28

    samaityoucef-28

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

    le 10/10/2022 à 15h35

  • Patricio M

    Patricio M Admin

    Les paragraphes P imbriqués dans le UL, donc, sans le >

    le 11/10/2022 à 07h00

  • fadela.fellah-48

    fadela.fellah-48

    vous manque la règle css pour le paragraphe Introduction

    le 26/09/2022 à 10h39

  • Patricio M

    Patricio M Admin

    Ton dernier code est OK

    le 26/09/2022 à 12h37

  • judithblot-93

    judithblot-93

    Bonjour, je ne comprends pas l'erreur, Introduction s'affiche bien en bold... Merci

    le 25/09/2022 à 15h10

  • Patricio M

    Patricio M Admin

    la synthaxe n'est pas bonne, Judith... p; body > p; diiv > p; ul p

    le 26/09/2022 à 08h51

  • jules.l06-10

    jules.l06-10

    Bonjour, je ne comprends pas où se trouve l'erreur

    le 21/09/2022 à 09h07

  • Patricio M

    Patricio M Admin

    Jules, enlèves le html du début et ça passe très bien

    le 21/09/2022 à 12h54

  • veroniquedouce-83

    veroniquedouce-83

    Merci Meriam,

    le 07/08/2022 à 18h02

  • meriam

    meriam Admin

    Je vous en prie Veronique, n'hésitez pas à poser des questions si vous trouverez des difficultés dans les exercices suivant.

    le 07/08/2022 à 18h33

  • veroniquedouce-83

    veroniquedouce-83

    Merci, mais on m'indique il vous manque la règle CSS pour le paragraphe introduction

    le 05/08/2022 à 13h00

  • meriam

    meriam Admin

    Bonjour Veronique, vous devez corriger le 2 ème et le 3 ème sélecteur

    le 07/08/2022 à 17h12

  • meriam

    meriam Admin

    Pour le paragraphe introduction, il faut sélectionner le paragraphe directement imbriqué dans body, c'est pour ça qu'il faut utiliser le sélecteur de l'enfant direct

    le 07/08/2022 à 17h14

  • meriam

    meriam Admin

    De même pour le paragraphe synopsis

    le 07/08/2022 à 17h15

  • veroniquedouce-83

    veroniquedouce-83

    je n'arrive pas à comprendre le problème

    le 04/08/2022 à 17h10

  • Patricio M

    Patricio M Admin

    Véronique, tu dois sélectionner les p qui sont les seuls enfants de la div avec div > p. Les propriétes des autes p ne seront pas affectées.

    le 05/08/2022 à 07h29

  • Patricio M

    Patricio M Admin

    c'est ul p et non li p à la fin

    le 05/08/2022 à 07h30

  • melles.cuscianna-91

    melles.cuscianna-91

    j'ai trouvé merci il me manquait le >

    le 27/05/2022 à 06h43

  • meriam

    meriam Admin

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

    le 30/05/2022 à 15h09

  • melles.cuscianna-91

    melles.cuscianna-91

    Bonjour, je ne trouve pas mon erreur, le simulateur me dit qu'il me manque la règle CSS pour le paragraphe synopsis

    le 27/05/2022 à 06h42

  • meriam

    meriam Admin

    Bonjour, pour le 3 ème sélecteur, il faut utiliser le sélecteur de l'enfant direct.

    le 30/05/2022 à 15h13

  • mohamediny983-46

    mohamediny983-46

    bonjour,je n'arrive pas valider mon code,je trouve pas mon erreur.

    le 23/05/2022 à 17h04

  • meriam

    meriam Admin

    Vous devez laisser un espace aprés le signe > du sélecteur.

    le 23/05/2022 à 23h53

  • lucie_n-59

    lucie_n-59

    Bonjour, je bloque: p&#123; font-family:Garamond; } body > p #123&#123; font-weight:bold; } div > p #123&#123; color:#7ac5cd; } ul p #123&#123; color:#00000; text-decoration:underline; } Message:Il vous manque la règle css pour le paragraphe Introduction

    le 25/04/2022 à 08h10

  • meriam

    meriam Admin

    Bonjour, il faut remplacer le code suivant &#123; une accolade ouvrante.

    le 25/04/2022 à 13h51

  • girard.gh-33

    girard.gh-33

    1.p 2.body > p 3. div > p 4. ul p cela me dit Il vous manque la règle css pour les paragraphes imbriqués dans le ul

    le 29/03/2022 à 09h33

  • meriam

    meriam Admin

    Bonjour, pour sélectionner les paragraphes sélectionnés dans la liste ul ==> ul p { }

    le 29/03/2022 à 10h42

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>À 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>
http://localhost:8080