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

  • seb10394857024-60

    où se situe le probleme cela me dis qu'il manque la regle css pour chaque 3eme enfant je ne vois pas mon erreur voici mon codep:nth-child(3) {color:#33ccff} li:nth-child(3) {color:#33ccff} div:nth-child(3) {color:#33ccff}

  • lordflan13-98

    au secours !!

  • fumey.claire

    Bonjour, Pourriez-vous me dire où est le problème ? Merci d'avance ...

  • armand.peuchaud-23

    bonjour je ne comprend pas pourquoi cela ne marche pas : div :nth-child(3){ color:#33ccff; }

81 Commentaires

  • lordflan13-98

    lordflan13-98

    au secours !!

    le 21/04/2018 à 13h09

  • mram

    mram Administrateur

    Bonjour, dans le CSS il faut coller la pseudo classe au nom de la balise à laquelle vous l'appliquez.

    le 23/04/2018 à 04h16

  • fumey.claire

    fumey.claire

    Bonjour, Pourriez-vous me dire où est le problème ? Merci d'avance ...

    le 29/11/2016 à 09h30

  • armand.peuchaud-23

    armand.peuchaud-23

    bonjour je ne comprend pas pourquoi cela ne marche pas : div :nth-child(3){ color:#33ccff; }

    le 01/01/2019 à 23h30

  • meriam

    meriam Administrateur

    bonjour, l'exercice demande d'ajouter le sélecteur qui permet de sélectionner chaque élément HTML qui est le troisième enfant de son parent, ce qui donne :nth-child(3).

    le 02/01/2019 à 12h18

  • dormiandr

    dormiandr

    une peu daide merci

    le 24/01/2016 à 19h16

  • maycon_neto11

    maycon_neto11

    Bonjour . J'ai réussi a mettre en couleur les paragraphes demandés, cependant j'ai eu ce message d'erreur "Vérifiez la syntaxe du sélecteur pour les éléments HTML qui sont troisième enfant de leur parent " . Pourriez vous m'aider svp ? Merci

    le 06/03/2017 à 21h50

  • mram

    mram Administrateur

    Vous faites trop compliquer, gardez juste le code lignes 1 à 4 et supprimez le "p", ainsi la règle CSS s'appliquera à tous les éléments correspondant au sélecteur (que ce soit un "p", "div" etc.).

    le 30/11/2016 à 16h31

  • alexandre.joyea

    alexandre.joyea

    Un peu d aide aussi j'y arrive mais pas de la façon demander

    le 26/01/2016 à 19h45

  • mram

    mram Administrateur

    Normal, ici on demande de sélectionner TOUS les éléments HTML qui sont 3ème enfant de leur parent, et pas uniquement les "p" ou "li", donc ici on peut / doit ne rien mettre devant les ":" .

    le 05/03/2017 à 11h05

  • doudoupik

    doudoupik

    1/ Il y a une erreur dans la formulation de l'exercice. Il ne faut pas changer la couleur du background, mais la couleur du texte. 2/Je reformule l'exercice d'abord et je donne la solution plus loin. #REFORMULATION#On nous demande de mettre en #33ccff (bleu) tout les 3ièmes enfants de tout notre fichier .htlml. [Rappel : Pour sélectionner une balise spécifique, on ajoute cette balise en tête du sélecteur, comme ceci balise:nth-child(x)] Hors ici on ne nous demande pas de balise en particulier, on veut l'appliquer sur tout le document #FIN REFORMULATION# ¤¤¤¤¤¤¤¤¤¤¤¤¤¤ #SOLUTION# Pour ne spécifier aucune balise particulière, il suffit de ne rien metre en tête de sélecteur, comme ceci :nth-child(x).#FIN SOLUTION#

    le 28/01/2016 à 14h50

  • dormiandr

    dormiandr

    p:nth-child(3) { color: #33ccff; } li:nth-child() { color: #33ccff; } merci doudoupik ca ne marche pas je t es mis mon code

    le 30/01/2016 à 17h51

  • mram

    mram Administrateur

    Ligne 1 le "n" est en trop à la fin...

    le 09/03/2017 à 00h58

  • sanaatargui

    sanaatargui

    Toujours pas mram

    le 30/04/2017 à 14h28

  • mram

    mram Administrateur

    Même remarque, le code est correct, mais on attend un retour à la ligne (ligne 1) après l'accolade or il y a un espace invisible (difficile à voir évidemment...).

    le 04/05/2017 à 12h19

  • lau.seriwath

    lau.seriwath

    Bonjour, je ne comprends pas mon erreur. Merci

    le 22/09/2016 à 16h16

  • mram

    mram Administrateur

    Bonjour,

    C'est bien la couleur du texte et non la couleur de fond qu'il faut mettre dans le .css. Les instructions de l'exercice seront mises à jour en conséquence.

    Cordialement

    le 23/02/2016 à 21h58

  • mram

    mram Administrateur

    Bonjour,

    *:nth-child(3) et :nth-child(3) sont équivalents et dans ce cas la méthode la plus simple est la seconde. Mais il est vrai que les deux sont fonctionnels, le script de correction sera optimisé pour géré les deux cas désormais.

    Cordialement.

    le 26/02/2016 à 18h39

  • drjekillmrconnard

    drjekillmrconnard

    Bonjour, Pourquoi ceci ne fonctionne pas? *:nth-child(3){ color:#33ccff; }

    le 26/02/2016 à 02h08

  • mram

    mram Administrateur

    Lignes 1 4 7 il faut un espace avant l'accolade.

    le 22/09/2016 à 23h41

  • mram

    mram Administrateur

    Bonjour,

    Le premier sélecteur que vous donnez est incorrect : *.nth-child(3). Le deuxième est correct mais c'est le premier que vous avez mis dans votre fichier stylesheet.css donc ça ne fonctionne logiquement pas.

    le 29/03/2016 à 01h36

  • lemoaljules

    lemoaljules

    Franchement je comprend pas pourquoi ça refuse mes différentes réponses.... *.nth-child(3) {} :nth-child(3) {} franchement pas très intuitif...

    le 28/03/2016 à 15h49

  • nadialegall

    nadialegall

    Ne fonctionne pas… Problème de code ?

    le 19/03/2017 à 22h27

  • mram

    mram Administrateur

    Votre code est bon, ça devrait fonctionner. Quelle erreur avez-vous ?

    le 21/03/2017 à 17h48

  • mram

    mram Administrateur

    Bonjour, votre code est correct. Ce doit être un bug dans la correction. Je vais vérifier cela, pour le moment vous pouvez considérer cet exercice comme réussi. Cordialement.

    le 12/04/2016 à 21h35

  • sanaatargui

    sanaatargui

    Bonjour, Pouvez-vous m'aider?

    le 22/03/2017 à 23h45

  • mariondu0

    mariondu0

    malgré vos explications je ne trouve pas la solution..

    le 11/04/2016 à 21h54

  • mram

    mram Administrateur

    Essayez avec un espace devant l'accolade ligne 1 ...

    le 24/03/2017 à 10h39

  • christian67260

    christian67260

    Bonjour Encore un soucis ?? plusieurs soluces essayées !!rein "nada" ! vous pouvez voir dans l'historique de mon exo *:nth-child(3){ color:#33ccff; } marche pas et li:nth-child(3){ color: #33ccff; } p:nth-child(3){ color: #33ccff; } passe pas non plus !hummm!!

    le 02/03/2017 à 08h01

  • wassimbousabat-44

    wassimbousabat-44

    Ah merci mram c'est plus clair j'étais trop focalisé sur "p" et leurs parent "div" que j'en ai oublier les enfants de "body".

    le 07/06/2018 à 18h36

  • cmacherel

    cmacherel

    Peut-on modifier l'HTML ou cela se joue-t-il que sur la stylesheet CSS?

    le 12/09/2018 à 14h49

  • mram

    mram Administrateur

    Que dans le CSS.

    le 15/09/2018 à 07h40

  • cmacherel

    cmacherel

    Je ne sais pas quoi mettre avant le "nthchild"

    le 12/09/2018 à 14h58

  • mram

    mram Administrateur

    Eh justement, il n'y a pas forcémet besoin de mettre quelque chose. Ce n'est pas obligatoire.

    le 15/09/2018 à 07h41

  • veyssiere.n

    veyssiere.n

    Vérifiez les blocs de déclarations délimités par les { et }. Vous devriez en avoir 1 comprend pas help plzz

    le 31/10/2017 à 17h02

  • mram

    mram Administrateur

    Vous utilisez 3 sélecteurs CSS, il n'en faut qu'un seul.

    le 31/10/2017 à 23h54

  • naregb4

    naregb4

    Bonjour, je ne comprend pas mon erreur par rapport au { }

    le 04/09/2017 à 15h35

  • mram

    mram Administrateur

    Bonjour, votre CSS est trop compliqué, vous pouvez faire la même chose avec un seul sélecteur CSS et donc un seul couple de { } .

    le 06/09/2017 à 11h28

  • carolineoliveira.pro-33

    carolineoliveira.pro-33

    BONJOUR, je ne comprends pas ou est mon erreur. pouvez-vous m'aider? merci

    le 02/02/2018 à 17h06

  • mram

    mram Administrateur

    Bonjour, le sélecteur CSS était le bon, il faut juste bien aligner les lignes de code.

    le 06/02/2018 à 11h27

  • Olivier

    Olivier

    J'ai également le problème pour valider l'exercice: Erreur(s) : Vérifiez les blocs de déclarations délimités par les { et }. Vous devriez en avoir 1. Que dois-je faire ?

    le 12/06/2018 à 17h20

  • mram

    mram Administrateur

    Et bien, tout est dit dans le message, il ne faut qu'un seul sélecteur CSS pour valider l'exercice. Là vous en avez 3.

    le 13/06/2018 à 04h40

  • hassanliamsi-93

    hassanliamsi-93

    Bonjour, j'arrive pas à comprendre mon erreur par contre l'affichage marche bien

    le 04/02/2018 à 12h53

  • mram

    mram Administrateur

    Bonjour, oui avec les sélecteurs que vous utilisez vous obtenez le résultat demandé. Mais il y a moyen de faire beaucoup plus simple : on souhaite sélectionnez tous les éléments quis sont 3eme enfants de leur parent et ce quelque soit le parent (p, div ,... ).

    le 06/02/2018 à 11h35

  • jerome

    jerome

    bonjour, j'aimerai savoir qu'est ce qui cloche dans mon code..? merci

    le 26/07/2018 à 22h27

  • mram

    mram Administrateur

    Bonjour, pourquoi mettre le sélecteur universel devant ?

    le 02/08/2018 à 05h03

  • clementsavary56-86

    clementsavary56-86

    Bonjour, je voudrais savoir si le code que j'ai écris est bon car je ne comprend pas le message d'erreur disant de vérifier la syntaxe du sélecteur alors que le résultat est la

    le 27/07/2018 à 15h43

  • mram

    mram Administrateur

    Bonjour, il est correct mais il n'est pas forcément le plus adapté.

    Il vaut mieux utiliser celui que vous avez fini par choisir.

    le 02/08/2018 à 05h15

  • naim-khezzar

    naim-khezzar

    bonsoir je ne saisi pas:"Vérifiez les blocs de déclarations délimités par les { et }. Vous devriez en avoir 1." alors que le résultat est la

    le 12/01/2018 à 19h43

  • mram

    mram Administrateur

    Bonjour, oui mais il y a moyen de faire plus simple en n'utilisant qu'un seul sélecteur CSS qui sélectionne tous les éléments qui sont "troisième enfant" de leur parent et ce quelque soit la nature du parent : div, p, ul ...

    le 16/01/2018 à 19h25

  • volam

    volam

    Ceci ne marche pas veuillez m'aider nth-child (3) cela marche pour mes trois paragraphe mes le system valide pas

    le 01/08/2017 à 22h23

  • mram

    mram Administrateur

    Bonjour, il y a plusieurs façon de sélectionner des éléments HTML. Vous avez essayé plusieurs choses mais vous avez fini par trouver le bon sélecteur.

    le 05/08/2017 à 10h00

  • thibaud.fontaine1

    thibaud.fontaine1

    mes trois paragraphes sont en bleu mais j'ai un message d'erreur..

    le 16/12/2017 à 11h08

  • mram

    mram Administrateur

    Bonjour, votre sélecteur CSS n'est pas correct. Il ne faut pas mettre "html" devant c'est inutile.

    le 23/12/2017 à 12h22

  • wilfrid

    wilfrid

    Bonjour, une fois l'exercice fini, le lien vers la partie suivante ne fonctionne pas, ce n'est pas trop génant mais je tenais à vous le signaler (win10/firefox55.0.3)

    le 07/10/2017 à 16h16

  • mram

    mram Administrateur

    Bonjour, oui nous le savons, c'est sur la todo liste. Merci !

    le 09/10/2017 à 00h50

  • martinvu.pro

    martinvu.pro

    bonjour pouvez vous me dire si mon code est correct , Merci

    le 27/12/2017 à 18h55

  • mram

    mram Administrateur

    Bonjour, non il n'est pas correct. Vous pouvez résoudre l'exercice avec un seul sélecteur CSS uniquement. Dans un de vos essais vous n'étiez pas loin de la solution.

    le 30/12/2017 à 12h45

  • mohamadoubachirououmar

    mohamadoubachirououmar

    Je suis bloqué

    le 07/01/2018 à 15h05

  • mram

    mram Administrateur

    Bonjour, le sélecteur CSS est incomplet il faut utiliser :nth-child(x) avec x = la position de l'élément HTML enfant que l'on souhaite sélectionner.

    le 12/01/2018 à 01h18

  • christophe.bacquet.83-82

    christophe.bacquet.83-82

    Bonsoir, mon code fonctionne mais n'est pas validé "Vérifiez la syntaxe du sélecteur pour les éléments html qui sont troisième enfant de leur parent."

    le 04/03/2018 à 19h13

  • mram

    mram Administrateur

    Bonjour, il y a des espaces inutiles après les accolades {

    le 05/03/2018 à 04h14

  • wassimbousabat-44

    wassimbousabat-44

    J'ai du mal à comprendre pourquoi le dernier paragraphe est affiché en bleu mais pas l'avant dernier , explication svp ??

    le 02/06/2018 à 18h56

  • mram

    mram Administrateur

    Parce que le dernier "p" se trouve dans le 3eme "div" qui est donc bien le 3eme enfant de "body".

    le 07/06/2018 à 04h32

  • jetfusion.fr

    jetfusion.fr

    bonjour je suis bloqué j'ai essayer plein de façon de coder différente pour cet exercice mais je ne vois pas d'autre solution que la mienne ques que j'ai oublier ?

    le 14/01/2018 à 10h27

  • mram

    mram Administrateur

    Bonjour, oui il y a en effet une solution plus simple en utilisant un seul sélecteur CSS au lieu de trois.

    le 17/01/2018 à 19h07

  • damien.lando

    damien.lando

    pardon bonjour ou est mon erreur ? merci

    le 08/01/2018 à 14h25

  • mram

    mram Administrateur

    Bonjour, il faut utiliser le sélecteur CSS qui est demandé.

    le 12/01/2018 à 01h43

  • jetfusion.fr

    jetfusion.fr

    Je vient d'essayer çà mais j'ai toujours une erreur alors que le résultat semble correct, je ne vois vraiment pas

    le 25/01/2018 à 05h25

  • damien.lando

    damien.lando

    rebonjour, j ai trouvé la solution mais quand je soumet ma reponse j ai toujours un message d erreur

    le 09/01/2018 à 11h56

  • mram

    mram Administrateur

    Bonjour, il manque le " ; " c'est important .

    le 12/01/2018 à 01h55

  • lercat-63

    lercat-63

    bonsoir, où est l'erreur ?

    le 05/06/2018 à 20h18

  • mram

    mram Administrateur

    Bonjour, pas besoin du nom de la balise dans le sélecteur CSS, juste mettre la pseudo classe.

    le 07/06/2018 à 05h03

  • jetfusion.fr

    jetfusion.fr

    Je suis enfin parvenu à résoudre l'exercice après plusieurs heures. En fait il faut bien faire attention à mettre UN espace avant l'accolade de la propriété COLOR et UN espace avant l'accolade qui termine la propriété COLOR. Bien écrire votre code sur 4 ligne et pas seulement sur 2 ligne.

    le 26/01/2018 à 10h05

  • sikiri87-49

    sikiri87-49

    Erreur(s) : Vérifiez les blocs de déclarations délimités par les { et }. Vous devriez en avoir 1. jarrive pas à valider cette exercice. aidez moi

    le 05/06/2018 à 23h50

  • mram

    mram Administrateur

    Seule la première ligne est utile dans votre CSS.

    le 07/06/2018 à 05h05

  • vahan.barsamian

    vahan.barsamian

    Même probleme que précedentexercice, le code fonctionne mais pas la validation, avec ou sans espace apres l'accolade

    le 07/08/2017 à 17h22

  • mram

    mram Administrateur

    Bonjour, oui ça fonctionne mais il y a moyen de faire plus simple. En l'occurrence vous pouvez supprimer "html *" .

    le 09/08/2017 à 11h20

  • samy1s

    samy1s

    Une petite astuce :p Mettez le sélecteur universel "*" puis utilisez la pseudo-classe "nth-child(x)"

    le 08/03/2018 à 19h57

  • mram

    mram Administrateur

    Bonjour, même pas besoin du sélecteur universel, une pseudo classe peut fonctionner seule si on souhaite l'appliquer partout.

    le 08/03/2018 à 23h45

  • charhil.mohamed-78

    charhil.mohamed-78

    Wawou plusieurs heurs passer sur cette exercice et beaucoup d'essaie qui mon tousse ramener au résultat mais qui n'ont pas était accepter pour au finale me rendre conte que la réponse tien sur un mots ! petite aide pour les personnes qui sèche sur cette exo: :nth-child(3) { color:#33ccff; } tout simplement.

    le 08/03/2018 à 19h58

  • chanthasack

    chanthasack

    Je suis bloqué, je n'arrive pas à mettre le dernier paragraphe en bleu. Panne sèche d'idée

    le 21/12/2017 à 21h54

  • mram

    mram Administrateur

    Bonjour, la pseudo-classe "nth-last-child" n'existe pas. Pour résoudre cet exercice vous pouvez utiliser qu'une seule pseudo-classe afin de sélectionner en une seule fois tout les éléments qui sont 3ème enfant de leur parent. La solution est déjà dans votre code en fait.

    le 23/12/2017 à 17h14

  • Dark59

    Dark59

    bonjour je ne comprend pas ce que il faut mettre avant le selecteur nthchild .... merci

    le 02/08/2018 à 17h39

  • mram

    mram Administrateur

    Bonjour, il n'y a rien à mettre devant si l'on souhaite que la règle s'applique dans tous les cas possible énoncés par le sélecteur CSS.

    le 13/08/2018 à 03h08

  • tom.joly-55

    tom.joly-55

    Bonjour, J'ai l'impression que j'ai bon mais qu'il y a un Bug

    le 03/07/2018 à 18h07

  • mram

    mram Administrateur

    Bonjour,

    Non vous n'avez pas bon, et il n'y a pas de bug.

    Avec votre sélecteur CSS vous sélectionnez toute balise "body" qui est 3eme enfant de son parent.

    Ce n'est pas ce que l'on veut.

    le 09/07/2018 à 03h16

  • nkeshimanabrice-37

    nkeshimanabrice-37

    ok bien dit...ca marche..

    le 15/10/2018 à 15h26

  • rahil.farah121814-19

    rahil.farah121814-19

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

    le 22/10/2019 à 15h48

  • eprismfryt-53

    eprismfryt-53

    Pour ceux qui galere vraiment rappellez vous du sélecteur qui contien tout les html donc le "*" et appliquer le nth-child(x) + la couleur ♥

    le 06/04/2019 à 03h00

  • mestar.kenza-99

    mestar.kenza-99

    C'est bon, j'ai trouvé, merci

    le 22/10/2018 à 17h20

  • AkashiOkami

    AkashiOkami

    Pour ce qui n'arrive pas , je vous conseil d'utilise :nth-child(x) vu dans exercice 15

    le 26/09/2018 à 19h26