Exercice 10/20

  • Dans le fichier index.html, ajoutez l'attribut id aux trois éléments HTML;
  • Pour chacun des trois attributs, donnez respectivement les valeurs "title","par1","par2"
  • Dans le fichier stylesheet.css, ajoutez les trois sélecteur id correspondant aux éléments HTML;
  • Attribuez au sélecteur #title la propriété color et sa valeur red;
  • Attribuez au sélecteur #par1 la propriété color et sa valeur green;
  • Attribuez au sélecteur #par2 la propriété color et sa valeur blue;
  • Cliquez sur soumettre ma réponse pour vérifier vos résultats;

Leçon 10/20

Le sélecteur **id** est utile quand vous souhaitez appliquer un style à un seul et unique élément HTML.

Si le sélecteur class a vocation à être réutilisé plusieurs fois, chaque sélecteur id ne sera utilisé qu'une seule fois sur un site web.

La syntaxe dans le fichier HTML est la suivante :

‹h1 id="NomIdUnique"›‹/h1›   

Dans le fichier .css, le sélecteur id s'écrit comme ceci :

#NomIdUnique {
    color: red;
}

N'oubliez pas le dièse "#" devant le nom de votre id.

Commentaires les mieux notés

  • christopher-santos18-32

    quel est la diference entre le id est le class ?

  • franckferdinand-84

    (Re-)bonjour Mram, pas trop de soucis pour l'éxercice cependant il y a une chose qui n'est pas clair, il est bien spécifié "Si le sélecteur class a vocation à être réutilisé plusieurs fois, chaque sélecteur id ne sera utilisé qu'une seule fois sur un site web." Or nous l'utilisons deux fois ici pourtant (sur les 2 "p" j'entend...et même sur un h ! D'ou ma question suivante..). En quoi cela serait faux de remplacer ces deux "id" par deux "class" ? ou bien faire un id, un class..et re un id par éxemple ? La difference entre les deux n'est pas évidente a cerner je dois avouer. Merci d'avance pour vos réponse :)

  • mram Administrateur

    Même remarque, le code est correct mais pas écrit comme souhaité. Regardez l'exemple de code dans la description de l'exercice.

  • mram Administrateur

    Votre code est à priori bon. Quelle erreur avez-vous ?

20 Commentaires

  • franckferdinand-84

    franckferdinand-84

    (Re-)bonjour Mram, pas trop de soucis pour l'éxercice cependant il y a une chose qui n'est pas clair, il est bien spécifié "Si le sélecteur class a vocation à être réutilisé plusieurs fois, chaque sélecteur id ne sera utilisé qu'une seule fois sur un site web." Or nous l'utilisons deux fois ici pourtant (sur les 2 "p" j'entend...et même sur un h ! D'ou ma question suivante..). En quoi cela serait faux de remplacer ces deux "id" par deux "class" ? ou bien faire un id, un class..et re un id par éxemple ? La difference entre les deux n'est pas évidente a cerner je dois avouer. Merci d'avance pour vos réponse :)

    le 14/03/2018 à 02h36

  • mram

    mram Administrateur

    Bonjour, non on utilise pour chaque "p" un id différent et donc unique. Chaque id doit être appliqué à une seule balise HTML, c'est le cas ici. On pourrait très bien remplacer chaque id par une class. Mais une class à pour vocation à être réutiliser par plusieurs balises HTML, si elle n'est utilisée qu'une seule fois, autant mettre un id alors.

    le 16/03/2018 à 05h05

  • mram

    mram Administrateur

    Même remarque, le code est correct mais pas écrit comme souhaité. Regardez l'exemple de code dans la description de l'exercice.

    le 02/01/2017 à 14h49

  • mram

    mram Administrateur

    Votre code est à priori bon. Quelle erreur avez-vous ?

    le 12/06/2017 à 14h46

  • steve.besson

    steve.besson

    Et pour pourquoi on n'attribut pas "style="color:blue"" directement dans le HTML puisque ca en sert qu'une fois ?

    le 11/11/2017 à 15h04

  • mram

    mram Administrateur

    Bonjour, oui c'est possible mais il est préférable de séparer la structure HTML de la mise en page CSS. Donc il est recommandé de mettre toutes les règles de style dans un fichier .css à part.

    le 12/11/2017 à 00h14

  • celia-huart

    celia-huart

    Comme l'exercice précèdent, je ne comprend pas mon erreur de syntaxe, et cela en rajoutant des ";" ou des espaces etc. <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Le sélecteur "id"</title> </head> <body> <h1 id="title">Je suis un titre unique</h1> <p id="par1">Je suis un paragraphe unique.</p> <p id="par2">Je suis un autre paragraphe unique.</p> </body> </html> #title {color: red;} #par1 {color: green;} #par2 {color: blue;}

    le 01/01/2017 à 11h30

  • andrewedina-29

    andrewedina-29

    y a un petit bug sur l'exercice non ? la je vois pas où est l'erreur !!

    le 12/02/2018 à 19h05

  • mram

    mram Administrateur

    Bonjour, votre code est fonctionnel, mais on demande d'utiliser les sélecteurs "par1" et "par2" et non "part1" et "part2" .

    le 12/02/2018 à 22h31

  • pizzutoandrea3

    pizzutoandrea3

    aidee

    le 07/06/2017 à 00h18

  • vfaiola-21

    vfaiola-21

    hello, je ne vois pas mon erreur ;-) merci d'avance. Je vois bien 3 blocs {}

    le 24/07/2018 à 20h00

  • mram

    mram Administrateur

    Bonjour, le code lignes 7 à 9 et 13 à 15 sont inutiles.

    le 01/08/2018 à 05h31

  • raphael.gouin-37

    raphael.gouin-37

    Vérifiez la syntaxe du sélecteur pour le premier paragraphe <p>.

    le 11/06/2018 à 11h50

  • mram

    mram Administrateur

    Attention aux espaces inutiles en fin de ligne. Et aussi, les deux premières accolades } doivent être positionnées comme la dernière.

    le 13/06/2018 à 04h37

  • khalidb

    khalidb

    il y a pas mal de bug sur certain exercises perd de temps defois cest bon et sa valide pas bon

    le 01/11/2017 à 22h38

  • mram

    mram Administrateur

    Bonjour, il ne faut pas de point "." dans le nom de class et id .

    le 04/11/2017 à 00h02

  • millelire.jo

    millelire.jo

    Bonjour, je ne comprend pas ou est mon erreur...

    le 07/05/2018 à 15h00

  • mram

    mram Administrateur

    Bonjour, le nom de l'id pour les paragraphe n'était pas le bon. Attention à la syntaxe.

    le 14/05/2018 à 02h03

  • raphael.gouin-37

    raphael.gouin-37

    ok merci c'est bon !

    le 14/06/2018 à 18h04

  • raphael.gouin-37

    raphael.gouin-37

    Bonjour, je souhaiterais savoir si j'ai fait une erreur ligne 9 ou si un bug fait que je ne peux valider l'exercice. Merci !

    le 25/05/2018 à 19h44

  • mram

    mram Administrateur

    Bonjour, que vous dit le message d'erreur ?

    le 28/05/2018 à 05h17

  • nkeshimanabrice-37

    nkeshimanabrice-37

    pouvez-vous valider l'exercice...

    le 29/10/2018 à 14h20

  • nkeshimanabrice-37

    nkeshimanabrice-37

    ok merci

    le 26/10/2018 à 14h03