Exercice 15/20

  • Dans le fichier stylesheet.css, attribuez la police Tahoma au second paragraphe;
  • Attribuez la couleur #cc0000 au troisième paragraphe;
  • Attribuez la couleur de fond du quatrième paragraphe à #00ff00;
  • Attribuez la taille de la police du cinquième paragraphe à 2em;
  • Cliquez sur soumettre ma réponse pour vérifier vos résultats;

Leçon 15/20

En fait, vous pouvez sélectionner n'importe quel enfant d'un élément parent en utilisant le sélecteur de pseudo-classe :nth-child(x) où "x" correspond à la place de l'enfant dans la descendance de l'élément parent.

Par exemple :

p:nth-child(2) {
    color: red;
}

Cela va sélectionner les paragraphes p qui sont le deuxième enfant de leur parent.

L'élément représentant l'enfant que l'on veut sélectionner est spécifié juste avant :nth-child. Dans l'exemple ci-dessus, l'élément ciblé est un p. Son élément parent est celui qui le contient.

Commentaires les mieux notés

  • steve.besson

    Moi ça a l'ai bon mais tout est en erreur

  • bombonne54-64

    Petit bug , sur la quattrième ligne background-color , retaper la couleur plusieurs fois jusqu'a ce qu'elle soit prise en compte

  • bruno

    Pareil que l'exo precedent, cela affiche bien ce qui est demande mais il dit de verifier la syntaxe. Il y a peut-etre une autre maniere d'ecrire le code, mais il faut donner des indications.

  • mram Administrateur

    Ici aussi, il y a encore plus simple, pas besoin de préciser le div. De la même façon : body div p:nth-child(3) fonctionne aussi mais il est inutile de surcharger le sélecteur CSS.

16 Commentaires

  • steve.besson

    steve.besson

    Moi ça a l'ai bon mais tout est en erreur

    le 11/11/2017 à 15h33

  • mram

    mram Administrateur

    Bonjour, il ne faut pas d'espace après "div" dans le CSS. D'ailleurs ce n'est pas les balises "div" qu'il faut sélectionner. Relisez les instructions.

    le 16/11/2017 à 16h23

  • bombonne54-64

    bombonne54-64

    Petit bug , sur la quattrième ligne background-color , retaper la couleur plusieurs fois jusqu'a ce qu'elle soit prise en compte

    le 24/07/2018 à 09h00

  • mram

    mram Administrateur

    Non ce n'est pas un bug, vous avez oublié le ; en fin de ligne et vous l'avez mis au bout de votre 4eme essai.

    le 01/08/2018 à 05h24

  • bruno

    bruno

    Pareil que l'exo precedent, cela affiche bien ce qui est demande mais il dit de verifier la syntaxe. Il y a peut-etre une autre maniere d'ecrire le code, mais il faut donner des indications.

    le 09/07/2016 à 22h37

  • mram

    mram Administrateur

    Ici aussi, il y a encore plus simple, pas besoin de préciser le div. De la même façon : body div p:nth-child(3) fonctionne aussi mais il est inutile de surcharger le sélecteur CSS.

    le 11/07/2016 à 12h24

  • illshaad.budureea

    illshaad.budureea

    je ne comprend pas ou est l'erreur merci

    le 21/09/2017 à 17h16

  • mram

    mram Administrateur

    Bonjour, c'est "Tahoma" avec un T majuscule.

    le 22/09/2017 à 18h35

  • mram

    mram Administrateur

    Votre code est correct, c'est juste une question de syntaxe. On attend à ce qu'il y ait un espace après les double points ":" du couple "propriété: valeur".

    le 28/11/2016 à 16h24

  • fumey.claire

    fumey.claire

    Bonjour, je ne comprends pas d'où vient le problème ?Merci pour votre aide

    le 28/11/2016 à 15h17

  • kandersonmanuel

    kandersonmanuel

    Je ne trouve pas où est mon erreur.

    le 29/11/2017 à 12h05

  • mram

    mram Administrateur

    Bonjour, il faut aller à la ligne après l'accolade {

    le 01/12/2017 à 00h23

  • Hervé

    Hervé

    idem pour ici je ne comprend pas pourquoi cela ne se valide pas

    le 09/07/2017 à 16h16

  • mram

    mram Administrateur

    Il ne faut pas d'espace avant les ":"

    le 10/07/2017 à 17h58

  • Hervé

    Hervé

    j'ai trouvé merci comme même

    le 11/07/2017 à 12h09

index.html
stylesheet.css
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Le N-ième enfant</title> </head> <body> <div> <p>Je suis le premier enfant !</p> <p>Pas nous.</p> <p>Pas nous.</p> <p>Pas nous.</p> <p>Pas nous.</p> <p>Pas nous.</p> <p>Pas nous.</p> </div> </body> </html>