Question

I have something along the lines of this

<div class="menu" style="background-color: transparent;">
 <div class="button">
  <div class="divider" style="background-color: transparent;"></div>
  <a id="apple" class="unselect select" href="/apple">
   <span class="apple1">Apple</span>
  </a>
 </div>
 <div class="button">
  <div class="divider"></div>
  <a id="orange" class="unselect" href="/orange">
   <span class="orange1">Orange</span>
  </a>
 </div>
 ....

this gives me the first divider

css=div.menu div.button div.divider

I am trying to access the 2nd divider. I have the need to access the buttons as well. I tried reading through the the nth child stuff and noticed that it is not compatible with IE.

Is there a CSS selector to locate the 2nd/3rd child or descendant (of a given class/id) under an element (with a given class/id)?

I am using xPaths now

//div[@class='menu']/descendant::div[contains(@class,'divider')][2]

it works but I want to migrate this to CSS.

Answer 1

You can write like this:

div.menu div.button + div.button div.divider{
 color:red;
}