Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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; 
}
share|improve this question
add comment

2 Answers 2

up vote 1 down vote accepted

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.

share|improve this answer
add comment
#navlist li:last-child { background:none; }

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

share|improve this answer
    
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
1  
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
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.