Как выбрать последние 4 элемента с помощью n-го ребенка?

Question

Я хочу выбрать последние 4 элемента, используя nth-child. Есть ли способ сделать это?

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

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

<div class="all-skills-div">
            <?php
                if( have_rows('skills') ):
                while( have_rows('skills') ):
                the_row();
            ?>
                <div class="single-skill-div">
                   <?php echo the_sub_field('a_skill'); ?>
                </div>
            <?php 
                endwhile;
                endif;
            ?>
</div>

Подполе выводит около 9 различных строк текста (сейчас, но это может измениться из-за его динамичности), поэтому я хочу нацелиться на последние 4.

Любая помощь будет оценена.

Спасибо

Answer 1

Вы можете использовать nth-last-child - nth generator

Answer 2

Попробуйте:

ul li {
  display: inline-block;
  width: 100%;;
}

ul li:nth-last-child(-n+4) {
  color: red;
}

<ul>
  <li>1</li>  
  <li>2</li>  
  <li>3</li>
  <li>4</li>  
  <li>5</li>  
  <li>6</li>  
  <li>7</li>  
  <li>8</li>  
  <li>9</li>  
</ul>

Answer 3

Вы можете использовать CSS #something:nth-last-child(-n+4) для последних четырех подполей.

Answer 4

Вы можете сделать это так,

$('#something a:nth-last-child(-n+4)').hide();