[CSS] class neemt waarde niet over

[kleautviool]

Ik loop tegen een vreemd probleempje aan bij het maken van mijn site.

Ik heb in mijn css-bestand alle list-items van mijn menu een border van 3px toegekend met een blauwe kleur. Nu wil ik dat bij een mouse-over én bij het toekennen van een class op een list-item de achtergrondkleur verrandert en de border een andere kleur krijgt.
Nu werkt dit allemaal prima bij de mouse-over, maar als ik de class aan een list-item toeken blijft de kleur van de border hetzelfde.

Mijn HTML ziet er zo uit:

HTML:

<ul id="nav" title="Paginanavigatie">
<li class="selected"><a href="http://portfolio.maurice-k.com/beginpagina" title="Beginpagina" accesskey="h">Beginpagina</a></li>
<li><a href="http://portfolio.maurice-k.com/informatie" title="Informatie" accesskey="i">Informatie</a></li>
<li><a href="http://portfolio.maurice-k.com/portfolio" title="Portfolio" accesskey="p">Portfolio</a></li>
<li><a href="http://portfolio.maurice-k.com/contact" title="Contact" accesskey="c">Contact</a></li>
<li><a href="http://portfolio.maurice-k.com/links" title="Links" accesskey="l">Links</a></li>
</ul>

En dit is mijn CSS

Cascading Stylesheet:

#nav{
 margin:0;
 padding:0;
}
#nav li{
 float:left;
 list-style-type:none;
 border-bottom:solid 5px #5fc2d5;
 height:45px;
 padding:11px 20px;
}
#nav li:first-child,.firstLink{
 padding:11px 20px 11px 11px;
}
#nav li:hover,.selected{
 cursor:pointer;
 background:#8fd4e2;
 border-bottom:solid 5px white;
}

Aangezien ik de waarde van de class pas defineer nádat ik de waarde van de list-items gedefineerd heb begrijp ik niet waarom het nu niet werkt.
Wat zie ik over het hoofd?

De url is trouwens ditte: http://portfolio.maurice-k.com/beginpagina

[frickY]

De CSS parser kent bepaalde prioriteiten toe, onder andere bepaald door het in welke mate specifiek zijn van je classe. Het gaat dus niet perse van boven naar onder. Over het algemeen geld dat hoe specifieker je een class toewijst, hoe hoger de prioriteit.
Het is waarschijnlijk ook opgelost door je laatste class zo te definieeren;

Cascading Stylesheet:

#nav li:hover, #nav li.selected{ 

Of zoek anders eens naar de !important-operator.

[ Voor 55% gewijzigd door frickY op 05-06-2006 21:30 ]

[JHS]

Zie over specificity ook zeker http://www.stuffandnonsen...css_specificity_wars.html .