[Résolu] #id ou div#id

Bonjour,

J'ai toujours codé mes feuilles de style de cette façon

#header {}

, mais je vois énormément de css écrit plutôt comme ceci

div#header{}

.
Quelle est la meilleure façon de faire ?
En quoi l'une ou l'autre des propositions peut-elle poser problème (compatibilité, pérénnité...) ?
Merci d'avance.
Modifié par mecho (15 Apr 2008 - 09:06)

Bonjour,

a écrit :
En quoi l'une ou l'autre des propositions peut-elle poser problème (compatibilité, pérénnité...) ?

Aucune différence plus une histoire de méthodologie.

Pour le premier : peut importe la balise ayant l'id "header".

#header {}

Pour le deuxième : la balise doit être un div ayant l'id "header".

div#header {}

Donc on peut dire que la première est peut être un peu plus souple quoique ...

Après à voir si d'une page à l'autre, l'élément concerné par ce sélecteur doit être différent ou non (l'exemple du "header" n'est pas pertinent dans ce cas).

Bonne continuation.
Romain

Bonnet blanc ou blanc bonnet?

mecho a écrit :
Quelle est la meilleure façon de faire ?

Aucune des deux.

mecho a écrit :
En quoi l'une ou l'autre des propositions peut-elle poser problème (compatibilité, pérénnité...) ?

En pas grand chose.
Un sélecteur de la forme élément#identifiant est plus spécifique, et donc le risque qu'il ne sélectionne plus rien si on modifie le code HTML est plus grand. Par exemple si je transforme un p en blockquote en gardant le même identifiant (attribut id). Mais bon, c'est pas méchant comme risque, et ça n'arrive généralement pas par magie.

Pour ma part, j'écris #identifiant quand je sais que l'identifiant peut être porté par des éléments différents (par exemple: #website-title peut viser soit un h1, soit un paragraphe, suivant que l'on est sur la page d'accueil ou une page interne d'un site). Si je sais que j'ai affaire à un élément donné et que ça ne bougera pas, j'écris le nom de l'élément: div#global, form#search, etc. Mais c'est juste une préférence personnelle.

Merci pour vos réponses.
Bonne journée

Lorsqu'on travaille à plusieurs sur un même projet, il peut être utile de commencer par un ciblage complet une série de styles en relation avec un identifiant. Les différents intervenants sont ainsi informés de la nature de l'élément traité.

li#infos {color:green}
#infos a {color:red}
#infos p {color:teal}
#infos …

Modifié par Benjamin D.C. (15 Apr 2008 - 09:28)

...ou appliqué à un objet spécifique qu'il est utile de ne pas perdre de vue pour plus tard :

#ma-page div { ... s'applique à tous les div enfants... }
#ma-page div#special { ... seulement à celui-là... }

Salut,

yodaswii a écrit :

Aucune différence plus une histoire de méthodologie.

Il y a une différence, c'est dans le calcul de la cascade. elt#id a plus de poids que #id

Ça peut jouer son importance sur certains cas particuliers.

elt#id comme dit plus haut permet de renseigner sur la nature de l'élément, très intéressant notamment sur des projets en équipe ou des projets que l'on reprend après plusieurs semaines/mois.

++

p.s. et comme dit plus haut, ça ne sélectionne pas la même chose, elt#id ne selectionne que la balise <elt> qui a l'id "id" tandis que #id sélectionne n'importe quel élément qui a l'id "id".

#id est équivalent à *#id (* sélecteur universel)
Modifié par Olivier (15 Apr 2008 - 15:25)

a écrit :
Il y a une différence, c'est dans le calcul de la cascade. elt#id a plus de poids que #id

En effet, j'avais omis cela ce qui n'est pas qu'un simple détail ...