styling one list item

Question

I have four li's and I want to style the 4th li not to have the background image. How do I accomplish this without having to insert a spam tag?

#get-help ul.help-menu li {
color: #656565;
background:url("/ContentTemplates/assets/images/backgrounds/nav-brdr.png")      
no-repeat scroll 50% 100% transparent;
width: 226px;
text-indent: 10px; 
}

Answer 1

To style the 4th list item, you can use the nth-child selector, though it is not supported in Internet Explorer.

#get-help ul.help-menu li:nth-child(4) {
  background: none;
}

If you mean the last item (independent of how many list items there are), use :last-child instead of :nth-child(4).

If you need full support, you might want to try Javascript or jQuery. (Search at Stack Overflow if you are not sure how.)

The simplest solution is to add a class to the 4th item manually, or as you generate the HTML if it comes from a script. There is nothing really wrong with that.

Answer 2

#navlist li:last-child { background:none; }

Very similar to this request over at SO: Stack Overflow: