[css] class, id et heritage

class, id et heritage [css] - HTML/CSS - Programmation

Marsh Posté le 19-07-2004 à 16:23:59    

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
Reply

Marsh Posté le 19-07-2004 à 16:23:59   

Reply

Marsh Posté le 19-07-2004 à 23:52:40    

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
Reply

Marsh Posté le 19-07-2004 à 23:59:05    

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é!  --
Reply

Marsh Posté le 20-07-2004 à 09:56:29    

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.
 

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed