Ciborge Posted August 29, 2013 Share Posted August 29, 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 :) Link to comment Share on other sites More sharing options...
seboss666 Posted August 29, 2013 Share Posted August 29, 2013 L'id fixerait les propriétés peut-être, ça donne quoi si tu changes l'id en classe ? Link to comment Share on other sites More sharing options...
Guest Posted August 29, 2013 Share Posted August 29, 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... Link to comment Share on other sites More sharing options...
seboss666 Posted August 29, 2013 Share Posted August 29, 2013 Ah ben oui... Link to comment Share on other sites More sharing options...
Ciborge Posted August 30, 2013 Author Share Posted August 30, 2013 Si je comprend bien ta réponse on ne devrais pas affecter un ID et une class sur une seul balise ? Link to comment Share on other sites More sharing options...
seboss666 Posted August 30, 2013 Share Posted August 30, 2013 Tout à fait, Thierry ! Link to comment Share on other sites More sharing options...
Eagle1 Posted August 30, 2013 Share Posted August 30, 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 ? Link to comment Share on other sites More sharing options...
monpci Posted August 30, 2013 Share Posted August 30, 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');} Link to comment Share on other sites More sharing options...
maximeK Posted September 5, 2013 Share Posted September 5, 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. Link to comment Share on other sites More sharing options...
Eagle1 Posted September 9, 2013 Share Posted September 9, 2013 ahh je suis pas si fou :) Link to comment Share on other sites More sharing options...
djstool Posted September 22, 2013 Share Posted September 22, 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 Link to comment Share on other sites More sharing options...
BreizFenrir Posted September 23, 2013 Share Posted September 23, 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. Link to comment Share on other sites More sharing options...
djstool Posted September 23, 2013 Share Posted September 23, 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 =) Link to comment Share on other sites More sharing options...
BreizFenrir Posted September 24, 2013 Share Posted September 24, 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. Link to comment Share on other sites More sharing options...
Ciborge Posted September 24, 2013 Author Share Posted September 24, 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 Link to comment Share on other sites More sharing options...
Nemasix Posted September 24, 2013 Share Posted September 24, 2013 Link to comment Share on other sites More sharing options...
Edtech Posted September 24, 2013 Share Posted September 24, 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.