CodingForums.com - View Single Post - Pseudo selector nth-of-type problem

AJLComputers · 11-27-2012, 05:22 PM

Hi guys

New to the forum and would just like a little help with pseudo selectors and IE9. My HTML code is...

<div class="top-menu">
<ul>
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
<li><a href="#">Item six</a></li>
</ul>
</div>

and my CSS is...

.top-menu li:nth-of-type(3n+1) { background-color: #91dad6; }
.top-menu li:nth-of-type(3n+2) { background-color: #003f40; }
.top-menu li:nth-of-type(3n+3) { background-color: #ff9b0c; }

This all works fine in Firefox, Chrome and Safari but in IE9, which does apparently support nth-of-type it doesn't work. It simply doesn't show the background color at all.

Any ideas what I need to do to get it to work?

11-27-2012, 05:22 PM	PM User \| #1
AJLComputers New to the CF scene Join Date: Nov 2012 Posts: 1 Thanks: 0 Thanked 0 Times in 0 Posts	Pseudo selector nth-of-type problem Hi guys New to the forum and would just like a little help with pseudo selectors and IE9. My HTML code is... <div class="top-menu"> <ul> <li><a href="#">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> <li><a href="#">Item six</a></li> </ul> </div> and my CSS is... .top-menu li:nth-of-type(3n+1) { background-color: #91dad6; } .top-menu li:nth-of-type(3n+2) { background-color: #003f40; } .top-menu li:nth-of-type(3n+3) { background-color: #ff9b0c; } This all works fine in Firefox, Chrome and Safari but in IE9, which does apparently support nth-of-type it doesn't work. It simply doesn't show the background color at all. Any ideas what I need to do to get it to work?