Search code examples
csscss-selectorsmegamenu

I'm trying to use CSS3's 'nth-of-type' but can't get it to work?

Here's a jsfiddle of basically what I'm trying to do.

http://jsfiddle.net/miiicheellee/aHwS8/151/

HTML:

<ul id="Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl00_childNodesContainer">
<li><a href="" class="mainPage">1</a></div>
<li><a href="" class="mainPage">2</a></div>
<li><a href="" class="mainPage">3</a></div>
</ul>

CSS:

.mainPage:nth-of-type(2) a{
 background: red;
}

<!-- how would I get this to work if the list items do NOT have an identification? --!>

The catch is I can't use the list item's identification because of the complicated nest of ul's and li's on my website, although I know that would work. Is there another way to do it using the ones I have on the jsfiddle? In other words, please do not manipulate the HTML--I have little control over ID and Class names unfortunately.

Solution

  • You need to apply it to the <li>'s :nth-of-type(2)

    li:nth-of-type(2) a{
 background: red;
}

    This applies the rule to the second <li>. You had it like:

    .mainPage:nth-of-type(2) a{
 background: red;
}

    Using this it is selecting the second .mainPage which is not in the same <li>
    JSFiddle Demo