applying different background color to even and odd items in a <ul>

Question

Im trying to apply different background color to even and odd items in a UL.The code below works in Safarii but not in IE6. Is this a limitation in IE6 or is the CSS code incorrect?

ul#caseStudies {   
float: left;   
list-style: none;   
margin: 0;   
width: 100%;
}
ul#caseStudies li {   
border: 1px solid #999;   
float: left;   
margin: 0 10px 10px 0;   
width: 100px;   
}  

ul#caseStudies li:nth-child(even) {background: #CCC;}
ul#caseStudies li:nth-child(odd) {background: #C9C;}
</style>


<ul id="caseStudies">
    <li>1</li>
    <li>2</li>
</ul>

Answer 1

IE6 does not support the :nth-child pseudo-element. If you need to support that browser you either need to:

1. use an odd class to style some list items differently; or
2. use Javascript.

As an example of (2) this is trivial in jQuery:

$("#caseStudies > li:nth-child(odd)").addClass("odd");

Answer 2

nth child is a css3 selector and IE has no support for that.

Take a look at

CSS contents and browser compatibility

Use two classes for the even and odd list items and then apply style.

Answer 3

At this juncture it is probably no longer worth your energy to support the IE6 browser, let the poor thing die already. You are worrying over 10% of possible users.

Answer 4

Yes

IE6 doesn't support this :nth-child

ul#caseStudies li:nth-child(even) {background: #CCC;}
ul#caseStudies li:nth-child(odd) {background: #C9C;}

li:whatever doesn't work for IE, only <a> is supported with

a:hover, a:active, a:visited

Use JQuery instead or create 2 CSS classes for odd and even for IE6.

Answer 5

Try using JS. The following code was taken from quirksmode.org:

function zebraLists() {
    var lists = getElementsByTagNames('ol,ul');
    for (var i=0;i<lists.length;i++) {
        var items = lists[i].childNodes;
        if (lists[i].parentNode.className === 'floater') continue;
        var counter = 1;
        for (var j=0;j<items.length;j++) {
            if (items[j].nodeName == 'LI' && !items[j].getElementsByTagName('li').length) {
                counter++;
                if (counter % 2 == 1)
                    items[j].className = 'odd';
                else
                    items[j].className = '';
            }
        }
    }
}

This way, the class name 'odd' is applied to the odd <li> elements of the list.