Псевдоклассы можно использовать для выбора определенного элемента из списка. В этом уроке мы расскажем о псевдоклассе :nth-child, что можно создать с помощью этого псевдокласса и чем он может быть полезен. Псевдокласс :nth-child позволяет выбрать группу элементов с общими свойствами. Наиболее часто он используется для выбора четных или нечетных элементов из группы. Нередко его используют, чтобы таблица выглядела, как зебра, задавая разные цвета фона четным и нечетным рядам.
Еще псевдокласс :nth-child позволяет разделить элементы с общим свойством на группы и затем выбрать определенный элемент из каждой группы, используя следующий синтаксис:
Здесь a определяет количество элементов в группе, а b определяет, какой элемент из группы будет выбран. Если использовать значение 2n+1, то элементы будут разделены на группы по два, и будут выбраны первые элементы каждой группы, т. е., элементы с нечетным порядковым номером. Если использовать значение 2n+2, то элементы снова будут разделены на группы по два, но теперь будут выбраны вторые элементы каждой группы, т. е., элементы с четным порядковым номером.
Еще в качестве примера для понимания псевдокласса:nth-child мы выберем с его помощью каждый четвертый элемент, т. е., четвертый, восьмой, двенадцатый, шестнадцатый и т. д. Для этого разделим элементы на группы по четыре и затем выберем каждый четвертый элемент.
Ниже приведен список из десяти элементов, и мы воспользуемся псевдоклассами :nth-child, :first-child и :last-child, чтобы выбрать элементы, которые хотим выделить.
Использование псевдокласса CSS :nth-child для выбора единственного элемента
Задавая псевдоклассу :nth-child значение в виде числа, можно выбрать, к какому потомку из группы обратиться:
• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10
Использование псевдокласса CSS :nth-child для выбора всех элементов, кроме первых пяти
Если задать псевдоклассу :nth-child значение в виде n+ число, можно выбрать все элементы, начиная с элемента с этим порядковым номером:
• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10
Использование псевдокласса CSS :nth-child для выбора только первых пяти элементов
Когда мы задаем псевдоклассу :nth-child значение в виде отрицательного n+ число, мы выбираем все элементы, находящиеся до элемента с этим порядковым номером:
• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10
Использование псевдокласса CSS :nth-child для выбора каждого третьего элемента
Псевдокласс :nth-child можно использовать, чтобы выбрать последовательность элементов, задавая, сколько элементов в последовательности и порядковый номер нужного элемента. Если задать значение 3n+1, будет выбран каждый третий элемент, начиная с первого:
• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10
Использование псевдокласса CSS :nth-child для выбора только нечетных элементов
Можно задать псевдоклассу :nth-child значение odd (нечетный), чтобы выбрать все элементы с нечетными порядковыми номерами. Т.е., первый, третий, пятый, седьмой, девятый и т. д элементы. Это очень удобно, чтобы задавать цвета соседним рядам таблицы.
• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10
Использование псевдокласса CSS :nth-child для выбора только четных элементов
Этот пример показывает то же, что и прошлый, но на этот раз выбраны все элементы с четными порядковыми номерами. Т.е., второй, четвертый, шестой, восьмой, десятый и т. д. элементы:
• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10
Использование псевдокласса CSS :first-child для выбора первого элемента
Другой псевдокласс :first-child выберет первый элемент:
• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10
Использование псевдокласса CSS :last-child для выбора последнего элемента
Кроме псевдокласса :first-child есть псевдокласс :last-child, который выберет последний элемент из группы элементов:
• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10
Использование псевдокласса CSS :nth-last-child для выбора предпоследнего элемента
Еще можно использовать псевдокласс :nth-last-child, который совмещает в себе возможности псевдоклассов :last-child и :nth-child, чтобы начинать отсчет элементов с конца. Т.е., можно выбрать элемент, отсчитывая порядковые номера с конца группы, например, в группе из десяти элементов можно выбрать второй с конца элемент:
• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10
Ознакомьтесь с возможностями псевдокласса :nth-child с помощью «Конструктора nth-child».
www.dejurka.ru
Синтаксис и правила использования псевдоклассов
Отличительной чертой псевдоклассов является двоеточие. Именно этот знак отличает их от обычных селекторов. После двоеточия обязательно без пробела идет имя псевдокласса. В конце, если есть необходимость, в скобках указывается значение в виде целого числа, формулы или ключевого слова.
li:last-child{ padding-bottom: 0; } Иногда можно встретить двойное написание (::). Эта спецификация была добавлена в CSS3 для обращения к псевдоэлементам ::backdrop, ::before, ::after. Они отличаются тем, что добавляют стили объектам, которых нет в дереве DOM. Например, заглавная буква или первая строка.
p::before{ content: ''; display: block; width: 100%; color: #222; } Все тридцать селекторов мы разбирать не будем, возьмем только те, что означают в CSS последний элемент (:last-child), первый (:first-child). А также рассмотрим специальный псевдокласс (:nth-child), который позволяет обращаться к дочерним элементам по порядковому номеру. Учиться будем на примере создания панели навигации по сайту:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body{ width: 100%; padding: 0; margin: 0; background: #000; } nav{ display: flex; justify-content: flex-end; width: 100%; margin: 0; padding: 0; background: rgba(255,255,255,.1); } nav a{ color: #fff; text-decoration: none; text-transform: uppercase; font: bold 15px Arial, sans-serif; padding: 1em; } </style> </head> <body> <nav> <a href="#">Домой</a> <a href="#">Новости</a> <a href="#">Услуги</a> <a href="#">Блог</a> </nav> </body> </html>
Получилось простое меню с четырьмя ссылками белого цвета. С помощью псевдоклассов мы можем выборочно настраивать каждый пункт навигации, менять размер, или сделать их разноцветными. Например, чтобы указать в CSS последний элемент красного цвета, а первый зеленого, нужен следующий код:
nav a:first-child{ color: green; } nav a:last-child{ color: red; }Универсальный селектор :nth-child
Этот селектор относится к числу структурных псевдоклассов. С его помощью можно управлять объектами по их нумерации. Порядковое число указывается в скобках и начинается с единицы. Если нужен последний элемент в CSS, для этого используется запись:
/*добавит последнему элементу справа границу красного цвета*/ nav a:nth-child(-1){ border-right: 1px solid red; }Помимо целочисельных значений :nth-child принимает в качестве значений ключевые слова:
- odd — нечетные элементы;
- even — четные.
Теперь чтобы добавить границу желтого цвета каждой второй ссылке в панели навигации, достаточно прописать:
nav a:nth-child(even){ border-bottom: 1px solid yellow; }Комбинированное использование псевдоклассов
Каскадные таблицы стилей позволяют комбинировать в одном селекторе сразу несколько псевдоклассов. Такой подход может пригодиться, когда необходимо назначить определенные стили всем CSS элементам, кроме последнего.
nav a:not(:last-child){ padding-right: 10px; }Дословно запись выше указывает браузеру добавить ко всем ссылкам <a> внутри навигации <nav> отступ справа, за исключением последнего элемента. CSS селектор :not означает «все кроме». В скобках указываются имена классов, идентификаторов, псевдо-элементов и названия тегов.
Теперь, зная о возможности комбинирования селекторов, добавим нашей панели навигации интерактивности. Для этого будем использовать псевдокласс состояния :hover, который добавляет нужные стили при наведении курсора мышки на объект.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body{ width: 100%; padding: 0; margin: 0; background: #000; } nav{ display: flex; justify-content: flex-end; width: 100%; margin: 0; padding: 0; background: rgba(255,255,255,.1); overflow: hidden; } nav a{ color: #fff; text-decoration: none; text-transform: uppercase; font: bold 15px Arial, sans-serif; padding: 1em; transition: all .5s ease-in-out; } nav a:not(:last-child){ padding-right: 2em; } nav a:hover{ border-bottom: 1px solid#D349CE; transform: scale(1.03); opacity: .8; } nav a:nth-child(2):hover{ border-color: #46C5CD; } nav a:nth-child(3):hover{ border-color: #3EDC79; } nav a:nth-child(-1):hover{ border-color: #f69; } </style> </head> <body> <nav> <a href="#">Домой</a> <a href="#">Новости</a> <a href="#">Услуги</a> <a href="#">Блог</a> </nav> </body> </html>
С помощью селектора nav a:hover, мы сделали так, чтобы внешний вид ссылок каждый раз менялся при наведении курсора. Так пользователю будет намного проще и интересней взаимодействовать с сайтом. Обратите внимание на запись nav a:nth-child(n). Благодаря ей у каждого пункта меню свой цвет подчеркивания в состоянии :hover.
Можно пойти дальше и добавить :focus и :active для элементов <a>, которые будут менять поведение ссылок во время нажатия. Или окрасить их в другой цвет и увеличить размер шрифта в активном состоянии. С помощью CSS-селекторов оживают даже статичные HTML-страницы и без намека на JavaScript.
fb.ru
Значения
| Значение | Описание |
|---|---|
| Число | Положительное число начиная с 1. Задает номер элемента, к которому мы хотим обратиться. Нумерация элементов начинается с 1. |
| odd | Нечетные элементы. |
| even | Четные элементы. |
| Выражение | Можно составлять специальные выражения с буквой n, которая обозначает все целые числа от нуля (не от единицы!) до бесконечности. Так, 2n — значит все четные числа (начиная со второго). Как это понять? Подставляем в n последовательно числа от 0 и так далее: если n = 0, то 2n даст 0 — такого элемента нет (нумерация элементов с 1!), если n = 1, то 2n даст 2 — второй элемент, если n = 2, 2n дает 4 — четвертый элемент. Если написать 3n — это будет каждый третий элемент (начиная с третьего!), и так далее. |
Примеры
Пример
В данном примере мы сделаем красного цвета тот li, который является 4-тым с конца потомком своего родителя (4-тым внутри ol):
Результат выполнения кода:
Пример
Сейчас красными сделаем все четные с конца li:
Результат выполнения кода:
Пример
Сейчас красными сделаем все нечетные с конца li:
Результат выполнения кода:
Пример
Сейчас красными сделаем каждую третью с конца li (начиная с третьей с конца):
Результат выполнения кода:
code.mu
Example
We will discuss the :nth-last-child selector below, exploring examples of how to use this selector in CSS to apply styling to the nth element.
Let’s look at a CSS :nth-last-child example where we apply the :nth-last-child selector with an integer value.
The CSS would look like this:
tr:nth-last-child(1) { background: cyan; }
The HTML would look like this:
<table> <tr> <th>Column 1 Heading</th> <th>Column 2 Heading</th> </tr> <tr> <td>techonthenet.com</td> <td>Technical reference site</td> </tr> <tr> <td>checkyourmath.com</td> <td>Math calculation site</td> </tr> <tr> <td>bigactivities.com</td> <td>Kids activity site</td> </tr> </table>
The result would look like this (The :nth-last-child selector would style the <tr> tags as follows):
In this CSS :nth-last-child example, the :nth-last-child(1) would select and style the last <tr> in the table with a cyan background color. All other rows in the table will not be styled by the :nth-last-child selector.
Let’s look at a CSS :nth-last-child example where we target multiple children.
The CSS would look like this:
tr:nth-last-child(-n+2) { background: yellow; }
The HTML would look like this:
<table> <tr> <th>Column 1 Heading</th> <th>Column 2 Heading</th> </tr> <tr> <td>techonthenet.com</td> <td>Technical reference site</td> </tr> <tr> <td>checkyourmath.com</td> <td>Math calculation site</td> </tr> <tr> <td>bigactivities.com</td> <td>Kids activity site</td> </tr> </table>
The result would look like this (The :nth-last-child selector would style the last two <tr> tags as follows):
In this CSS :nth-last-child example, the :nth-last_child(-n+2) would select and style the last two <tr> tags with a yellow background color. All other rows in the table will not be styled by the :nth-last-child selector.
www.techonthenet.com
Поддержка браузерами
| 12.0+ | 9.0+ | 3.5+ | 4.0+ | 9.6+ | 3.2+ |
Описание
Псевдо-класс :nth-last-child(n) применяет заданный стиль к элементу, который является «n» дочерним элементом, заданного типа, считая от последнего элемента(независимо от его типа) своего родителя.
n — может быть числом, ключевым словом или формулой.
Пример формулы (an + b):
p:nth-last-child(3n+0) { color:red; }
a — представляет собой цикл, n — счетчик (начинается с 0) и b — это значение смещения, указывающее с какого элемента, отсчитывая от последнего, начнется цикл.
Ключевые слова odd(нечетные) и even(четные), могут быть использованы в соответствии с дочерними элементами, индекс которых составляет четное или нечетное значение (индекс последнего дочернего элемента начинается с 1):
p:nth-last-child(odd) { color:#ff0000; }
Пример:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Пример</title> <style> p:nth-last-child(2) { color: red; background-color: yellow; } </style> </head> <body> <p>Первый абзац.</p> <p>Второй абзац.</p> <p>Третий абзац.</p> <div><p>Первый абзац.</p><p>Второй абзац.</p></div> </body> </html>
Результат данного примера:
puzzleweb.ru
От автора: в CSS есть селекторы для поиска элементов на основе их положения в дереве документа. Их называют индексными псевдоклассами, потому что они смотрят на положение элемента, а не на его тип, атрибуты или ID. Всего их пять.
:first-child и :last-child
По названию вы могли догадаться, что псевдоклассы :first-child и :last-child выбирают первый и последний дочерний элемент в узле (элементе). Как и с другими псевдоклассами, :first-child и :last-child оказывают минимальное стороннее воздействие при использовании простых селекторов.
Рассмотрим HTML и CSS ниже:
На скриншоте ниже показан результат.
Заголовок h2 и первый li окрасились в розовый, так как :first-child не привязан к конкретным элементам. Тег h2 – первый ребенок тега body, а li – первый дочерний элемент ul. Но почему оставшиеся элементы li зеленые? Потому что :last-child тоже не привязан к конкретному элементу, а ul является последним дочерним элементом в теге body. По сути, в стилях выше мы прописали *:first-child и *:last-child.
Если добавить к :first-child и :last-child простой селектор, они станут конкретнее. Давайте ограничим нашу выборку только элементами списка. Замените :first-child на li:first-child и :last-child на li:last-child. На скриншоте ниже показан результат.
:nth-child() и :nth-last-child()
Уметь выбирать первый и последний дочерние элементы в документе неплохо. А что если нужно выбрать четные или нечетные элементы? Может, нам нужно выбрать шестой элемент в дереве или применить стили к каждому третьему дочернему элементу. Здесь нам помогут псевдоклассы :nth-child() и :nth-last-child().
Как и :not, :nth-child() и :nth-last-child() также являются функциональными псевдоклассами. Они принимают один аргумент, который должен быть:
Последний аргумент немного сложнее остальных. Разберем его чуть позже.
Чем отличаются :nth-child() и :nth-last-child()? Они отличаются точкой отсчета: :nth-child() считает вперед, а :nth-last-child() – назад. CSS индексы используют натуральные числа и начинаются с 1, а не с 0.
С помощью псевдоклассов :nth-child() и :nth-last-child() удобно создавать чередующиеся узоры. Полосатая таблица – идеальный пример использования. CSS ниже присваивает четным строкам в таблице светлый синевато-серый фон, результат можно посмотреть на скриншоте ниже:
Если переключиться с :nth-child на :nth-last-child, полосы инвертируются, так как отсчет начнется с низа. Смотрите скриншот ниже.
А хотите что-нибудь посложнее, с более сложными аргументами? Давайте создадим документ с 20 элементами, как показано ниже.
С помощью :nth-child() и :nth-last-child() можно выбрать один определенный элемент. Можно выбрать все дочерние элементы после заданной позиции, или можно выбрать элементы с кратностью со смещением. Давайте изменим фон шестого элемента:
Результат.
А если нужно выбрать каждый третий элемент? Тут нам поможет синтаксис Аn+В:
Еще раз, А – шаг. Это множитель для n, начинающийся с 1. То есть если А = 3, то 3n выберет третий, шестой и девятый элементы и т.д. Именно это можно наблюдать на скриншоте ниже.
Здесь уже все немного интереснее. С помощью :nth-child() и :nth-last-child() можно выбрать все элементы после заданной точки. Давайте выберем все элементы кроме первых семи:
Здесь шаг не задан. Как результат, n+8 выбирает все элементы n, начиная с восьмого. Смотрите скриншот ниже.
Замечание: отрицательное смещение
Отрицательные значения и диапазоны также валидны. Запись типа :nth-child(-n+8) инвертирует выборку и выбирает первые восемь элементов.
С помощью смещения и шага можно выбрать каждый третий элемент, начиная с пятого:
Результат.
only-child
Псевдокласс only-child выбирает элемент только в том случае, если он единственный дочерний элемент. Ниже представлено два маркированных списка. В первом один элемент, во втором три:
Селектор li:only-child{color: #9c27b0;} выберет <li>Apple</li>, так как это единственный дочерний элемент первого списка. Элементы второго списка в выборку не попадают, так как там три смежных элемента. Результат показан ниже.
:empty
С помощью псевдокласса :empty можно выбрать элементы, у которых нет дочерних элементов. Псевдокласс :empty говорит сам за себя (empty от англ. «пустой»). Чтобы попасть в выборку :empty, элемент должен быть абсолютно пустым, не должно быть даже пробелов. То есть <p></p> попадает в выборку, а <p> </p> нет.
Иногда WYSIWYG редакторы вставляют пустые теги p в ваш контент. С помощью :empty и :not можно делать так, чтобы к этим элементам не применялись стили. Например, p:not(:empty).
Выбор элементов определенного типа по их индексу
Описанные в предыдущем разделе псевдоклассы выбирают элементы, если те занимают определенную позицию в дереве документа. Например, p:nth-last-child(2) выберет все теги p перед последним внутри родительского блока.
В этом разделе мы поговорим о типизированных индексных псевдоклассах. Эти псевдоклассы также выбирают элементы по значению индекса, но выбор ограничен определенным типом. Например, нужно выбрать пятый тег p или четные h2.
Существует пять таких псевдоклассов, имена которых полностью противоположны их нетипизированным коллегам:
Грань между ними и дочерними индексными псевдоклассами тонка. Запись p:nth-child(5) находит только пятый тег p, а запись p:nth-of-type(5) находит все теги p и вычленяет среди них пятый.
Давайте создадим другой документ. В нем также 20 элементов, только некоторые — это теги p, а другие – div. Теги p со скругленными углами, смотрите скриншот ниже.
Использование first-of-type, last-of-type и only-type
С помощью :first-of-type можно выбрать первый элемент, подпадающий под селектор. Давайте изменим цвет первого p на зеленый:
Такая запись выберет все теги p, являющиеся первым дочерним элементом в родительском блоке. Смотрите скриншот ниже.
Псевдокласс :last-of-type работает схожим образом. Выбирается последний элемент в родительском блоке. Посмотреть результат можно ниже. А only-of-type выберет элемент только, если он является единственным дочерним элементом такого типа внутри родительского блока. Показано ниже.
Разберем еще один пример использования :first-of-type, на этот раз с псевдоэлементом. Помните псевдоэлемент ::first-letter, о котором мы рассказывали ранее в этой главе? Как вы помните, с его помощью создавалась первая заглавная буква для всех элементов, к которым он применялся. А что если мы ограничим его действие только на первый параграф:
На скриншоте ниже показано, что теперь только у первого параграфа заглавная буква, несмотря на наличие заголовка перед параграфом.
webformyself.com
Тип псевдокласса
Назначение: псевдоклассы.
Применяется: ко всем элементам.
Значения
Значением псевдокласса :nth-last-child является указание в скобках ключевого слова, числа или арифметического выражения определяющего выборку дочерних элементов.
- even — стили будут применены к каждому четному дочернему элементу считая с последнего (2,4,6,8…).
- odd — применение стилей к каждому нечетному дочернему элементу (1,3,5,7…).
- Число — любое положительное число, указывающее номер элемента , где единица (1) соответствует последнему дочернему элементу. Кстати, :nth-last-child(1) то же самое, что и :last-child.
- Выражение — арифметическое выражение с общим видом an+b или an-b, где a и b положительные, отрицательные числа или ноль, а n — множитель, принимающий значения 0,1,2,3,4… Например, 2n+3 даст последовательность 3,5,7,9… выбранных дочерних элементов считая с последнего. Если b равно нулю, то его можно не указывать, например 2n или 7n. Если a равно нулю, то значение соответствует числу указанному в b.
Если в результате вычисления последовательности некоторые числа окажутся отрицательными или равными нулю, то браузеры их проигнорируют. Например, 2n-4 даст -4,-2,0,2,4,6…, но будут использованы только 2,4,6…
Синтаксис
селектор:nth-last-child(число | выражение | even | odd) { }Пример CSS: использование :nth-last-child
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>seodon.ru - CSS псевдокласс :nth-last-child</title> <style type="text/css"> p { margin: 0 } /* убираем внешние поля у параграфов */ div:nth-last-child(even) { color: red; /* цвет текста четных дочерних DIV */ } </style> </head> <body> <div>6 блок DIV</div> <p>2 параграф</p> <div>5 блок DIV</div> <div>4 блок DIV</div> <p>1 параграф</p> <div>3 блок DIV</div> <div>2 блок DIV</div> <div>1 блок DIV</div> </body> </html>Результат примера
Результат. Использование псевдокласса CSS :nth-last-child.
Обратите внимание, что в примере отсчет ведется с учетом всех дочерних элементов тега <BODY> и стили применяются только к тем <DIV>, которые являются четными в общем списке, идя с его конца.
Версии CSS
| Версия: | CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
| Поддержка: | Нет | Нет | Нет | Да |
spravka.seodon.ru
The :nth-last-child() is a CSS pseudo-class selector that allows you to select elements based on their index (source order) inside their container, starting from the last element upwards.
You can pass in a positive number as an argument to :nth-last-child(), which will select the one element whose index inside its parent matches the argument of :nth-last-child(). For example, li:nth-last-child(3) will select the third to last list item; that is, the third item from the bottom (starting from the last item).
You can also pass in one of two predefined keywords: even and odd. li:nth-child(even) will select all list items with even index numbers (2, 4, 6, 8, etc.), and li:nth-child(odd) will select all list items with odd index numbers (1, 3, 5, 7, etc.).
:nth-last-child() also allows you to select one or more elements using a formula (or an equation)—an+b—that is passed to it as an argument. The syntax is :nth-last-child(an+b), where you replace a and b with integer values of your own so that, after n is substituted with positive numbers (0, 1, 2, 3, etc.), the resulting number is the index of the element you want to select. For example, :nth-last-child(3n+1) will select the 1st (3*0 +1 = 1) child from the bottom, 4th (3*1 +1 = 4) child from the bottom, 7th (3*2 +1 = 7) child from the bottom, etc.and so on.
What :nth-last-child(an+b) does is it divides the container’s children into a elements (the last group taking the remainder), and then selects the bth element of each group. So, li:nth-last-child(3n+1) will divide the list items into 3 groups, put the remainder items in a fourth group (if the number of items is not divisible by 3), and then it will match the first item in each group.
For example, the following image shows the result of selecting li:nth-last-child(3n+1) in a list of items. There are 11 items in the list, and we have a = 3, so the 11 items will be divided by 3. 11/3 = 3 + 2, so there will be two items remaining which will be grouped into a last group of their own. Then, for each of the four groups, the first item will be selected. In the following image, the matching items have a khaki background.
:nth-last-child(3n+1). Items are divided into 3 groups (black border) starting from the bottom up, and you can see how the first item (also starting from the bottom up) in each group is matched, including the additional group with the remainder items. When you pass a formula to :nth-last-child(), the browser will iterate through all children of the container and then select the ones that match the formula. The list of items are treated as items of an array, where each item has an index that may or may not match the result of the formula.
tympanus.net