CODEWITHSUNDEEP
jqueryhtmlcss
Steven Spielberg
Steven Spielberg

Reputation:

How to select 3rd div which has specific css class

<div class="boxcontent">

<div>some content this div may be missing [dynamic genrated]</div>

<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
</div>

<div class="boxcontent">


<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
</div>


<div class="boxcontent">


<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
</div>

i found a problem that when i select them using css3 selector nth-child(3) then they select 2nd div in first .boxcontnent div.

when i say this last time they on point but never feel the problem i have here is the view :

http://jsfiddle.net/szz3C/1/

i want to select 3rd div or all boxcontent class div but in first box i found 2nd div select instead of third.

are their any sollution to solve this even using css3 or jQuery thanks for support if anyone can solve this

Upvotes: 2

Views: 16313

Answers (4)

Carlos Mauricio Riquelme Gonzl
Carlos Mauricio Riquelme Gonzl

Reputation: 61

Try this CSS:

div:nth-of-type(3) { ... }

Upvotes: 6

Jack
Jack

Reputation: 895

I guess you can use :last-child for everything but IE8 and below. Use Jquery to cover that?

$(".boxcontent:last-child").css({color:"red"});

But I wouldn't trust javascript to do anything important to the structure.

http://www.quirksmode.org/css/contents.html

Upvotes: 0

Floern
Floern

Reputation: 33904

You could try

.boxcontent .elem+.elem+.elem { /*3rd .elem*/ }
.boxcontent .elem+.elem+.elem+.elem { /*reset css if there are 4 .elem divs*/ }

there is also the :last-child selector

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630569

There's no good "3rd of class" selector (or any other relational class based selector, they're all sibling based, including on type).

Your best alternative (given the example) here would be :nth-last-child() which gets the .box <div> if it's the last-child in its parent, like this:

div.box:nth-last-child(1){ background-color:green; }

You can try it out here.

Upvotes: 2

Related Questions