CSS Select Second Level Elements

How to select the first, second, or third element with a given class name?

You probably finally realized this between posting this question and today, but the very nature of selectors makes it impossible to navigate through hierarchically unrelated HTML elements.

Or, to put it simply, since you said in your comment that

there are no uniform parent containers

... it's just not possible with selectors alone, without modifying the markup in some way as shown by the other answers.

You have to use the jQuery .eq() solution.

Select first child of second level

You can string together first-child selectors like this:

.tGrid-row-two:first-child .tGrid-item:first-child { }

As @j08691 points out, this will only work if .tGrid-item is a direct descendant of .tGrid-row-two and there are no siblings preceding it aside from other elements with the .tGrid-item class.

.tGrid-row-two:first-child .tGrid-item:first-child {  background:blue;  color:#fff;}

<div class="tGrid"> <div class="tGrid-row-four">  <div class="tGrid-row-two">   <div class="tGrid-item">    this is the one I want to select   </div>   <div class="tGrid-item">    no select   </div>  </div>  <div class="tGrid-row-two">   <div class="tGrid-item">    no select   </div>   <div class="tGrid-item">    no select   </div>  </div> </div> <div class="tGrid-row-four">  <div class="tGrid-row-two">   <div class="tGrid-item">    this is the one I want to select   </div>   <div class="tGrid-item">    no select   </div>  </div>  <div class="tGrid-row-two">   <div class="tGrid-item">    no select   </div>   <div class="tGrid-item">    no select   </div>  </div> </div></div>

CSS3 selector to find the 2nd div of the same class

UPDATE: This answer was originally written in 2008 when nth-of-type support was unreliable at best. Today I'd say you could safely use something like .bar:nth-of-type(2), unless you have to support IE8 and older.

---

Original answer from 2008 follows (Note that I would not recommend this anymore!):

If you can use Prototype JS you can use this code to set some style values, or add another classname:

// set style:
$$('div.theclassname')[1].setStyle({ backgroundColor: '#900', fontSize: '1.2em' });
// OR add class name:
$$('div.theclassname')[1].addClassName('secondclass'); // pun intentded...

(I didn't test this code, and it doesn't check if there actually is a second div present, but something like this should work.)

But if you're generating the html serverside you might just as well add an extra class on the second item...

Selecting Every Second Level In CSS

While there is no problem when the number of levels is known, when it is not known then it becomes impossible with CSS only, not even if you are able to anchor the topmost div to some other element with a selector.

---

Related Topics