Какое CSS-правило применить для последних 4 элементов или можно ли обойтись без JS?

Question

[Илья Савельев]

Здравствуйте.

Имеется cледующий HTML-код (графические баннеры в количестве 8 штук):

<div class="col-xs-6 col-sm-4 col-md-3">
     <a href="#"><img src="/images/banner1.png" alt="" class="grayscale"></a>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
     <a href="#"><img src="/images/banner1.png" alt="" class="grayscale"></a>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
     <a href="#"><img src="/images/banner1.png" alt="" class="grayscale"></a>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
     <a href="#"><img src="/images/banner1.png" alt="" class="grayscale"></a>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
     <a href="#"><img src="/images/banner1.png" alt="" class="grayscale"></a>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
     <a href="#"><img src="/images/banner1.png" alt="" class="grayscale"></a>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
     <a href="#"><img src="/images/banner1.png" alt="" class="grayscale"></a>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
     <a href="#"><img src="/images/banner1.png" alt="" class="grayscale"></a>
</div>

Какое CSS-правило применить для того, чтобы добавить необходимые стили к последним 4-м элементам?

Comments

[Kostya Gorozhanov]

nth-calculator.com

Answer 1

[Алексей Уколов]

:nth-last-child(-n+4)

Answer 2

[Евгений]

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

Comments

[Илья Савельев]

Да, количество блоков может меняться, поэтому :nth-child(n) не подойдет в данном случае.