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

46 Commentaires

peche.melodie-45

Lorsque je veux "soumettre" il y a marqué cela:Votre balise DOCTYPE est incorrecte. Avez-vous écrit ceci : <!DOCTYPE html> ?

le 26/11/2021 à 12h05
meriam Admin

Bonjour, c'est un bug qui va être résolu . Merci pour votre compréhension.

le 28/11/2021 à 23h02
Aurélie Gendre

C'est bon j'ai trouvé mon erreur. J'avais rajouté un t à par. Il faut vraiment faire attention aux détails.

le 25/03/2021 à 20h11
meriam Admin

N'hésitez pas à poser des questions si vous trouvez des problèmes dans les exercices qui suivent. Bon travail.

le 26/03/2021 à 11h50
Aurélie Gendre

voici mon code html : <h1 id="title">Je suis un titre unique</h1> <p id="part1">Je suis un paragraphe unique.</p> <p id="part2">Je suis un autre paragraphe unique.</p>

le 25/03/2021 à 19h57
Aurélie Gendre

voici mon code css : #title{ color:red; } #part1{ color:green; } #part2{ color:blue; }

le 25/03/2021 à 19h56
meriam Admin

Bonjour, pour l'id par1 5 (vous devez supprimez la lettre t , de même pour le 2 ème id)

le 26/03/2021 à 11h51
Aurélie Gendre

Bonsoir je ne comprends pas où se situe mon erreur. Voici le message d'erreur reçu :"Votre première balise p a doit contenir la bonne valeur pour l'attribut id (par1)"

le 25/03/2021 à 19h53
meriam Admin

par1 et non pas part1 ;

le 26/03/2021 à 11h52
loutchay-74

Bonjour, je ne saisie pas le sens de la question dès que je soumets: Votre balise h1 a doit contenir du texte.

le 09/08/2020 à 15h57
meriam Admin

Bonjour, votre code html n'est pas correct. Ce code peut vous ider : <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>

le 10/08/2020 à 07h12
nkeshimanabrice-37

pouvez-vous valider l'exercice...

le 29/10/2018 à 12h20
nkeshimanabrice-37

ok merci

le 26/10/2018 à 10h03
vfaiola-21

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

le 24/07/2018 à 16h00
mram Admin

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

le 01/08/2018 à 01h31
raphael.gouin-37

ok merci c'est bon !

le 14/06/2018 à 14h04
raphael.gouin-37

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

le 11/06/2018 à 07h50
mram Admin

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 à 00h37
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 à 15h44
mram Admin

Bonjour, que vous dit le message d'erreur ?

le 28/05/2018 à 01h17
millelire.jo

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

le 07/05/2018 à 11h00
mram Admin

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

le 13/05/2018 à 22h03
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 à 00h36
mram Admin

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 à 03h05
andrewedina-29

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

le 12/02/2018 à 17h05
mram Admin

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 à 20h31

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>

Activer JavaScriptJavaScriptJS

http://localhost:8080