0

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.

Turnip
  • 35,836
  • 15
  • 89
  • 111
user3802315
  • 19
  • 7

1 Answers1

5

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

Jacob G
  • 13,762
  • 3
  • 47
  • 67
  • To clarify a bit more. There are more than one element that has the class .mainpage, but they are separated by div's. That is why that does not work. The selector is looking for a second .mainPage inside whatever it's parent element is, but there are never more than 1 .mainPage per LI. – Michael Jul 24 '14 at 12:42
  • Hmm. This works in the jsfiddle so I guess it's what I was asking for, but it won't work on my website because of the nested ul and li's. Is it at all possible to more specifically define what li I want to select using the ul ID or a ID? – user3802315 Jul 24 '14 at 13:12
  • However, I just got an email from my CMS support with answer that will solve everything. Thank you for your answer, it answers my question. My question just wasn't worded correctly. – user3802315 Jul 24 '14 at 13:18