Выберите последние 3 дочерних элемента

Я знаю, что вы можете выбрать последнего ребенка с :last-child или определенного ребенка с :nth-child (если вы знаете их должность/номер).

Мне нужно выбрать последних 3 детей, не зная, сколько может быть дочерних элементов.

Я знаю, что есть нечто, что называется :nth-last-child, но я не могу понять, как оно работает.

Для этого:

<div id="something">

    <a href="images/x.jpg"  ><a/>
    <a href="images/x.jpg"  ><a/>
    <!-- More elements here -->
    <!-- ..... -->
    <!-- I need to select these: -->
    <a href="images/x.jpg"  ><a/>
    <a href="images/x.jpg"  ><a/>
    <a href="images/x.jpg"  ><a/>

</div>

Мне нужно что-то вроде этого:

#something a:last-child{
   /* only now it selects the last <a> and the 2 <a> that come before*/ 
}

Ответы

Ответ 1

Здесь вы можете прочитать о nth-last child, но это должно в основном сделать трюк по выбору последних трех детей с помощью CSS

#something a:nth-last-child(-n+3) {
    /*declarations*/
}

fiddle демонстрация от Fabrício Matté

Это отобразит только те строки, которые возвращают положительное число для выражения N (-n + 3), и поскольку мы используем nth-last-child, он рассчитывает от последнего до первого, поэтому первые строки снизу дают,

f(n) = -n+3
f(1) = -1+3 = 2 <- first row from the bottom
f(2) = -2+3 = 1 <- second row from the bottom
f(3) = -3+3 = 0 <- third row from the bottom

все остальное вернет отрицательное число

Ответ 2

Это возможно с помощью селекторов CSS3 и formula:

.something a:nth-last-child(-n+3) { ... }

Вы также можете попробовать с помощью jQuery (пример) или добавить определенный класс к последним трем элементам вашего серверного кода (для этого не требуется JavaScript включен в браузерах, а также работает в старых браузерах, которые не поддерживают CSS3).

Ответ 3

Принятый ответ имеет правильную формулу, но объяснение неверно.

Таким образом, правильный CSS (такой же, как в настоящее время принятый ответ):

#something a:nth-last-child(-n+3) {
    /*declarations*/
}

Но вот правильное объяснение математики:

f(n) = -n+3
f(0) = -0+3 = 3 <- 3rd row from the bottom
f(1) = -1+3 = 2 <- 2nd row from the bottom
f(2) = -2+3 = 1 <- 1st row from the bottom
f(3) = -3+3 = 0 <- nothing
f(3) = -4+3 = -1 <- nothing
etc...