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

Можно ли использовать псевдоселектор nth-child для работы с определенным классом?

См. этот пример: http://jsfiddle.net/fZGvH/

Я хочу, чтобы второй DIV.red стал красным, но он не применяет цвет, как ожидалось.

Не только это, но когда вы укажете это, он изменяет 5-й DIV на красный:

div.red:nth-child(6)

Когда вы укажете это, он изменит 8-й DIV на красный:

div.red:nth-child(9)

Кажется, это один DIV. В примере есть только 8 тегов DIV, поэтому я не знаю, почему работает nth-child (9). Тестирование с использованием Firefox 3.6, но в моем фактическом производственном коде такая же проблема возникает в Chrome. Я не понимаю что-то о том, как это должно работать, было бы полезно разъяснить.

Кроме того, это изменит 6-й DIV на красный, но я действительно хочу, чтобы он изменил второй DIV.red на красный:

div.red:nth-of-type(6)

И я не понимаю, почему nth-child() и nth-of-type() отвечают по-разному, поскольку в документе всего восемь тегов одного и того же типа.

Ответы

Ответ 1

Нет способа фильтровать по классам в CSS, потому что нет селектора :nth-of-class(). Один из способов заключается в том, чтобы поместить ваши два разных типа div в свои собственные группы, а затем выбрать на основе этих групп. Например:

<div class="orange">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="red">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

С помощью этого селектора:

div.red div:nth-child(2) {
    background: red;
}

Относительно последнего вопроса:

И я не понимаю, почему nth-child() и nth-of-type() отвечают по-разному, поскольку в документе всего восемь тегов одного и того же типа.

Для кода, который вы там указываете, не должен быть любой разницей. Я тестировал его, и два псевдокласса работают должным образом. Но, в общем:

:nth-child() работает на полном уровне братьев и сестер без учета каких-либо других простых селекторов. Тогда, если n-й ребенок не относится к тому, что соответствует простым селекторам, ничего не сопоставляется.

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

Ответ 2

Вы можете использовать общий комбинатор:

div,
div.red ~ div.red ~ div.red {
  background: gray;
}
div.red ~ div.red {
  background: red;
}

Это многословно, и вам нужно reset стили вернуться снова, но это может быть полезно в некоторых особых ситуациях.

Он может быть автоматизирован с помощью препроцессора CSS, и если я правильно понимаю gzip, поскольку вывод CSS просто повторяет тот же текст, размер файла gziped не должен быть ужасно большим, если вы его не используете много.

Ответ 3

Есть более простое решение, которое я нашел, чтобы работать с моим div без каких-либо специальных строк кода.

.red div:nth-child(6) {background-color:#ccc;}
.red div:nth-child(9) {background-color:#eee;}

работает просто отлично, без div впереди.

Ответ 4

<div class="alpha">
  <div class="beta"></div>
  <div class="beta"></div>
  <div class="beta"></div>
  <div class="beta"></div>
  <div class="beta"></div>
</div>

... если вы хотите сортировать div.beta на nth-child, вы должны установить по крайней мере width = auto на div.alpha, возможно, он работает.