PDA

View Full Version : .last List Help


Corrosive
10-24-2010, 08:52 AM
Must be having a mental block but I have a styled set of list tags to make a menu. The last menu item has an auto generated class of .last. I have the following CSS;

#nav li {
float: left;
list-style-type: none;
margin: 0;
font-size: 16px;
font-weight: bold;
padding: 10px 14px;
border-right: 1px solid #fff;
}
.last {border-right: 0px;}


But the right border still appears! What am I missing?

I can cure it in decent browsers using;

#nav li:last-child {border-right:0px;}

but then that leaves good 'ol IE. :(

gentleone
10-24-2010, 08:59 AM
What about?
border-right: none;

Corrosive
10-24-2010, 09:00 AM
Nope, tried that already. This is mashing my swede.

gentleone
10-24-2010, 09:25 AM
I see... and this:
border-right-color: transparent

Corrosive
10-24-2010, 09:30 AM
Yep, and that too. It must be how my styles are cascading. When I use view style info in FF dev tools it is telling me that .last is above #nav li although it appears below it in my stylesheet. It is something obvious I'm sure.

gentleone
10-24-2010, 09:38 AM
And if you write the full hierarchy:
#nav li.last {style here}

Corrosive
10-24-2010, 09:38 AM
It's cool, I got it. Solution is;

#nav .last {border: none;}

It MUST be Sunday :)

Corrosive
10-24-2010, 09:39 AM
Cross post but I have gone for your full hierachy just to be on the safe side. Thanks dude.

gentleone
10-24-2010, 09:44 AM
It MUST be Sunday :)

Yeah, same here I guess :)

ranjan
10-24-2010, 11:12 AM
One of the most misunderstood concepts of CSS is specificity! Look it up and you will understand why and wont have to do trail and errors like this

gentleone
10-24-2010, 11:31 AM
One of the most misunderstood concepts of CSS is specificity! Look it up and you will understand why and wont have to do trail and errors like this

Yeah, I read an article a while ago about specificity on Smashing Magazines, but it was hard to digest at that time :) I'll definitely should read it again.

edbr
10-25-2010, 02:52 AM
this has a clear example which might help make it clearer
http://htmldog.com/guides/cssadvanced/specificity/