Fonctionnement du sélecteur ID en CSS

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

khalidb
il y a pas mal de bug sur certain exercises perd de temps defois cest bon et sa valide pas bon
christopher-santos18-32
quel est la diference entre le id est le class ?
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

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 Administrateur
Bonjour, il ne faut pas de point "." dans le nom de class et id .

le 04/11/2017 à 00h02
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 Administrateur
Votre code est à priori bon. Quelle erreur avez-vous ?

le 12/06/2017 à 14h46
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 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
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
y a un petit bug sur l'exercice non ? la je vois pas où est l'erreur !!
le 12/02/2018 à 19h05
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
aidee
le 07/06/2017 à 00h18
vfaiola-21
hello, je ne vois pas mon erreur ;-) merci d'avance. Je vois bien 3 blocs {}
le 24/07/2018 à 20h00
mram Administrateur
Bonjour, le code lignes 7 à 9 et 13 à 15 sont inutiles.

le 01/08/2018 à 05h31
raphael.gouin-37
Vérifiez la syntaxe du sélecteur pour le premier paragraphe <p>.
le 11/06/2018 à 11h50
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
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 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
millelire.jo
Bonjour, je ne comprend pas ou est mon erreur...
le 07/05/2018 à 15h00
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
ok merci c'est bon !
le 14/06/2018 à 18h04
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 Administrateur
Bonjour, que vous dit le message d'erreur ?

le 28/05/2018 à 05h17
nkeshimanabrice-37
pouvez-vous valider l'exercice...
le 29/10/2018 à 14h20
nkeshimanabrice-37
ok merci
le 26/10/2018 à 14h03

Pour publier un commentaire, vous devez vous connecter.

index.html

stylesheet.css

<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Le sélecteur "id"</title> </head> <body> <h1>Je suis un titre unique</h1> <p>Je suis un paragraphe unique.</p> <p>Je suis un autre paragraphe unique.</p> </body> </html>

http://localhost:8000