Exercice 20/20

  • Dans le fichier stylesheet.css, ajoutez le sélecteur qui permet de sélectionner chaque élément HTML qui est le troisième enfant de son parent;
  • Ajoutez également la règle CSS permettant de leur attribuez la couleur suivante #33ccff;
  • Cliquez sur soumettre ma réponse pour vérifier vos résultats;

Leçon 20/20

Cet exercice est un second rappel sur les sélecteurs de pseudo-classes.

Commentaires les mieux notés

212 Commentaires

  • lesguer.mikael-21

    lesguer.mikael-21

    p:nth-child(3) { color: #33ccff; } li:nth-child(3) { color: #33ccff; } div:nth-child(3) { color: #33ccff; } voile le code que j'ecris dans le css mais il me dit qu'il me manque le selectionneur pour le troisieme enfant de chaque parent

    le 21/02/2023 à 16h44

  • Patricio M

    Patricio M Admin

    Utilise le * pour TOUT séléctionner et tu épargnes plusieurs lignes de code ;)

    le 22/02/2023 à 08h04

  • evgeniya.d.yastrebova-54

    evgeniya.d.yastrebova-54

    p:nth-child(3) { color: #33ccff; } li:nth-child(3) { color: #33ccff; } div:nth-child(3) { color: #33ccff; } ou est mon eurreur?

    le 02/11/2022 à 21h50

  • Patricio M

    Patricio M Admin

    Ton code est correct :)

    le 03/11/2022 à 08h21

  • gilles.jamain2-80

    gilles.jamain2-80

    bonjour pourriez vous me dire ou est mon erreur???

    le 20/10/2022 à 12h44

  • Patricio M

    Patricio M Admin

    Chaque element se déclare avec *

    le 20/10/2022 à 14h22

  • jeanlucmartin75-29

    jeanlucmartin75-29

    Bonjour, je ne comprends pas mon erreur.

    le 15/09/2022 à 13h42

  • Patricio M

    Patricio M Admin

    Jean Luc, CHAQUE 3ème element, pour cela, tu utilises une *, ce n'est pas la peine d'écrire toutes les balises

    le 16/09/2022 à 07h25

  • jimmy-mnt-31

    jimmy-mnt-31

    il y a trois groupes (div)...

    le 14/06/2022 à 16h04

  • meriam

    meriam Admin

    Les éléments qui vont être sélectionnés ==> le 3 ème p , le 3 ème li et le 3 ème div.

    le 15/06/2022 à 09h43

  • hubliste-4

    hubliste-4

    je ne comprends pas ca ne marche pas

    le 26/12/2021 à 22h11

  • meriam

    meriam Admin

    Bonsoir, il faut écrire un seul sélecteur qui permet de sélectionner chaque 3ème enfant de son parent.

    le 26/12/2021 à 22h45

  • imane.vanr-79

    imane.vanr-79

    *:nth-child(3) { color:#33ccff; }

    le 12/10/2021 à 10h20

  • meriam

    meriam Admin

    Bonjour, votre code fonctionne correctement.

    le 12/10/2021 à 15h46

  • imane.vanr-79

    imane.vanr-79

    p:nth-child(3),li:nth-child(3) { color:#33ccff; }

    le 12/10/2021 à 10h17

  • meriam

    meriam Admin

    Bonjour, utilisez un seul sélecteur pour sélectioner chaque 3 ème enfant dans son parent.

    le 12/10/2021 à 15h53

  • ferreira-celine2-75

    ferreira-celine2-75

    Bonjour, doit-on vraiment utiliser le sélecteur universel * sachant que lorsque je l'utilise, l'interpréteur m'affiche une icône warning alors que lorsque je mets seulement :nth-child(3) [sans sélecteur donc] l'interpréteur calcul parfaitement le code demandé sans icône warning et donne le résultat attendu.(code qui est d'ailleurs accepté pour la validation de cet exercice)

    le 02/09/2021 à 14h57

  • meriam

    meriam Admin

    Bonjour, oui vous pouvez l'utiliser, l'icône warning c'est pour dire que ce sélecteur est un peu long.

    le 06/09/2021 à 14h21

  • maximegonzalezbzh-66

    maximegonzalezbzh-66

    Car c'est le 3eme <div> !!! ☺

    le 07/04/2021 à 14h02

  • maximegonzalezbzh-66

    maximegonzalezbzh-66

    Car c'est le 3eme <div> !!! ☺

    le 07/04/2021 à 14h01

  • maximegonzalezbzh-66

    maximegonzalezbzh-66

    Car c'est le 3eme <div> !!! ☺

    le 07/04/2021 à 14h01

  • maximegonzalezbzh-66

    maximegonzalezbzh-66

    Car c'est le 3eme div !!! ☺

    le 07/04/2021 à 14h00

  • maximegonzalezbzh-66

    maximegonzalezbzh-66

    Car c'est le 3eme <div> !!! ☺

    le 07/04/2021 à 14h00

  • meriam

    meriam Admin

    Bonjour, vous devez utiliser la pseudo-classe nth-child(X);

    le 07/04/2021 à 14h04

  • sarmientoflavio-62

    sarmientoflavio-62

    bonjour, je n'arrive plus a soumettre mes reponses? aidez moi svp

    le 16/03/2021 à 17h59

  • meriam

    meriam Admin

    Bonjour, est ce que avez essayé cet exercice?? je ne vois aucun essai.

    le 17/03/2021 à 08h29

index.html
stylesheet.css
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Rappel : les pseudo-classes 2</title> </head> <body> <div> <p>Je suis un paragraphe.</p> <p>Je suis un paragraphe.</p> <p>Je suis un paragraphe de couleur bleue.</p> <ul> <li>Je suis un élément de liste à puce.</li> <li>Je suis un élément de liste à puce.</li> <li>Je suis un élément de liste à puce de couleur bleue.</li> </ul> </div> <div> <p>Je suis un paragraphe.</p> </div> <div> <p>Je suis un paragraphe en bleu car j'hérite de la propriété de mon élément parent, c'est le principe de cascade en CSS.</p> </div> </body> </html>