Псевдокласс :nth-last-child
Псевдокласс :nth-last-child позволяет сделать выбор элемента по его номеру в дереве элементов. Отсчет элементов идет с конца, нумерация элементов начинается с единицы. Так же есть возможность выбора нескольких элементов используя определенные значения или функциональную запись.
ul li:nth-last-child(...) {
...
}- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
:nth-last-child(odd)
Выбор всех нечетных элементов, начиная с конца
<style>
ul.odd li:nth-last-child(odd) {
color: red;
}
</style>
<ul class="odd">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
<li>Четвертый элемент</li>
</ul>- Первый элемент
- Второй элемент
- Третий элемент
- Четвертый элемент
:nth-last-child(even)
Выбор всех четных элементов, начиная с конца
<style>
ul.even li:nth-last-child(even) {
color: red;
}
</style>
<ul class="even">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
<li>Четвертый элемент</li>
</ul>- Первый элемент
- Второй элемент
- Третий элемент
- Четвертый элемент
:nth-last-child(3)
Выбор элемента по его порядковому номеру относительно своего родителя, начиная с конца
<style>
ul.num li:nth-last-child(3) {
color: red;
}
</style>
<ul class="num">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
<li>Четвертый элемент</li>
</ul>- Первый элемент
- Второй элемент
- Третий элемент
- Четвертый элемент
:nth-last-child(3n+2)
Выбор элементов используя математическое выражение an+b, где a - множитель счетчика, n - счетчик, b - изменение начала работы счетчика.
В примере :nth-last-child(3n+2), отсчет начнется со второго дочернего элемента списка начиная с конца, потому что b = 2, и дальше будет стилизоваться каждый третий элемент начиная со второго с конца, так как an = 3n.
<style>
ul.count li:nth-last-child(3n+2) {
color: red;
}
</style>
<ul class="count">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
<li>Четвертый элемент</li>
<li>Пятый элемент</li>
<li>Шестой элемент</li>
<li>Седьмой элемент</li>
<li>Восьмой элемент</li>
</ul>- Первый элемент
- Второй элемент
- Третий элемент
- Четвертый элемент
- Пятый элемент
- Шестой элемент
- Седьмой элемент
- Восьмой элемент
:nth-last-child(-n+2)
Если необходимо выбрать определенное количество элементов с конца списка, используйте конструкцию -n+b, где b = количество необходимых элементов для выборки.
<style>
ul.minusn li:nth-last-child(-n+2) {
color: red;
}
</style>
<ul class="minusn">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
<li>Четвертый элемент</li>
<li>Пятый элемент</li>
</ul>- Первый элемент
- Второй элемент
- Третий элемент
- Четвертый элемент
- Пятый элемент