Nth-child не отвечает на селектор классов

Если это не предполагается, но я не могу получить nth-child, чтобы подтвердить селектор классов.

Я говорю 4 divs внутри другого div, всех различных классов и идентификаторов. Мне нужно выбрать первый экземпляр div с указанным классом. Например:

#content .foo:nth-child(1) { margin-top: 0; }

И, очевидно, снова с first-child, чтобы получить тот же эффект, но он не влияет ни на один из div.

Теперь, если я хочу заставить его работать с этим div, я могу это сделать:

#content .foo:nth-child(3) { margin-top: 0; }

Так получилось, что это 3-й div в #content, что бессмысленно, потому что мне нужно получить 1-й экземпляр чего-либо с этим классом.

<div id="content">  
  <div id="action-bar"> </div>
  <div id="message"> </div>
  <div class="table"> </div>
  <div class="clear"> </div>
</div>

Вот пример HTML, я пробовал nth-of-type так же, как это:

#content .table:nth-of-type(1) { margin: 0 }

Снова он реагирует только тогда, когда я говорю nth-of-type(3).

EDIT:

Я создал рабочий пример проблемы, которую я имею здесь: http://jsfiddle.net/aHwS8/

Ответ 1

Попробуйте вместо :nth-of-type() псевдо-селектор:

#content .foo:nth-of-type(1) { margin-top: 0; }

Обратите внимание, что :nth-of-type() подсчитывает элементы с тем же именем. Таким образом, .foo:nth-of-type(1) не будет выбирать первый элемент с классом foo, но любой первый элемент, который является первым в списке элементов, сгруппированных с тем же именем. Если у вас есть документ вроде этого:

<div>
    <i class="foo">1</i><i>x</i><i class="foo">2</i>
    <b class="foo">3</b><b>x</b><b class="foo">4</b>
</div>

.foo:nth-of-type(1) будет выбирать элементы <i class="foo">1</i> и <b class="foo">3</b>, поскольку оба являются первыми из его собственного типа.

Ответ 2

Это старый пост, но я оказался здесь, чтобы найти ответ на аналогичную проблему. Возможно, это поможет кому-то.

У меня была следующая структура, желающая выбрать n-й "foo" -div:

<body>
  <div class='container'>
    <div class='foo'></div>
  </div>
  <div class='container'>
     <div class='foo'></div>
  </div>
  <div class='container'>
     <div class='foo'></div>
  </div>
  <div class='container'>
     <div class='foo'></div>
  </div>
</body>

Трюк был "вернуться" и выберите родительский элемент с повторяющимися братьями и сестрами, в этом случае .container и затем выберите его child (ren):

.container:nth-of-type(3) .foo {
    styles here
}

Ответ 3

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

#content .foo:first-of-type { margin-top: 0; }