Как выбрать третий 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 nth-child (3), они выбирают 2-й div в первом .boxcontnent div.

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

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

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

- это их решение, чтобы решить эту проблему, даже используя css3 или jQuery, спасибо за поддержку, если кто-нибудь может решить эту проблему

Answer 1

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

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

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

Я думаю, вы можете использовать: last-child для всего, кроме IE8 и ниже. Используйте Jquery, чтобы покрыть это?

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

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

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

Answer 4

Нет хорошего селектора «3-го класса» (или любого другого реляционного селектора на основе класса , все они основаны на родстве , включая тип).

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

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

Вы можете попробовать это здесь .