Discussion :

[pierre24]

Est ce que quelqu'un peut me dire ce que signifie les préfixes devant les ID ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

div#

Qu'est que signifie cette syntaxe

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#momID li {...}

???

Je connais pas du tout cette syntaxe !

[Er3van]

Quand tu crées une div, tu peux soit lui attribuer un id, soit une classe ( ou rien du tout ) :

<div id='content'> blalblabla </div>
<div class='content'> blalblabla </div>

Et dans ton css, les id sont gérées via les '#', et les classes avec '.'
Il me semble les id sont pour les div uniques ( menu, content, footer.... )

#content ou div#content {
tes proprietes qui s'appliqueront à ta première div
}

.content {
tes proprietes qui s'appliqueront à ta seconde div
}

Pour ce qui est des #content li, c'est de l'héritage, cela ne s'appliquera qu'au <li> contenues dans ta <div id='content'>.

Voilà voilà, j'espère t'avoir répondu sans avoir dit d'anneries

[Candygirl]

Est ce que quelqu'un peut me dire ce que signifie les préfixes devant les ID ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

div#

Ce sélecteur cible l'élément div qui a pour attribut l'id "truc"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#momID li {...}

Ce sélecteur cible tous les li descendants de l'élément qui a pour attribut "momID"

[pierre24]

ok merci de l'info.

Mais j'ai jamais utilisé. En gros quels sont les avantages ?

[Er3van]

Exemple simple :

Tu fais un menu avec des sous-menu en css, en utilisant une syntaxe de type

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div id="menu">
	<uL>
		<li><a href="accueil.php">Accueil</a></li>
		<li><a href="nous_contacter.php">Nous Contacter</a></li>
		<li><a href="liens">Liens</a></li>
	</ul>
</div>

Et par exemple, tu veux que les liens ne soient pas soulignés
Dans ton css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
a {
     text-decoration:none ;
}

Mais dans ce cas, tous tes liens de ton site seront non-soulignés. Si tu veux que tous les liens soient soulignés à l'exception de ceux de ton menu, plutôt que de devoir mettre des style inline ( style='text-decoration:none' ) dans ton menu, tu peux faire ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#menu li a {
     text-decoration:none ;
}
a {
     text-decoration:underline ;
}

PS : J'ai peut-être pas les bons mots clefs ( genre text-decoration et underline ), j'ai ecrit ça sans tester, c'est juste en exemple.

[Candygirl]

Pour ta première question, il n'y a, à priori, pas grand intérêt à spécifier le nom de l'élément puisqu'un id est unique sur une page.

Il pourrait être utile si, sur une page, on avait un élément qui comporte cet id et que sur une autre page c'est un autre élément qui comporte le même nom d'id.

On peut aussi le mettre simplement pour des raisons de répérage; se rappeler que cet id est attribué à un élément untel.

Cela peut être utile d'ajouter le nom de l'élément pour augmenter la spécificité du sélecteur.

Perso je ne le mentionne jamais sauf pour la raison 3

Pour ta deuxième, j'ai du mal à imaginer que tu codes en css sans utiliser la descendance dans tes sélecteurs Cela permet de cibler précisément certains éléments en n'ajoutant des noms de class et d'id que lorsque c'est vraiment nécessaire.

[pierre24]

ok merci a vous deux !

très clair Er3van !

C'est plus clair !

Par contre je savais qu'un ID était unique mais il m'arrive de les répéter !


Qu'en est t-il ? ^^

[Er3van]

De rien

Pour ce qui est des id, ils sont uniques, mais ça ne t'empeche pas d'avoir plusieurs id différents.

Par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div id='menu'> mon menu </div>
<div id='content'> blabla </div>

Ne pose aucun problème, dans ton css t'auras #menu et #content.

Par contre,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id='menu'> mon menu </div>
<div id='content'> blabla </div>
<div id='content'> taratata </div>

Est incorrecte, même si ça ne génère pas forcément d'erreur.

C'est plus pour une question de lisibilité du code par un tiers.

Les id sont pour les div à caractères uniques, et les class pour le reste. Si tu as un doute utilise des class, ça fonctionne pareil.
Généralement, dans un site tu auras des blocs à caractères uniques, comme le menu, contenu, footer. D'autres div secondaires, même s'ils sont uniques, seront généralement nommés avec des class.