CSS : Id et Class dans le même sélecteur

[Remi]

Bonjour,

J'ai un petit souci de syntaxe pour un objet de type

<div id="mon_id" class="la_classe">

Je mets la déclaration CSS sous la forme :

#mon_id.la_classe {....}

et cela fonctionne...

... sauf que je suis tombé sur des "phénomènes bizarres" avec IE6

et, ce qui m'inquiète un peu, c'est que je ne trouve nulle part la syntaxe pour un sélecteur de type id + classe...

Est-ce la bonne syntaxe ?

[Dudu]

Salut

Non, il faut respecter un espace dans la règle CSS entre "#mon_id" et ".ma_classe".

Il n'y a que les noms de balises HTML qui se collent sans espace aux class ou aux id

[captain_torche]

Mais avec l'espace, ça ne risque pas de cibler n'importe quel élément .ma_classe DANS l'élément #mon_id ?

[Dadou]

normalement à partir du moment ou un élément est défini en ID il est "stupide" de vouloir lui affecter une classe, en tant q'ID, il est unique, donc inutilité de lui affecter une classe.

[Remi]

_AT_Dudu : Comme le dit Capitaine Torche, si on met un espace, on adresse un objet contenu dans le premier... hélas.

_AT_Dadou : Je craignais un peu ce genre de réponse...

Bien entendu, je peux faire autrement mais cela simplifierait mes css.

Sinon, la syntaxe marche sous IE6 et 7, Moz, Opera, Safari.

IE6 a juste un comportement bizarre quand deux déclarations de ce type se suivent.

[Anonymus]

normalement à partir du moment ou un élément est défini en ID il est "stupide" de vouloir lui affecter une classe, en tant q'ID, il est unique, donc inutilité de lui affecter une classe.

Si tu définis une classe 'rouge' (.. qui écrit le texte en rouge, par exemple ; ) ) , et que tu veux attribuer cette classe à cet élément, il faut bien le déclarer quelque part. A moins de surcharger la feuille de style d'un élément supplémentaire, il ne me semble pas si étonnant de coller une classe à un élément pourvu d'un 'ID', non ?

[Dadou]

Ben non, il ne faut pas lui affecter une classe, mais plutôt faire

.rouge, #monid {

les paramètres commun à .rouge et #monid

}

enfin, une classe nommé rouge n'est pas un bon exemple non plus : si jamais tu décides de changer de couleur (vert par exemple), tu es plutôt embêté de devoir renommer tous les appels à la classe vert

[Remi]

Merci pour ce rafraîchissant petit cours sur les css...

...mais bon, mon problème n'est pas vraiment là :

plus prosaïquement,

il est de savoir s'il y a une syntaxe prévue pour adresser Id et Classe dans le même sélecteur.

S'il n'y a rien de prévu, je vais être obligé d'imbriquer un 2e DIV,

ce que je trouve toujours être une méthode un peu "bourrin"...

[Dudu]

Et à tout hasard, tu ne voudrais pas plus prosaïquement nous donner un exemple précis de ce que tu souhaites faire ?

(parce qu'honnêtement, je ne comprends rien à ton affaire)

[Dadou]

il est de savoir s'il y a une syntaxe prévue pour adresser Id et Classe dans le même sélecteur.

S'il n'y a rien de prévu, je vais être obligé d'imbriquer un 2e DIV,

Pourquoi, la syntaxe que je t'ai donné devrais amplement suffire pour ne pas avoir à faire cela. As tu un lien à nous montrer?

[nicoo]

Ce n'est forcément stupide de mettre un id et une class. Par exemple si on regarde le fonctionnement de blueprint css

<div id="content" class="column span-12">
...
</div>

L'ID va permettre la mise en forme des éléments html contenu dans un container précis. Les classes sont utilisées quant à elles pour positionner les différents blocs par rapport à la grille et sont utilisables sur tous les types de blocs html.

Sinon je ne comprends pas non plus la problématique, un exemple serait effectivement bienvenu

[Dadou]

Mais non, ce n'est pas parce que blueprint le fait que c'est bien.

Les infos de placement de la class "column span-12" sont tout bêtement à mettre dans l'id content, en plus l'usage de class multiples est à prohiber, tous les navigateurs ne le prennent pas en charge

Il n'y a absolument aucun intérêt à utiliser une classe sur un id

[captain_torche]

Si, ça peut être pertinent, dans certains cas précis, notamment en AJAX : il peut arriver qu'on attribue une classe spécifique à un conteneur (ajout puis suppression d'une classe "loading" lors de la mise à jour d'un élément, par exemple (et toute personne manipulant javascript sait qu'il est infiniment plus facile de manipuler des éléments dont on possède l'ID).

Mais dans tous ces cas, une attribution de style différenciée de la classe et de l'id suffit.

[nicoo]

Blueprint n'utilise aucun ID. Blueprint est un framework CSS qui amène simplement une grille. Regarde le source des demos pas un seul ID. Évidemment c'est brut de fonderie, c'est pour cela que l'on ajoute des ID pour habiller les éléments plus finement.

Concernant l'usage de class multiples as tu une liste qui recenserait les différents supports des navigateurs de cette technique ? J'ai trouvé cette page mais cela ne me semble pas très complet sur ce point précis. En tout cas il semblerait que tous navigateurs modernes interprètent correctement cette technique.

Cet article donne un autre avantage de mettre un id et une classe dans un même élément html.

[Remi]

Si, ça peut être pertinent, dans certains cas précis, notamment en AJAX : il peut arriver qu'on attribue une classe spécifique à un conteneur (ajout puis suppression d'une classe "loading" lors de la mise à jour d'un élément, par exemple (et toute personne manipulant javascript sait qu'il est infiniment plus facile de manipuler des éléments dont on possède l'ID).

Mais dans tous ces cas, une attribution de style différenciée de la classe et de l'id suffit.

Oui, sauf que l'on peut avoir un problème de préséance si, par exemple, les déclarations en amont font mention de l'ID du contenant. Mais tu n'es effectivement pas loin de mon cas... (Je ne peux donner d'exemple plus précis car il s'agit d'un site inclus dans un intranet.)

Concernant l'usage de class multiples as tu une liste qui recenserait les différents supports des navigateurs de cette technique ? J'ai trouvé cette page mais cela ne me semble pas très complet sur ce point précis. En tout cas il semblerait que tous navigateurs modernes interprètent correctement cette technique.

Merci bien d'avoir déniché ce lien.

Comme tu le dis, c'est hélas incomplet mais mon problème est exactement le cas 5.

Le cas 2, je l'ai déjà utilisé et il n'a effectivement jamais posé de problème, même sous NN4.

Pour résumer, d'après mes recherches et essais, la syntaxe

#mon_id.la_classe{...}

fonctionne sous toutes les dernières versions des navigateurs (y compris Mac),

ça passe le validateur,

mais comme j'ai eu ces petits bugs avec IE6, personnellement, je vais faire autrement par sécurité (en l'occurrence, en changeant toutes les déclarations en amont et en doublant une classe).