Exercice 4/20

  • Dans le fichier stylesheet.css, attribuez à tous les paragraphes la couleur #00e5ee.
  • Dans le fichier stylesheet.css, attribuez à tous les paragraphes imbriqués dans un ‹div›‹/div› la couleur #cc0000. D'après vous, de quelle couleur apparaîtront-ils puisque vous leur avez déjà dit de prendre la couleur #00e5ee à l'étape 1 ? (Lisez l'astuce !)
  • Dans le fichier stylesheet.css, attribuez à tous les éléments HTML la bordure suivante : 1px dashed #3a5fcd
  • Cliquez sur soumettre ma réponse pour vérifier vos résultats;

Leçon 4/20

L'utilisation de sélecteurs peut paraître un peu complexe mais plus vous les utiliserez, plus vous vous sentirez à l'aise avec.

Dans cet exercice vous allez voir la notion de spécificité des sélecteurs CSS.

Sélectionner les balises ‹p› incluses dans les ‹div› est plus précis que sélectionner toutes les balises ‹p›. Ainsi, les paragraphes se trouvant en dehors des ‹div› seront bleu cyan et ceux à l'intérieur des ‹div› seront rouges. C'est la notion de spécificité des sélecteurs CSS.

Un sélecteur CSS plus précis qu'un autre sera donc prioritaire. C'est le cas dans cet exercice.

Commentaires les mieux notés

  • severine.74

    Bonjour, je ne comprends pas mon erreur car selon moi le résultat est correct. Pouvez vous m'aider s'il vous plait? D'avance merci.

  • ac.six-97

    Je ne comprends pas mon erreur, j'obtiens "Vous devez modifier la propriété css border de le sélecteur universel" mais ne peux modifier qu'un élément de sélecteur universel...

  • thierry.guellaut

    Bonsoir , besoin d aide svp ?

  • mram Administrateur

    Ligne 1 il ne faut pas utiliser * car on souhaite appliquer la règle CSS à tous les paragraphes, mais aucun autre élément HTML.

53 Commentaires

  • severine.74

    severine.74

    Bonjour, je ne comprends pas mon erreur car selon moi le résultat est correct. Pouvez vous m'aider s'il vous plait? D'avance merci.

    le 01/02/2018 à 09h04

  • mram

    mram Administrateur

    Bonjour, attention à l'ordre des sélecteurs CSS, c'est le but de l'exercice de voir ce que ça peut changer.

    le 05/02/2018 à 11h09

  • thierry.guellaut

    thierry.guellaut

    Bonsoir , besoin d aide svp ?

    le 29/11/2016 à 17h34

  • mram

    mram Administrateur

    Ligne 1 il ne faut pas utiliser * car on souhaite appliquer la règle CSS à tous les paragraphes, mais aucun autre élément HTML.

    le 30/11/2016 à 16h50

  • markitobcn

    markitobcn

    il est très bizarre ce code… si je ne mets pas une 3e balise il me dit que ce n'est pas bon. I don't understand

    le 24/10/2016 à 15h22

  • pizzutoandrea3

    pizzutoandrea3

    aideee

    le 06/06/2017 à 16h38

  • mram

    mram Administrateur

    Il faut utiliser le sélecteur universel pour appliquer la propriété "border: 1px dashed #3a5fcd;" . Et le code à partir de la ligne 9 est inutile .

    le 08/06/2017 à 11h13

  • pizzutoandrea3

    pizzutoandrea3

    help

    le 05/06/2017 à 00h30

  • mram

    mram Administrateur

    Votre CSS n'est pas bon, il faut mettre le code ligne 2 à la ligne 9

    le 25/10/2016 à 21h24

  • sanaatargui

    sanaatargui

    Bonjour, Je ne vois pas ou est mon erreur: *{ color: #00e5ee; } * div p{ color: #cc0000; } *{ border: 1px dashed #3A5FCD; }

    le 16/03/2017 à 23h26

  • p.llorca.pl

    p.llorca.pl

    bonjour mon code ne fonctionne pas je ne vois pas ce qui ne va pas * { border: 1px dashed #3a5fcd; } * p { color: #00e5ee; } div p { color: #cc0000; }

    le 13/06/2017 à 20h53

  • mram

    mram Administrateur

    Bonjour, j'ai testé votre dernier code en date du 15/06 et il fonctionne bien. Votre erreur au début a été de mettre le * devant "div p" , ce n'était pas nécessaire.

    le 21/06/2017 à 13h49

  • gespach

    gespach

    impossible de valider, j'ai un message "verifier la syntaxe du selecteur pour tous les paragraphes <p>" mon code est : * { color: #00e5ee; } div p { color: #cc0000; } * { border: 1px dashed #3a5fcd; }

    le 31/03/2016 à 19h51

  • gespach

    gespach

    ok c bon j'ai trouve et compris ou etait l'erreur de mon code

    le 31/03/2016 à 19h52

  • mram

    mram Administrateur

    Les sélecteurs lignes 4 et 7 ne sont pas correct.

    le 21/03/2017 à 17h29

  • mjoabsing-55

    mjoabsing-55

    Bonsoir, je n'arrive pas à comprendre d'où peut venir mon erreur, message vérifier la syntaxe du sélecteur p...

    le 04/08/2018 à 23h35

  • mram

    mram Administrateur

    Bonjour, il y a des espaces inutiles à la fin de la ligne 1.

    le 13/08/2018 à 03h17

  • klein.aurelien1

    klein.aurelien1

    Pourtant je ne vois vraiment pas d'ou pourrait provenir l'erreur...p { color:#00e5ee; } div p { color:#cc0000; } * { border:1px dashed #3a5fcd; }

    le 12/11/2017 à 18h08

  • mram

    mram Administrateur

    Bonjour, il doit y avoir des espaces inutiles après les accolades { (on attend un retour à la ligne)

    le 16/11/2017 à 16h54

  • vfaiola-21

    vfaiola-21

    hello, je ne vois pas mon erreur ;-) merci d'avance, car apparement cela fonctionne. vici le message d'erreur.Vérifiez la syntaxe de la règle CSS pour la couleur #00e5ee du texte.,Vous devriez avoir 3 éléments html avec la règle CSS "color: #00e5ee".

    le 23/07/2018 à 20h23

  • mram

    mram Administrateur

    Bonjour, il y a un souci ligne 1 dans le CSS, pourquoi mettre le caractère * ?

    le 01/08/2018 à 05h19

  • sebastien LRN

    sebastien LRN

    J'ai bien compris le fait qu'il fallait trois éléments dans le CSS, mais ca marche très bien avec deux!!!

    le 23/06/2017 à 11h04

  • lisa.dutour-63

    lisa.dutour-63

    Bonjour, j'ai une erreur que j'arrive pas à identifier. Voici mon code : * p { color: #00e5ee; } div p { color: #cc0000; } * { border: 1px dashed #3a5fcd; }. Pourrais-je avoir un indice ? Le message d'erreur porte sur la syntaxe du selecteur p

    le 06/08/2018 à 12h02

  • mram

    mram Administrateur

    Bonjour, pourquoi utiliser le sléecteur universel * avec le sélecteur "p" .

    le 13/08/2018 à 03h30

  • mehd.naf.56-14

    mehd.naf.56-14

    Bonjour je suis bloqué car j'ai une message indiquant un message d'erreur "verifier la syntaxe du selecteur pour tous les paragraphes <p>" mon code est : { color: #00e5ee; } div p { color: #cc0000; } * { border: 1px dashed #3a5fcd; }

    le 06/08/2018 à 15h14

  • mram

    mram Administrateur

    Bonjour,

    Il faut mettre les règles CSS sur une ligne à part pour chacune d'entre elles.

    le 13/08/2018 à 03h33

  • veyssiere.n

    veyssiere.n

    bonjour je vois ne vois pas mon erreur sur la syntaxe du "p" plz p { color: #00e5ee; } div p { color:#cc0000; } * { border: 1px dashed #3a5fcd; }

    le 31/10/2017 à 15h01

  • mram

    mram Administrateur

    Bonjour, il faut mettre les accolades { sur la même ligne que le sélecteur CSS.

    le 31/10/2017 à 23h46

  • mehd.naf.56-14

    mehd.naf.56-14

    Je pense que j'ai finalement trouvé mon erreur, il fallait après avoir ouvert l'accolade sauter une ligne pour mettre un selecteur CSS de chaque ensuite ressauter une ligne pour fermer l’accolade, excusez moi pour le dérangement, vraiment.

    le 07/08/2018 à 17h09

  • Bastien

    Bastien

    Bonjour. Je ne parviens pas à voir quel est le problème. Merci de m'éclairer :)

    le 11/12/2017 à 11h44

  • mram

    mram Administrateur

    Bonjour, il vous manquait un sélecteur CSS pour les paragraphes.

    le 14/12/2017 à 20h38

  • Yoda

    Yoda

    bonjour, je ne voie pas ou je bloque

    le 14/11/2017 à 16h20

  • mram

    mram Administrateur

    Bonjour, il vous manquait un sélecteur pour sélectionner tous les paragraphes.

    le 16/11/2017 à 18h32

  • maxime.orengo

    maxime.orengo

    Je ne vois pas quoi faire c'est bien indenté dans ma feuille css et je ne peux toucher au html

    le 13/09/2017 à 17h47

  • mram

    mram Administrateur

    Bonjour, ligne 2 ce n'est pas le bon code couleur : "fc" et "cf" inversés ...

    le 14/09/2017 à 13h50

  • franckferdinand-84

    franckferdinand-84

    Bien le bonjour/soir Mram, j'ai réussi l'éxercice cependant je voulais juste vous poser une question, a la ligne 7 pourquoi ne pas utiliser uniquement un "p" plutot que le selecteur universel ? Visuellement je vois la difference cependant un simple "p" ne serait-il pas plus, comment dire.."propre" ? Merci d 'avance pour vos lumière =)

    le 14/03/2018 à 01h34

  • mram

    mram Administrateur

    Bonjour, il n'y a pas de règle en fait. Tout dépend du rendu que l'on souhaite. Il n'y a pas de propre ou moins propre c'est une question de gout et de choix fait par les graphistes dans le cadre de vrais projets. Tout est possible (et discutable) en CSS. Ici on souhaite juste faire réviser le sélecteur universel, peu importe le rendu.

    le 16/03/2018 à 05h02

  • ehouarn.gargam-54

    ehouarn.gargam-54

    besoin d'aide

    le 26/07/2018 à 15h15

  • mram

    mram Administrateur

    La dernière version de votre code fonctionne bien, je l'ai testé.

    Quel message avez-vous ?

    le 02/08/2018 à 04h55

  • aserky-83

    aserky-83

    Bonjour! J'ai utilisé le sélecteur et j'ai une erreur de ce type : Vérifiez la syntaxe du sélecteur pour tous les paragraphes <p>. Voici mon code : * p { color: #00e5ee; } div p { color: #cc0000; } * { border: 1px dashed #3a5fcd; } Help!!!

    le 24/04/2018 à 17h00

  • aserky-83

    aserky-83

    Finalement ok pour moi car j'ai trouvé mon erreur.

    le 24/04/2018 à 17h07

  • kelly.tastets

    kelly.tastets

    comprend pas ou ça bloque...

    le 19/09/2017 à 19h02

  • mram

    mram Administrateur

    Bonjour, il faut un espace entre le sélecteur CSS et l'accolade {

    le 20/09/2017 à 15h51

  • laurie.mnms

    laurie.mnms

    bonjour, voici ce que j'ai écrit * { border: 1px dashed #3a5fcd; } p { color: #00e5ee; } div p { color: #cc0000; } mais cela ne fonctionne pas : problème de syntaxe, merci de votre aide

    le 20/02/2018 à 17h51

  • mram

    mram Administrateur

    Bonjour, chaque règle CSS doit être sur une ligne à part. Ce n'est pas le cas de la deuxième règle (celle pour le paragraphe "p").

    le 25/02/2018 à 00h34

  • p.llorca.pl

    p.llorca.pl

    bonjour je suis bloqué depuis hier je ne comprends pas ce qui ne va pas dans mon code

    le 14/06/2017 à 15h56

  • p.llorca.pl

    p.llorca.pl

    ???

    le 14/06/2017 à 16h35

  • p.llorca.pl

    p.llorca.pl

    toujours bloqué merci de répondre !!!

    le 15/06/2017 à 09h19

  • p.llorca.pl

    p.llorca.pl

    maintenant j'ai un onglet javascript au lieu de css ???

    le 15/06/2017 à 09h40

  • p.llorca.pl

    p.llorca.pl

    beaucoup trop de bugs !!!

    le 15/06/2017 à 09h58

  • mram

    mram Administrateur

    Bonjour, il est normal que vous ayez pu rencontrer un comportement anormal de la plateforme aux alentours du 14 et 15 Juin, une mise à jour a été faite à cette période. Toutes nos excuses pour ce désagrément.

    le 21/06/2017 à 14h08

  • ey705-2

    ey705-2

    Il vous manque la règle css pour le sélecteur universel. je ne comprend pas ceque cela veux dire quelqu'un peut m'aider pourceexo

    le 07/08/2019 à 22h29

  • meriam

    meriam Administrateur

    Bonjour, utilisez le sélecteur universel pour attribuer à tous les éléments une bordure (le sélecteur universel :* { }).

    le 08/08/2019 à 14h24

  • mike.jeanphilippe-39

    mike.jeanphilippe-39

    bonjour je ne vois pas mon erreur

    le 13/04/2018 à 13h51

  • mram

    mram Administrateur

    Bonjour, c'est "dashed" et non "Dashed" .

    le 15/04/2018 à 02h22

  • laurent8396

    laurent8396

    probleme identique verifier selecteur p * { color:#00e5ee; } div p { color:#cc0000; } * { border:1px dashed #3a5fcd; } HELP PLEASE

    le 24/10/2017 à 12h21

  • mram

    mram Administrateur

    Bonjour, le premier sélecteur n'est pas correct. On souhaite appliquer la couleur à tous les paragraphes et non à toutes les balises.

    le 25/10/2017 à 15h18

  • gaspardcube-100

    gaspardcube-100

    " Vous devriez avoir 3 éléments html avec la règle CSS "color: #00e5ee".,Vous devriez avoir 3 éléments html avec la règle CSS "color: #cc0000". " ALORS QUE TOUT EST BON ? A L'AIDE

    le 02/08/2018 à 14h54

  • mram

    mram Administrateur

    J'ai testé votre code et j'ai pu valider l'exercice.

    Vous avez toujours ce problème ?

    le 05/08/2018 à 00h29

  • ouakninkevin

    ouakninkevin

    je vois pas ou je bloque

    le 11/10/2017 à 16h12

  • mram

    mram Administrateur

    Bonjour, le deuxième sélecteur CSS n'est pas bon.

    le 12/10/2017 à 16h31

  • maxime.orengo

    maxime.orengo

    J'ai une erreur de synthax sur le selecteur * pourtant je ne vois aucun probleme : * { border: 1px dashed #3a5cfd; } p { color: #00e5ee; } div p { color: #cc0000; }

    le 12/09/2017 à 13h07

  • mram

    mram Administrateur

    Bonjour, oui il était juste mal indenté en fait.

    le 12/09/2017 à 17h38

  • alexismoquet

    alexismoquet

    Je ne comprends pas mon erreur.

    le 21/09/2017 à 14h35

  • mram

    mram Administrateur

    Bonjour, c'est à cause de l'espace devant le dernier sélecteur.

    le 22/09/2017 à 18h18

  • beraza.maitane-77

    beraza.maitane-77

    Voilà le bon : p { color: #00e5ee; } div p { color: #cc0000; } * { border:1px dashed #3a5fcd; }

    le 05/06/2019 à 15h16

index.html
stylesheet.css
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Faites bouger vos sélecteurs !</title> </head> <body> <p>Je vais revêtir une magnifique teinte de bleu.</p> <p>Moi aussi !</p> <p>Pareil, je n'ai pas de caractère alors je copie.</p> <div> <p>Et nous, on va mettre un super rouge !</p> <p>Je préfère plutôt bordeaux...</p> <p>Non, plutôt cramoisi !</p> </div> </body> </html>