Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    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?

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Posts
    423
    Thanks
    22
    Thanked 56 Times in 56 Posts
    You are most likely inside of "Compatibility mode" in IE
    This makes IE act like the older versions of IE - change it back to IE9, and it should work fine.

    Cheers


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •