Ciborge Posté(e) le 29 août 2013 Posté(e) le 29 août 2013 Bien le bonjour à tous Alors voila mon code tout simple et rien de bien sorcier. <body> <div class="change rouge"> </div> <div class="change" id="vert"> </div></body> .change {height:100px;width:100px;}.rouge {background:url('red.gif');}#vert {background:url('vert.gif');}.change:hover { background:url('blue.gif');} Voila ma question est toute conne: pourquoi le changement de background fonctionne sur l'un et pas sur l'autre alors que la seul chose qui change est que l'un dispose d'un id et l'autre une class ? J’espère avoir été assez explicite merci :)
seboss666 Posté(e) le 29 août 2013 Posté(e) le 29 août 2013 L'id fixerait les propriétés peut-être, ça donne quoi si tu changes l'id en classe ?
Invité Posté(e) le 29 août 2013 Posté(e) le 29 août 2013 Tu demande quelque chose de contradictoire dans ton code. Comme tu le sais l'id est pour un élément unique. Ce que tu fais le fait rentrer en conflit vu que tu essaie de transformer un id en class EDIT : histoire de te donner la solution : #vert:hover etc...
Ciborge Posté(e) le 30 août 2013 Auteur Posté(e) le 30 août 2013 Si je comprend bien ta réponse on ne devrais pas affecter un ID et une class sur une seul balise ?
Eagle1 Posté(e) le 30 août 2013 Posté(e) le 30 août 2013 il ne me semblait pas que mettre id et class soit un problème. l'id a la précédence sur la class. y aurait-il quelque chose du w3c déconseillant cela ?
monpci Posté(e) le 30 août 2013 Posté(e) le 30 août 2013 Je me permet de reformuler Lorsque tu affectes deux valeurs à un bloc via "id" et "class" l'affectaction de id et prioritaire Priorité entre deux classes de même nom ->C'est la dernière définition qui sera prise en compte. Priorité entre les classes et les id -> Eh voilà, c'est l'id qui emporte. (source rapide : http://oseox.fr/css/priorite-styles.html) il n'est pas interdit de cumuler id et class dans une même balise par contre dans ton cas quand tu n'est pas au dessus de l'objet 1 seul regle s'applique -> # vert doit être vert quand tu n'est pas au dessus de l'objet 2 regles s'applique -> # vert doit être vert et .change:hover doit être bleu en appliquant le systeme de priorité la machine conclue que ton objet doit être vert si tu n'es pas convaincu ajoute une css sur les bordures (par exemple) dans ton .change:hover { background-color:blue; background:url('blue.gif'); border-style:solid; border-width:5px; border-color:yellow; } dans ton cas pour avoir le comportement que tu souhaites il est necessaire de remplacer .change:hover { background:url('blue.gif');} par .change:hover ,#vert:hover { background:url('blue.gif');}
maximeK Posté(e) le 5 septembre 2013 Posté(e) le 5 septembre 2013 Comme la dit monpci, Les règles de surcharge en CSS sont l'ID prioritaire sur la classe avec des valeur d'incrémentation : ID > .class.class.class .class.class > .class Plus ta définition du bloc CSS est précise plus sa "valeur" est "forte" mais la pseudo class :hover n'a pas de "valeur". Pense a toujours privilégier pour l'ID les proriétés qui ne change pas, pour éviter se genre de confustion.
djstool Posté(e) le 22 septembre 2013 Posté(e) le 22 septembre 2013 <div class="change rouge"> gné??? un espace dans un class??? qui en plus n'est pas utilisé dans ton css? pourquoi pas tout simplement mettre .rouge groupé dans ton .change? de meme je rejoind les com plus haut : id et class ensemble font pas bon ménage surtout que pour un code aussi simple ça ne sert à rien, tu applique direct ton background dans ta div, ou autrement tu imbrique deux div les unes dans les autres avec deux id OU deux class différent (class si tu compte appelé plusieurs fois des div par la suite pareil) permettant de différencié deux background
BreizFenrir Posté(e) le 23 septembre 2013 Posté(e) le 23 septembre 2013 <div class="change rouge"> gné??? un espace dans un class??? qui en plus n'est pas utilisé dans ton css? L'espace c'est le séparateur quand tu affectes plusieurs classes à un noeud. Donc dans le bout de code que tu cites, il affecte juste les deux classes change et rouge au div.
djstool Posté(e) le 23 septembre 2013 Posté(e) le 23 septembre 2013 à mon sens sur un code comme celui-ci il concatène trop, au point justement que ça ne fonctionne plus... sur un code comme celui-ci ça ne sert à rien il suffit de mettre des div imbriqué et de changer le background directement dans le css sur les class ou id différents =)
BreizFenrir Posté(e) le 24 septembre 2013 Posté(e) le 24 septembre 2013 Après on est d'accord que le code du premier message est loin d'être idéal, et ce aussi pour des raisons autres que techniques. Déjà, c'est sûr que si on part du principe que la classe "rouge" et l'id "vert" visent un but similaire (simple comme dans l'exemple ou éventuellement plus complexe, mais qui consiste globalement à modifier les mêmes propriétés) on peut considérer vouloir les rendre interchangeables, et pour cela il faudrait qu'ils soient de même nature, i.e. deux classes ou deux ids. Aussi, les noms de classes et d'ids devraient désigner des rôles et non des propriétés affectées aux noeuds. Car dans l'idéal si demain le design doit être mis à jour (hors redesign massif) on devrait pouvoir juste modifier le contenu des règles CSS et basta! Parce qu'après, si les div.rouge se retrouvent avec un fond rose et que les div#vert se retrouvent avec un fond jaune... Reste qu'après compte-tenu de la simplicité de l'exemple, dis-moi Ciborge si je me trompe, il ne s'agit sans doute pas de code voué à devenir du code de production, mais uniquement là pour étude/test/autoformation. Donc je ne suis pas sûr qu'il soit utile de trop l'analyser dans le détail.
Ciborge Posté(e) le 24 septembre 2013 Auteur Posté(e) le 24 septembre 2013 Il ne s'agit la qu'une recherche d'information mais j'ai eu la réponse que je voulais x) et non le code que j'ai fais la dessus était juste un exemple pour comprendre le principe de priorité et n'est en aucun cas destiné à autre chose c'est juste un bout de code simplifié que j'ai tiré d'un exercice d'étude vu que personne dans mon entourage n'a pu répondre à mes interrogation^^ Bref merci à tous pour vos réponses et votre aide
Edtech Posté(e) le 24 septembre 2013 Posté(e) le 24 septembre 2013 Juste pour compléter, il ne faut utiliser des ID que si on a besoin d'y faire référence plus tard (javascript, PHP pour des éléments de formulaire, etc.) car l'ID est unique contrairement à une classe.
Messages recommandés
Archivé
Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.