Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
782 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [css] class, id et heritage

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[css] class, id et heritage

n°799708
fxoxo
Posté le 19-07-2004 à 16:23:59  profilanswer
 

Bonjour,
 
Il y à t'il une priorité d'héritage entre les id et les classes ???
 
Je m'explique ...  
Dans la plupart des sites (par ex: http://www.alsacreations.com/articles/id_class/ ) on nous dit:
 
 

Citation :

On peut utiliser indifféremment id et class, mais...
    * un id s'applique à un objet unique : il ne peut pas y avoir deux mêmes id dans une page
    * une classe peut désigner plusieurs objets identiques.


 
 
et aucunes allusions à l'héritage ou aux prioritèes...
 
Pourtant j'ai l'impression que les balises id sont prioritaires sur les balises class :
 
exemple :
 
#menu {
border-bottom : 1px solid #000;
font-size : 11px;
}
 
#menu a {
margin : 0 10px;
padding : 0 3px;
text-decoration : none;
color : #fff;
}
 
#menu a:hover {
margin : 0 9px;
border-right : 1px solid #4B5F91;
border-left : 1px solid #4B5F91;
}
 
.menu_cat {float:right; width:150px; border:1px solid red;}
 
.menu_cat a {margin:0; padding:0;}
 
 
<div id="menu" class="menu1">
   ...        
   
   <div class="menu_cat">
 <a href=""  title="">toto</a>
 <a href=""  title="">titi</a>
 <a href=""  title="">loulou</a>
   </div>
 
   ...
</div>
 
Dans ce cas, la classe "menu_cat" n'est pas apliquée (margin et padding ne sont pas à 0), les propriètèes de l'id semble passer en premier  :??:   .
 
par contre si je met  
#menu_cat {float:right; width:150px; border:1px solid red;}
#menu_cat a {margin:0; padding:0;}
 
et  
 
<div id="menu" class="menu1">
   ...        
   
   <div id="menu_cat">
 <a href=""  title="">toto</a>
 <a href=""  title="">titi</a>
 <a href=""  title="">loulou</a>
   </div>
 
   ...
</div>
 
ca marche mais pas pour le hover (qui utilise la définition de id="menu" )
 
 
Quelqu'un sait il comment ca marche (rêgle d'heritage et de priorités entre id et class) ???
 
Merci !


Message édité par fxoxo le 19-07-2004 à 16:25:00
mood
Publicité
Posté le 19-07-2004 à 16:23:59  profilanswer
 

n°800121
gm_superst​ar
Appelez-moi Super
Posté le 19-07-2004 à 23:52:40  profilanswer
 

Lorsque plusieurs styles sont applicables il faut calculer leur spécificité pour s'avoir lequel appliquer : http://www.w3.org/TR/CSS21/cascade.html#specificity (je mets la version anglaise parce que la française est fausse)
 
Donc si on compare :
 
#menu a -> spécificité 0,1,0,1 -> je concatène ce qui donne 101
.menu_cat a -> spécificité 0,0,1,1 -> je concatène ce qui donne 11
 
101 est plus grand que 11 donc c'est le premier qui s'applique.
 
D'une manière générale, id est prioritaire sur le sélecteur d'attribut ELEMENT[attribut="plop"] dont la notation "." n'est qu'un cas particulier (ELEMENT[class~="plop"] identique à ELEMENT.plop voir http://www.yoyodesign.org/doc/w3c/ [...] or.html#q1 )
 

Citation :

* count the number of ID attributes in the selector (= b)
* count the number of other attributes and pseudo-classes in the selector (= c)


 
Et vu qu'on écrit "a,b,c,d"  b passe avant c, donc id est prioritaire sur class.


Message édité par gm_superstar le 19-07-2004 à 23:54:32

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°800127
gilou
Modérateur
Modzilla
Posté le 19-07-2004 à 23:59:05  profilanswer
 

Les attributs de type ID doivent avoir une valeur unique par balise qu'ils marquent. Ils sont en fait present pour identifier de maniere unique une balise precise (en particulier dans le cas de liens hypertexte marchant avec le mecanisme ID/IDREF, mais aussi pour avoir un identificateur unique pour du stockage dans une BD,...)
C'est une survivance du SGML, plus tres utile pour les liens hypertexte (XPath serait mieux adapté), encore utile dans d'autres contextes.
A+,


---------------
There's more than what can be linked! --    Iyashikei Anime Forever!    --  AngularJS c'est un framework d'engulé!  --
n°800260
fxoxo
Posté le 20-07-2004 à 09:56:29  profilanswer
 

Merci à vous 2 !!!  :jap:  
 
C'est assez compliqué tous ca en fait ..., bon je regarde plus calmement la spe W3C et j'essaie d'assimiler tous ça.
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [css] class, id et heritage

 

Sujets relatifs
[Java] Question bête sur le double héritageRécupérer via Javascript une propriété d'une class CSS non utilisé
[JAVA] Inner class et accès aux membres protected --> compiler bug ?Conception héritage???
Propriétés 'class' et 'div'Probleme de class avec GD
[prog objet] utilitaires [inutiles] de schémas d'héritage[Postgres] schématiser l'héritage de table
question heritage et appel de fonctions membresComen séparer l'interface graphik et les méthod en diférentes class
Plus de sujets relatifs à : [css] class, id et heritage


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR