28172 sujets

CSS et mise en forme, CSS3

Priorité sélecteurs & héritage

Bonjour à tous !!

Je vous sollicite pour m'éclairer sur un certain point :

Pourquoi ma "color" appliquée à mon list-item via #menu li est-il prioritaire par rapport à celle appliquée directement sur l'élément via #id_li ?

Et pourquoi si au lieux de passer directement par un ciblage par id de l'élément je cible son parent et j'envoie ma color via #parent a cela marche ?

Le code pour mieux comprendre :

HTML

<div id="menu" class="grid_8 alpha">
  <ul>
    <li> [#red]<a href="#"id="menu-selected">[/#]HOME</a></li>
    <li><a href="#">NEWS</a></li>
    <li><a href="#">COMMUNITY</a></li>
    <li><a href="#" id="btn-upload" >UPLOAD</a></li>
  </ul>
</div>


CSS

#menu { height: 24px; }

#menu ul { margin: 0; padding: 0; list-style: none; height: 24px;  }

#menu li { 
float: left; 
marin: 0; 
padding: 0; 
width: 92px; 
border-right: 1px solid #FFF; 
border-bottom: 1px solid #FFF; 
color: #fff; 
background: #1646C1; 
height: 24px; 
}

#menu a { 
display: block; 
height: 19px; 
color: #FFF; 
font: 1em "Trebuchet MS",Arial,sans-serif ; 
line-height: 1em; 
padding-top: 5px; 
text-align: center; 
text-decoration: none; 
}

#menu li:hover, 
#menu li:focus, 
#menu li:active, 
#menu a:hover, 
#menu a:focus, 
#menu a:active, 
#btn-upload:hover, 
#btn-upload:active, 
#btn-upload:focus, 
#btn-upload a:hover, 
#btn-upload a:active, 
#btn-upload a:focus { 
background: #EEE; 
color: #333; 
border-bottom: 1px solid #EEE; 
}

#menu-selected { 
background: #EEE; 
color: #333; 
border-bottom: 1px solid #EEE;
}


alors qu'avec ce code cela fonctionne :

HTML

<div id="menu" class="grid_8 alpha">
  <ul>
    [#red]<li id="menu-selected">[/#]<a href="#">HOME</a></li>
    <li><a href="#">NEWS</a></li>
    <li><a href="#">COMMUNITY</a></li>
    <li><a href="#" id="btn-upload" >UPLOAD</a></li>
  </ul>
</div>


CSS


#menu-selected a { 
background: #EEE; 
color: #333; 
border-bottom: 1px solid #EEE;
}




Merci par avance pour vous pencher la dessus ;]

Jérémy
Modifié par j'M (17 Dec 2008 - 23:29)
Ok,

Alors vive la doc, comme souvent, elle apporte toute les réponse.

Pour cette fois cela vient de openweb, je cite :

a écrit :

Voici quelques exemples de sélecteurs et de règles CSS classés par ordre croissant de spécificité :

1. * {...} : 0000 (aucun idenfifiant, aucune classe, aucun élément) ;
2. p {...} : 0001 (aucun idenfifiant, aucune classe, un élément) ;
3. blockquote p {...} : 0002 (aucun idenfifiant, aucune classe, deux éléments) ;
4. .class {...} : 0010 (aucun idenfifiant, une classe, aucun élément) ;
5. p.class {...} : 0011 (aucun idenfifiant, une classe, un élément) ;
6. blockquote p.class {...} : 0012 (aucun idenfifiant, une classe, deux éléments) ;
7. #id {...} : 0100 (un idenfifiant, aucune classe, aucun élément) ;
8. p#id {...} : 0101 (un idenfifiant, aucune classe, un élément) ;
9. blockquote p#id {...} : 0102 (un idenfifiant, aucune classe, deux éléments) ;
10. .class #id {...} : 0110 (un idenfifiant, une classe, aucun élément) ;
11. .class p#id {...} : 0111 (un idenfifiant, une classe, un élément) ;
12. blockquote.class p#id {...} : 0112 (un idenfifiant, une classe, deux éléments) ;
13. <p style="..."> : 1000 (attribut HTML style qui ne sera supplanté que par un style utilisateur normal) ;
14. <p style="... !important"> : 1000 (attribut HTML style marqué !important qui ne sera supplanté que par un style utilisateur lui-même marqué !important).

Si nous revenons à notre exemple des styles de liens, nous pouvons calculer le degré de priorité des deux sélecteurs qui restaient en concurrence :

* a a un degré de priorité de 0001 (un nom d'élément) ;
* #menu a a un degré de priorité de 0101 (un identifiant et un élément).


mon style via #menu a, a une priorité de 0101 alors que celui appliqué avec un identifiant uniquement est de 0100....

Je trouve ça super bizarre mais bon, c'est ainsi !!

Si cela peut éclairer certain et bien que ce post reste, sinon j'ai envie de dire : DELETE

;] merci qd même !
Modifié par j'M (17 Dec 2008 - 23:38)
j'M a écrit :

Pourquoi ma "color" appliquée à mon list-item via #menu li est-il prioritaire par rapport à celle appliquée directement sur l'élément via #id_li ?


Bonjour,

Parce que "c'est comme ça"...

Et il est vrai que c'est très désagréable...

A partir du moment où tu déclares un sélecteur sous couvert d'un id alors toute précision sur ce sélecteur devra tenir compte de l'id qui recouvre le tout.

La déclaration "in tag" via l'attribut style court-circuitant tout celà.

Donc en tenir compte, sans oublier de se demander si une autre déclaration de style ne permettrait pas d'éviter ce genre de conflit.
Sujet clos
Aller à