last-of-type for menu border-right

[eelucid8]

Hi there,
I have a horizontal ul / list-item menu with a right-border on each li. I do NOT want the right border on the last item in the list. Why isn't this working?

li {
height: 16px;
list-style-type: none;
float: left;
margin: 8px 20px 0 0;
padding-right: 20px;
border-right: 2px white solid;
}

li:last-of-type: {border: none;}

------------------------------------------------

<ul>
<li>About Us</li>
<li>Areas of Practice</li>
<li>Our Attorneys</li>
<li>Resources</li>
<li>Contact Us</li>
</ul>

------------------------------------------------

I would normally put a class on the last li and do it that way, but this menu is going to be database driven and I can't get in there. Can't I use the 'last-of-type' pseudo-selector? It's not working for me. Thanks much,
Bill

 

[chrishirst]

And what browser(s) are you testing this in?

And is the 'last-of-type' rule the LAST li rule defined in the style sheet rule cascade?

 

[ronaldroe]

You have an extra colon in the last-of-type declaration.

 

[eelucid8]

Ronald- good eye. Thank you.

Chris- Chrome, Firefox, Safari, IE9 & Opera. Thoughts?

 

[ronaldroe]

Chris- Chrome, Firefox, Safari, IE9 & Opera. Thoughts?

So I guess it still isn't working after you removed the colon? It wasn't just a small error I noticed. It would have stopped it from working. If it doesn't work after you remove it, there's something else wrong somewhere that we aren't going to see in the code you've posted.

 

[chrishirst]

Thoughts?

You need to look at the rule cascade.

 

[eelucid8]

Oh no.... it works fine now that I removed that second colon. Thanks!