# styling one list item

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;
}

-

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.

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


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

-
Just keep in mind this will not work in any version of IE currently available.msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx –  John Conde Oct 28 '10 at 15:54
That only styles the last item, not the 4th. –  DisgruntledGoat Oct 28 '10 at 16:35
Thanks this is what I needed –  Amen Oct 28 '10 at 19:00