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

  • Collery.olivier-10

    Collery.olivier-10

    Bonjour, j'ai bien noté toutes les règles css et j'obtient "Il vous manque la règle css pour la balise p". Ai-je fais une erreur?

    le 08/07/2020 à 13h38

  • meriam

    meriam Admin

    Bonjour, supprimez ce code &#123

    le 09/07/2020 à 12h39

  • meriam

    meriam Admin

    Bonjour, supprimez ce code &#123

    le 09/07/2020 à 12h39

  • erb.emmanuel-73

    erb.emmanuel-73

    Bonjour, je ne vois pas mon erreur

    le 06/07/2020 à 15h03

  • meriam

    meriam Admin

    Bonjour, le dernier sélecteur ne demande pas d'ajouter un sélecteur de l'enfant direct, pour le 2ème et le 3 ème sélecteur laissez un espace avant et aprés le signe >.

    le 07/07/2020 à 12h17

  • nicolas41-57

    nicolas41-57

    Bonjour, il me dise qu'il me manque la règle CSS pour le paragraphe Introduction ??

    le 03/07/2020 à 14h49

  • meriam

    meriam Admin

    Bonjour, pour sélectionner le paragraphe introduction, utilisez le sélecteur de l'enfant direct qui permet de sélectionner les enfants p qui sont directement imbriqués dans body

    le 03/07/2020 à 14h52

  • ersox240-7

    ersox240-7

    aidez moi svp je bloque complet

    le 22/06/2020 à 17h32

  • meriam

    meriam Admin

    Votre code est correct.

    le 23/06/2020 à 00h03

  • seguedaelvis-93

    seguedaelvis-93

    le code marche mais quand je soumet on me dit qu'il manque les règles de css au niveau de la balise ul voila le code: p { font-family: Garamond; } body > p{ font-weight:bold; } div > p { color:#7ac5cd; } ul > li > p { text-decoration : underline; color : #000000; }

    le 11/06/2020 à 18h38

  • meriam

    meriam Admin

    le dernier sélecteur ne demande pas d'utiliser le sélecteur de l'enfant direct ">", il suffit d'écrire ul p{ }

    le 11/06/2020 à 20h24

  • Jiink0-77

    Jiink0-77

    Bonjour, je bloque sur le paragraphe "introduction".

    le 08/06/2020 à 18h43

  • meriam

    meriam Admin

    Bonjour, votre dernier code fonctionne correctement.

    le 09/06/2020 à 13h26

  • alexandre.sequeira01-73

    alexandre.sequeira01-73

    il y a toujours un soucis pour la fin et j'ai fait le code au piffe. Pour ** > ** me dire rajouter des espaces sans expliquer car encore une fois je ne comprend pas ce chapitre.

    le 08/06/2020 à 18h03

  • meriam

    meriam Admin

    Le sélecteur de l'enfant direct permet de sélectionner les éléments qui sont directement imbriqués dans un élément parent (c'est à dire entre l'élément parent et l'élément enfant il n'y a aucun élément intermédiaire ).

    le 08/06/2020 à 18h58

  • gwenael.ody-86

    gwenael.ody-86

    Bonjour, désolé je ne vois pas mon erreur...

    le 08/06/2020 à 17h50

  • meriam

    meriam Admin

    Bonjour, votre code est correct.

    le 08/06/2020 à 18h59

  • alexandre.sequeira01-73

    alexandre.sequeira01-73

    je bloque sur la deuxième consigne sur l'introduction et je n'arrive pas a comprendre votre lecon **>**

    le 08/06/2020 à 16h39

  • meriam

    meriam Admin

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

    le 08/06/2020 à 17h32

  • kenhy.00-27

    kenhy.00-27

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

    le 06/06/2020 à 21h07

  • kenhy.00-27

    kenhy.00-27

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

    le 06/06/2020 à 21h07

  • yannis-sport-60

    yannis-sport-60

    Question: pourquoi a la ligne 10 le " { " ne doit pas être sur la même ligne que ul p ? ce n'est pas logique par rapport au reste ?

    le 31/05/2020 à 20h00

  • meriam

    meriam Admin

    Bonjour, l'accolade ouvrante peut être sur la même ligne que ul p ou sur la ligne suivante (pareil pour tous les sélecteurs).

    le 01/06/2020 à 17h01

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>