Aller au contenu

[Résolu]Petite curiosité en html/css

Ciborge

Par Ciborge
dans Programmation et Lignes de code

Messages recommandés

Ciborge Nouveau

Ciborge

Posté(e)
Posté(e)

Bien le bonjour à tous :byebye:

200.gif

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 :)

Lien vers le commentaire
Partager sur d’autres sites
Invité

Invité

Posté(e)
Posté(e)

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...

Lien vers le commentaire
Partager sur d’autres sites
monpci Débutant

monpci

Posté(e)
Posté(e)

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');
}

Lien vers le commentaire
Partager sur d’autres sites
maximeK Débutant

maximeK

Posté(e)
Posté(e)

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.

Lien vers le commentaire
Partager sur d’autres sites
  • 2 semaines après...
djstool Collaborateur

djstool

Posté(e)
Posté(e)
<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

Lien vers le commentaire
Partager sur d’autres sites
BreizFenrir Explorateur

BreizFenrir

Posté(e)
Posté(e)

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.

Lien vers le commentaire
Partager sur d’autres sites
Ciborge Nouveau

Ciborge

Posté(e)
  • Auteur
Posté(e)

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 :chinois:

giphy.gif

Lien vers le commentaire
Partager sur d’autres sites

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

Aller sur la liste des sujets
×
×
  • Créer...