Exercice 16/20

  • Dans le fichier stylesheet.css, attribuez la couleur #ff0000 aux paragraphes p se trouvant dans un élément de la liste à puces;
  • Cliquez sur soumettre ma réponse pour vérifier vos résultats;

Leçon 16/20

Cet exercice est un rappel sur les sélecteurs multiples.

Rappelez-vous comment utiliser les sélecteurs pour cibler des éléments imbriqués les uns dans les autres. Si vous avez un paragraphe p dans un div, ce div étant lui-même imbriqué dans un autre div, vous pouvez cibler le paragraphe p en question comme cela :

   div div p {
        /*Votre CSS*/
    }    

Ce sélecteur va appliquer le style à tous les paragraphes imbriqués dans deux div, sans toucher aux paragraphes qui ne correspondent pas à ces critères

Commentaires les mieux notés

  • mohamadoubachirououmar

    Je suis bloqué

  • Yoda

    Je ne trouve pas mon erreur

  • elliot.dinguimbert

    Alors dans ce cas là, pourquoi cela ne fonctionne t'il pas avec l'unique sélecteur li ?

  • mram Administrateur

    Oui on pourrait attribuer la couleur au "li", comme il contient "p" ce dernier sera donc en rouge. Mais comme ce n'est pas ce qui est demandé, le sélecteur "li" n'est pas pris en compte.

28 Commentaires

  • mohamadoubachirououmar

    mohamadoubachirououmar

    Je suis bloqué

    le 07/01/2018 à 14h10

  • mram

    mram Administrateur

    Bonjour, il y a moyen d'utiliser un sélecteur CSS plus simple.

    le 12/01/2018 à 01h13

  • Yoda

    Yoda

    Je ne trouve pas mon erreur

    le 17/11/2017 à 13h33

  • mram

    mram Administrateur

    Bonjour, il est demandé de ne sélectionner que les "p" qui sont dans un "li". Là dans votre code vous les sélectionnez tous.

    le 22/11/2017 à 00h39

  • elliot.dinguimbert

    elliot.dinguimbert

    Alors dans ce cas là, pourquoi cela ne fonctionne t'il pas avec l'unique sélecteur li ?

    le 23/09/2016 à 18h39

  • mram

    mram Administrateur

    Oui on pourrait attribuer la couleur au "li", comme il contient "p" ce dernier sera donc en rouge. Mais comme ce n'est pas ce qui est demandé, le sélecteur "li" n'est pas pris en compte.

    le 28/09/2016 à 20h42

  • mram

    mram Administrateur

    Bonjour, même si votre code donne le résultat escompté, votre sélecteur CSS est trop spécifique. On souhaite appliquer le style aux <p> situés dans un <li>, rien de plus, peu importe dans quoi se trouve le <li> lui-même.

    le 05/06/2016 à 16h24

  • vladimir.mouilleron

    vladimir.mouilleron

    bonsoir j ai un pitit probleme pourriez vous m aidez svp

    le 29/09/2017 à 22h15

  • mram

    mram Administrateur

    Bonjour, on ne souhaite sélectionner que les "p" dans des "li" donc il faut le sélecteur adapté. En utilisant "body p" vous sélectionnez forcément tous les "p" car la balise "body" contient de toute façon l'ensemble de la page.

    le 30/09/2017 à 15h02

  • mram

    mram Administrateur

    Là je vois que vous venez de trouver. Bien joué.

    le 30/09/2017 à 15h02

  • line.lagarde

    line.lagarde

    Je ne comprends pas mon erreur?

    le 05/06/2016 à 15h30

  • yurilecomte-94

    yurilecomte-94

    help

    le 07/07/2018 à 20h17

  • mram

    mram Administrateur

    Bonjour, je ne peux pas vous aider avec si peux d'informations.

    Quel message d'erreur avez-vous ?

    le 09/07/2018 à 03h31

  • yurilecomte-94

    yurilecomte-94

    help

    le 07/07/2018 à 20h17

  • mram

    mram Administrateur

    Bonjour, je ne peux pas vous aider avec si peux d'informations.

    Quel message d'erreur avez-vous ?

    le 09/07/2018 à 03h32

  • vfaiola-21

    vfaiola-21

    hello, je ne vois pas mon erreur ;-) merci d'avance

    le 25/07/2018 à 14h56

  • mram

    mram Administrateur

    Bonjour, le chevron > est inutile.

    le 01/08/2018 à 06h11

  • nkeshimanabrice-37

    nkeshimanabrice-37

    Vérifiez la syntaxe du sélecteur pour les paragraphes <p> dans un élément de la liste à puces.,Vous devriez avoir 2 éléments html avec la règle CSS "color: #ff0000". mais je ne comprends l'erreur..

    le 15/10/2018 à 14h52

  • meriam

    meriam Administrateur

    Le sélécteur n'est pas correcte, je ne vois pas des balises div dans le fichier index.html. Ce qui est demandé est de séléctionner les paragraphes p se trouvant dans un élément de la liste à puce.

    le 15/10/2018 à 16h19

  • samy.liani-14

    samy.liani-14

    ul li p { color:#ff0000; } Ou est l'erreur ? ( Vérifiez la syntaxe du sélecteur pour les paragraphes <p> dans un élément de la liste à puces.)

    le 06/09/2018 à 20h47

  • mram

    mram Administrateur

    Je pense le "ul" devant est inutile, mettre "li p" suffit à cibler les "p" qui sont dans des "li".

    le 10/09/2018 à 04h16

  • mehdi_chabani-51

    mehdi_chabani-51

    Voici mon message d'erreur : Il vous manque la règle css pour les paragraphes p des éléments la liste à puces

    le 09/01/2019 à 08h52

  • meriam

    meriam Administrateur

    Bonjour, tu dois attribuer la couleur #ff0000 aux paragraphes p se trouvant dans un élément de la liste à puces li, l'exercice demande tous les p, donc le sélecteur pseudo-classe first-child est inutile. Il suffit d' utiliser un sélecteur multiple.

    le 11/01/2019 à 10h26

  • maxime.leteno-31

    maxime.leteno-31

    ul li p { color : #ff0000; } ne fonctionne pas ?

    le 09/01/2019 à 14h29

  • meriam

    meriam Administrateur

    bonjour, il faut attribuer la couleur #ff0000 aux paragraphes p se trouvant dans un élément de la liste à puces 'li';

    le 11/01/2019 à 10h11

  • imgbayit

    imgbayit

    Bjr , je ne comprends pas mon erreur

    le 28/08/2017 à 17h08

  • mram

    mram Administrateur

    Bonjour, votre sélecteur est trop compliqué, il faut faire plus simple. On souhaite sélectionner chaque "p" enfant (pas forcément direct) d'un "li" .

    le 30/08/2017 à 14h13

  • saidali.anissa-71

    saidali.anissa-71

    je ne comprends pas mon erreur

    le 11/05/2018 à 04h20

  • mram

    mram Administrateur

    Bonjour, vous utilisez la balise "div" dans votre sélecteur CSS. Est-ce qu'il y en a dans le HTML ?

    le 14/05/2018 à 03h26

  • bmontebello

    bmontebello

    je e comprends pas mon erreur

    le 11/01/2018 à 10h34

  • mram

    mram Administrateur

    Bonjour, il y a moyen d'utiliser un sélecteur CSS plus simple.

    le 12/01/2018 à 02h21

  • tekh3d-63

    tekh3d-63

    quelle est mon erreur svp ?

    le 31/08/2018 à 12h07

  • mram

    mram Administrateur

    Bonjour, que vous dit le message d'erreur ? Ca aidera pour trouver où ça coince.

    le 05/09/2018 à 06h58

  • tekh3d-63

    tekh3d-63

    je passe, d'autant plus que comme d'habitude, y carrement personne au telephonne, on a l'impression d'être robinson crusoé, dans ces trucs, d'où les critiques conernant ce genre de cours qui bien sur se targuent d'être ludique et facile etc. mais c'est parfois et souvent de vrais prise de tête, ca fonctionne au ralenti, pour apprendre deux trucs tu galéres des heures, mais surtout y a carremment aucune assistance, et vu que les progs sont bloquer tu peux rien fairre, enfin un vrai coup de g.... hyper ennervant et je te parle même pas du js, qui est carrement incomprehensible, merci poour cette prise en main complétement génia!! aleauveuh y'ou!!!

    le 31/08/2018 à 12h26

  • mram

    mram Administrateur

    On a jamais dit que c'était facile, tout dépend du niveau de chacun.

    Passer du temps pour apprendre 2 trucs ça peut arriver, tout dépend du niveau. Certains sont plus rapides que d'autres, voilà tout.

    Qu'est ce qui est incompréhensible dans le JS ?

    le 05/09/2018 à 07h03

  • seb.gamess33-38

    seb.gamess33-38

    d'accord enfaite le nth-child(1) était pas utile dans le code merci pour l'aide

    le 16/04/2019 à 15h46

  • meriam

    meriam Administrateur

    Bon courage

    le 16/04/2019 à 16h10

  • beraza.maitane-77

    beraza.maitane-77

    voilà la solution : li p { color: #ff0000; }

    le 06/06/2019 à 16h59

index.html
stylesheet.css
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Rappel : Les sélecteurs multiples</title> </head> <body> <ul> <li><p>Moi !</p></li> <li><p>Moi aussi !</p></li> <p>Pas moi.</p> </ul> <p>Pas moi non plus.</p> </body> </html>