На этот вопрос уже есть ответ:

Селектор CSS3: первый в своем роде с именем класса? 8 ответов css3 nth типа ограничен классом [duplicate] 2 ответа

Я работаю над простым HTML для галереи изображений. Каждый ряд галереи может иметь 2, 3 или 4 изображения. (В строке из 2 изображений каждый элемент изображения называется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-решение / хак для него, и выбранный ответ сделал именно это.