Как выбрать 3-й DIV, который имеет определенный класс CSS

Question

<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> 

я нашел проблему, когда я выбираю их с помощью селектора css3 п-го ребенка (3), то они выбирают 2-й DIV в первом .boxcontnent дел.

, когда я говорю это последний раз, когда они на точку, но никогда не чувствую эту проблему я имею здесь вид:

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

я хочу, чтобы выбрать третий DIV или все boxcontent класса DIV, но в первом поле я найден 2-й выбор div вместо третьего.

являются их любым гуманным решить эту даже с помощью CSS3 или JQuery спасибо за поддержку, если кто-то может решить эту

Answer 1

Там нет ничего хорошего «третий класса» селектора (или любого другого селектор другого реляционной класса на основе, они» re все sibling на основе, включая сверху type).

Ваша лучшая альтернатива (данный пример) здесь будет :nth-last-child() который получает .box<div>если это последний ребенок в его родителей, как это:

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

You can try it out here.

Answer 2

Вы можете попробовать

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

есть также :last-child селектор

Answer 3

Я думаю, вы можете использовать: в последнюю ребенка за все, кроме IE8 и ниже. Использовать JQuery, чтобы покрыть это?

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

Но я бы не стал доверять javascript, чтобы сделать что-то важное для структуры.

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

Answer 4

Попробуйте CSS:

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