Как использовать nth-of-type для классов - не элементы

Я работаю над простым HTML для галереи изображений. Каждая строка галереи может иметь 2, 3 или 4 изображения. (В строке с двумя изображениями каждый элемент изображения имеет имя type-2, то же самое относится к type-3 и type-4.)

Теперь я хочу выбрать последний элемент каждой строки для установки настраиваемого поля. Мой HTML выглядит следующим образом:

<div id="content">
    <div class="type-2"></div>
    <div class="type-2"></div> <!-- I want this, 2n+0 of type-2 -->
    <div class="type-3"></div>
    <div class="type-3"></div>
    <div class="type-3"></div> <!-- this, 3n+0 of type-3 -->
    <div class="type-4"></div>
    <div class="type-4"></div>
    <div class="type-4"></div>
    <div class="type-4"></div> <!-- this, 4n+0 of type-4 -->
    <div class="type-2"></div>
    <div class="type-2"></div> <!-- this -->
    <div class="type-3"></div>
    <div class="type-3"></div>
    <div class="type-3"></div> <!-- this -->
    <div class="type-4"></div>
    <div class="type-4"></div>
    <div class="type-4"></div>
    <div class="type-4"></div> <!-- this -->
</div>

Я думаю, что следующий CSS будет работать, но это не так:

.type-2:nth-of-type(2n+0) {margin-right:0;}
.type-3:nth-of-type(3n+0) {margin-right:0;}
.type-4:nth-of-type(4n+0) {margin-right:0;}

Что выбирает этот CSS:

<div id="content">
    <div class="type-2"></div>
    <div class="type-2"></div> <!-- selected by .type-2:nth-of-type(2n+0) -->
    <div class="type-3"></div> <!-- selected by .type-3:nth-of-type(3n+0) -->
    <div class="type-3"></div>
    <div class="type-3"></div>
    <div class="type-4"></div>
    <div class="type-4"></div>
    <div class="type-4"></div> <!-- selected by .type-4:nth-of-type(4n+0) -->
    <div class="type-4"></div>
    <div class="type-2"></div> <!-- selected by .type-2:nth-of-type(2n+0) -->
    <div class="type-2"></div>
    <div class="type-3"></div> <!-- selected by .type-3:nth-of-type(3n+0) -->
    <div class="type-3"></div>
    <div class="type-3"></div>
    <div class="type-4"></div>
    <div class="type-4"></div> <!-- selected by .type-4:nth-of-type(4n+0) -->
    <div class="type-4"></div>
    <div class="type-4"></div>
</div>

Я могу отредактировать свой HTML для достижения того, чего хочу, но просто из любопытства, для этого есть какой-то CSS?

Изменить: этот вопрос может выглядеть как дубликат вопросов, спрашивающих, могут ли nth-child и nth-of-type применяться к классам, а не к элементам. Я уже знал, что ответ отрицательный. То, что я действительно прошу, это чистое решение CSS/взломать его, и выбранный ответ сделал именно это.

Ответ 1

С помощью CSS-хаков без изменения вашей разметки вы можете сделать что-то вроде ниже:

[class*=' type-'], [type^='type-']{ /* Set all the divs to float: left initially */
    float: left;
    content: url('http://static.adzerk.net/Advertisers/db5df4870e4e4b6cbf42727fd434701a.jpg');
    height: 100px; width: 100px;
}

.type-2 + .type-2 + div{
    clear: both; /* Clear float for a div which follows two div with class type-2 */
}

.type-3 + .type-3 + .type-3 + div {
    clear: both; /* Clear float for a div which follows three div with class type-3 */
}

.type-4 + .type-4 + .type-4 + .type-4 + div {
    clear: both; /* /* Clear float for a div which follows four div with class type-4 */
}

Демо-скрипт

Ответ 2

Это невозможно сделать с помощью CSS Selectors Level 3 (по крайней мере, без CSS-хаков, дополнительной разметки или JavaScript).

В проекте CSS Selectors Level 4 предлагается :nth-match() псевдокласс, который будет делать то, что вы хотите:

:nth-match(2n+0 of .type-2) {margin-right:0;}
:nth-match(3n+0 of .type-3) {margin-right:0;}
:nth-match(4n+0 of .type-4) {margin-right:0;}

Это еще не реализовано ни одним браузером, о котором я знаю, но есть ошибка чтобы внедрить его в Chrome.

Ответ 3

nth-child и nth-of-type являются псевдоклассами и могут применяться только к элементам.

.layout:nth-of-type - псевдокласс класса и поэтому не будет работать.

JQuery EQ может предложить решение

http://api.jquery.com/eq/

Ответ 4

Короткий ответ

Нет никакого способа сделать то, что вы просите в чистом css.

Почему

:nth-of-type Может использоваться только против селектора элементов следующим образом:

div:nth-of-type(2n+0) { margin-right: 0; }

Ссылка ссылки.

Возможное решение JS

Вы можете попробовать свое счастье с помощью некоторого jQuery:

var $this;

$('[class^="type-"]').each(function (){

  $this = $(this);

  if ( $this.attr('class') !== $this.next().attr('class') )
    $this.addClass('last');

});

Затем используйте .type-2.last для доступа к вашей "последней строке типа".

Demo

Heres demo.