• HTML
  • Учебник HTML
  • Справочник тегов
  • Атрибуты событий
  • Глобальные атрибуты
  • Коды языков
  • Мнемоники
  • Цвета
  • Тесты знаний
• CSS
  • Учебник CSS
  • Справочник свойств
  • Селекторы
  • Функции
  • Правила
  • Flexbox генератор
  • Grid генератор
  • Учебник LESS
• JavaScript
  • Интерфейсы веб API
  • Объект Array
  • Объект Date
  • Объект Function
  • Объект Global
  • Объект JSON
  • Объект Math
  • Объект Number
  • Объект Object
  • Объект RegExp
  • Объект Promise
  • Объект String
• jQuery
  • Селекторы
  • События
  • Методы DOM
  • Перемещения
  • Утилиты
  • Эффекты
  • AJAX
  • Объект Callbacks
  • Объект Deferred

HTML

• HTML учебник

Псевдоклассы nth-child и nth-last-child CSS

Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в родительском элементе. В значении может быть указан как порядковый номер элемента:

ul li:nth-child(1) {...}

Так и выражение, которое задается в виде an+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2 и т.д.

:nth-child(3n+2) или :nth-child(-n+3)

Также доступны значении odd и even, которые определяют четные и нечетные элементы.

Псевдокласс :nth-last-child делает все тоже самое, только с конца списка элементов.

Примеры использования у списка <ul>:

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	...
	<li>30</li>
</ul>

1

Нечётные

Все нечётные номера элементов: 1, 3, 5, 7…

ul li:nth-child(odd) {
	background: skyblue;
}

/* или */
ul li:nth-child(2n+1) {
	background: skyblue;
}

2

Чётные

Чётные номера элементов: 2, 3, 6, 8…

ul li:nth-child(even) {
	background: skyblue;
}

/* или */
ul li:nth-child(2n) {
	background: skyblue;
}

3

Определенные номера

Пример группировки псевдоклассов и выбор элементов 2, 4, 6, 9.

ul li:nth-child(2), ul li:nth-child(4), ul li:nth-child(6), ul li:nth-child(9) {
	background: skyblue;
}

4

Каждый третий элемент

Элементы 3, 6, 9, 12…

ul li:nth-child(3n) {
	background: skyblue;
}

5

Один через три

Элементы 1, 5, 9, 13…

ul li:nth-child(4n+1) {
	background: skyblue;
}

6

Два через два

Элементы 1, 2, 5, 6, 9, 10…

ul > li:nth-child(4n+1), ul li:nth-child(4n+2) {
	background: skyblue;
}

7

Два через три

Элементы 1, 2, 6, 7, 11, 12…

ul > li:nth-child(5n+1), ul li:nth-child(5n+2) {
	background: skyblue;
}

8

Три через три

Элементы 1, 2, 3, 7, 8, 9…

ul > li:nth-child(6n+1), ul li:nth-child(6n+2), ul li:nth-child(6n+3) {
	background: skyblue;
}

CSS псевдокласс nth-child. Как выбрать все четные элементы списка, таблицы, блока, и.т.д.

Иногда, при оформлении страниц, хочется немного «автоматизировать» стили CSS.

Одна из проблем, с которой можно столкнуться: как выбрать все четные элементы списка, таблицы, блока, и др. элементов на веб-странице.

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

Мне бы хотелось рассказать о методе, который основывается на использовании псевдокласса nth-child.

Этот псевдокласс появился в CSS3, поэтому нужно иметь в виду, что на старых браузерах, это может не работать. Но, возможности, которые появляются при его использовании, очень впечатляют.

Одним из способов применения этого псевдокласса на практике является выборка всех четных элементов, которые располагаются в дереве HTML-документа.

Есть несколько вариантов, как это можно реализовать. Давайте их разберем.

1 вариант. Использовать параметр even. 

Предположим, что у нас есть вот такой список:

<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>
            <li>Элемент 10</li>
</ul>

Чтобы выделить красным цветом все четные элементы в этом списке, нужно добавить стиль CSS:

ul li:nth-child(even) {color:#F00;}

В итоге, получиться следующая картина.

Even – это ключевое слово, которое означает, что будут выбраны четные элементы.

Красивое решение, не правда ли? Всего одна строка CSS стилей.

2 вариант. Использовать параметр 2n. 

Этот вариант можно использовать, как альтернативный. Значение 2n означает, что будет выбран каждый второй элемент, а каждый второй элемент, по сути, является четным.

Вот как это может быть использовано применительно для таблиц.

<table>
  <tr>
    <td>Столбец 1</td>
    <td>Столбец 2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>7</td>
  </tr>
  <tr>
    <td>8</td>
    <td>8</td>
  </tr>
  <tr>
    <td>9</td>
    <td>9</td>
  </tr>
</table>

И стили CSS

tr:nth-child(2n) {color:#F00;}

Текст в каждом четном элементе tr стал красным.

Использование псевдокласса CSS :nth-child

Псевдоклассы можно использовать для выбора определенного элемента из списка. В этом уроке мы расскажем о псевдоклассе :nth-child, что можно создать с помощью этого псевдокласса и чем он может быть полезен. Псевдокласс :nth-child позволяет выбрать группу элементов с общими свойствами. Наиболее часто он используется для выбора четных или нечетных элементов из группы. Нередко его используют, чтобы таблица выглядела, как зебра, задавая разные цвета фона четным и нечетным рядам.

tr:nth-child(odd)
{
    // background color
}

tr:nth-child(even)
{
    // another background color
}

Еще псевдокласс :nth-child позволяет разделить элементы с общим свойством на группы и затем выбрать определенный элемент из каждой группы, используя следующий синтаксис:

Здесь a определяет количество элементов в группе, а b определяет, какой элемент из группы будет выбран. Если использовать значение 2n+1, то элементы будут разделены на группы по два, и будут выбраны первые элементы каждой группы, т. е., элементы с нечетным порядковым номером. Если использовать значение 2n+2, то элементы снова будут разделены на группы по два, но теперь будут выбраны вторые элементы каждой группы, т. е., элементы с четным порядковым номером.

Еще в качестве примера для понимания псевдокласса:nth-child мы выберем с его помощью каждый четвертый элемент, т. е., четвертый, восьмой, двенадцатый, шестнадцатый и т. д. Для этого разделим элементы на группы по четыре и затем выберем каждый четвертый элемент.

tr:nth-child(4n+4)
{
    // задаем стили каждому четвертому элементу
}

Ниже приведен список из десяти элементов, и мы воспользуемся псевдоклассами :nth-child, :first-child и :last-child, чтобы выбрать элементы, которые хотим выделить.

Использование псевдокласса CSS :nth-child для выбора единственного элемента 

Задавая псевдоклассу :nth-child значение в виде числа, можно выбрать, к какому потомку из группы обратиться:

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10

#selector_example li:nth-child(4){
     font-size:150%;
     font-weight:bold;
     color:green;
}

Использование псевдокласса CSS :nth-child для выбора всех элементов, кроме первых пяти 

Если задать псевдоклассу :nth-child значение в виде n+ число, можно выбрать все элементы, начиная с элемента с этим порядковым номером:

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10

#selector_example li:nth-child(n+6){
     font-size:150%;
     font-weight:bold;
     color:green;
}

Использование псевдокласса CSS :nth-child для выбора только первых пяти элементов 

Когда мы задаем псевдоклассу :nth-child значение в виде отрицательного n+ число, мы выбираем все элементы, находящиеся до элемента с этим порядковым номером:

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10

#selector_example li:nth-child(-n+5){
     font-size:150%;
     font-weight:bold;
     color:green;
}

Использование псевдокласса CSS :nth-child для выбора каждого третьего элемента 

Псевдокласс :nth-child можно использовать, чтобы выбрать последовательность элементов, задавая, сколько элементов в последовательности и порядковый номер нужного элемента. Если задать значение 3n+1, будет выбран каждый третий элемент, начиная с первого:

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10 

#selector_example li:nth-child(3n+1){
     font-size:150%;
     font-weight:bold;
     color:green;
} 

Использование псевдокласса CSS :nth-child для выбора только нечетных элементов 

Можно задать псевдоклассу :nth-child значение odd (нечетный), чтобы выбрать все элементы с нечетными порядковыми номерами. Т.е., первый, третий, пятый, седьмой, девятый и т. д элементы. Это очень удобно, чтобы задавать цвета соседним рядам таблицы.

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10

#selector_example li:nth-child(odd){
     font-size:150%;
     font-weight:bold;
     color:green;
}

Использование псевдокласса CSS :nth-child для выбора только четных элементов 

Этот пример показывает то же, что и прошлый, но на этот раз выбраны все элементы с четными порядковыми номерами. Т.е., второй, четвертый, шестой, восьмой, десятый и т. д. элементы:

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10 

#selector_example li:nth-child(even){
     font-size:150%;
     font-weight:bold;
     color:green;
}

Использование псевдокласса CSS :first-child для выбора первого элемента 

Другой псевдокласс :first-child выберет первый элемент:

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10

#selector_example li:first-child{
     font-size:150%;
     font-weight:bold;
     color:green;
} 

Использование псевдокласса CSS :last-child для выбора последнего элемента 

Кроме псевдокласса :first-child есть псевдокласс :last-child, который выберет последний элемент из группы элементов:

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10 

#selector_example li:last-child{
     font-size:150%;
     font-weight:bold;
     color:green;
}

Использование псевдокласса CSS :nth-last-child для выбора предпоследнего элемента 

Еще можно использовать псевдокласс :nth-last-child, который совмещает в себе возможности псевдоклассов :last-child и :nth-child, чтобы начинать отсчет элементов с конца. Т.е., можно выбрать элемент, отсчитывая порядковые номера с конца группы, например, в группе из десяти элементов можно выбрать второй с конца элемент:

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10

#selector_example li:nth-last-child(2){
     font-size:150%;
     font-weight:bold;
     color:green;
} 

Ознакомьтесь с возможностями псевдокласса :nth-child  с помощью «Конструктора nth-child».

Дополнительные материалы 

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

Автор урока Paul Underwood

Перевод — Дежурка

Смотрите также:

Псевдокласс: nth-child | htmlbook.ru

Краткая информация

Версии CSS

Описание

Псевдокласс: nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.

Синтаксис

элемент: nth-child (odd | even | <число> | <выражение>) {…}

Значения

нечет

Все нечетные номера элементов.

даже

Все четные номера элементов.

число

Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке.

выражение

Задается в виде an + b, где a и b целые числа, а n — счетчик, который автоматически принимает значения 0, 1, 2 …

Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счет использования отрицательных результатов также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

В табл. 1 представлены некоторые выражения и ключевые слова, а также указаны какие номера элементов будут задействованы.

Пример

HTML5CSS3IECrOpSaFx

  

 
  
  
  <стиль>
   Таблица {
    ширина: 100%; / * Ширина таблицы * /
    граница-интервал: 0; / * Расстояние между ячейками * /
   }
   tr: nth-child (2n) {
    фон: # f0f0f0; / * Цвет фона * /
   }
   tr: nth-child (1) {
    фон: # 666; / * Цвет фона * /
    цвет: #fff; / * Цвет текста * /
   }
  
 
 
  

   

    
 
2134
 
 2135 
    
2136
2137
 
 2138 
   
   

    
Нефть
16
 
 34 
    
62
74
 
 57 
   
   

    
Золото
4
 
 69 
    
72
56
 
 47 
   
   

    
Дерево
7
 
 73 
    
79
34
 
 86 
   
   

    
Камни
23
 
 34 
    
88
53
 
 103 
   
  
 
  

В данном примере псевдокласс: используется для изменения стиля первой строки таблицы, а также для выделения цветом всех четных строк (рис.1).

Рис. 1. Применение псевдокласса: nth-child к строкам таблицы

Nth-child и nth-of-type • Про CSS

: nth-child — один из моих самых любимых селекторов, потому что с помощью него можно делать клевые разноцветные штуки собирать список элементов в группу произвольной длины и делать с ними разные интересные вещи: от полосатых таблиц до целых разноцветных дизайнов, и все это без необходимости задавать дополнительные классы или как-то менять разметку.

Вот простой пример полосатых таблиц:

Полоски облегчить продвижение глазами по длинной строке или столбцу, увеличить читабельность больших таблиц, сделать это можно всего лишь парой строчек в CSS:

 
TR: nth-child (odd) {
  фон: #EEE;
}


TD: nth-child (odd) {
  фон: #EEE;
}  

Или вот что можно сделать с обычным списком вроде такого:

Никаких дополнительных классов, все сделано только с помощью : nth-child :

Вот пример разноцветного дизайна для ЖЖ, где используется этот же эффект:

Если у вас есть ЖЖ, вы можете установить этот дизайн из каталога.

Как работает nth-child ()?

В круглых скобках задается размер цикла: например (3n) выберет каждый третий элемент. Также можно задать сдвиг вперед или назад: (3n + 1) — найдет каждый третий и сделает один шаг вперед, а (3n-2) — два шага назад от найденого. Если размер цикла не задан — (n) — выберутся все элементы списка. Если размер цикла не задан, но задано конкретное число — (5) — выберется элемент списка с этим индексом.

n-й ребенок в своем цикле считает все элементы, находящиеся на одном уровне вложенности относительно родительского элемента.

Селектор работает во всех современных браузерах с поддержкой CSS3.

Примеры

: nth-ребенок (3n)

Выбирает каждый 3-й элемент списка.

: nth-ребенок (3n + 1)

Выбирает каждый 3-й элемент списка и делает сдвиг на один шаг вперед. Таким образом можно выбрать первые элементы в каждой группе.

: nth-ребенок (даже) =: nth-child (2n)

(четное) — слово, выбирает четные элементы списка, как если бы мы задали (2n) .

: nth-ребенок (нечетное) =: nth-child (2n + 1)

(нечетное) — выберите нечетные элементы, как если бы мы задали (2n + 1) .

: nth-ребенок (3n-1) =: nth-child (3n + 2)

Выбирает каждый 3-й элемент списка и делает сдвиг на один шаг назад.

: nth-ребенок (5) =: nth-child (0n + 5)

Выберет 5-й элемент списка.

: nth-ребенок (n + 6)

Выберет все элементы начиная с 6-го.

: nth-ребенок (-n + 6)

Выберет 6 элементов с начала списка.

Сочетания селекторов

: nth-ребенок (n + 3): nth-child (-n + 8)

Выберет элементы в диапазоне от 3 до 8-ми.

: nth-ребенок (n + 4): nth-child (даже)

Выберет элементы начиная с 4-го, а затем выделит только четные из них.

: nth-child (3n + 1): nth-child (даже)

Выберет 1-й, 4-й, 7-й и 10-й элементы, а затем только четные из них.

: nth-child (n + 3): nth-child (-n + 8): nth-child (даже)

Выберет элементы с 3-го по 8-й, а затем только четные из них.

N-го типа ()

Все примеры выше сделаны на основе однородного списка, но если нам требуется выбрать, например, несколько абзацев в статье, которая содержит не только абзацы, но и заголовки?

Предположим, мы хотим покрасить нечетные абзацы, поэтому напишем что-то вроде:

но результат будет каким-то странным (слева), и если попробовать написать то же самое, но без тега (справа) — сразу становится ясно почему:

: nth-child считает все элементы, не обращая внимания на тег, хотя показывает только те, которые соответствуют заданному тегу или классу.

Чтобы выбрать только абзацы, нам потребуется другой селектор — : nth-of-type :

: nth-of-type работает также, как : nth-child , но считает только элементы заданного типа.

: nth-child удобно использовать в сочетании с Sass:

С помощью : nth-child одинаковым элементом списка заданы разноцветные рамки и разные фоновые картинки.

Используя широкие возможности этих технологий, можно делать не только забавные галереи с котятами, но и прочие нарядные штуки разной степени бесполезности (нажмите Повторить, если анимация застыла):

: nth-child — полезный селектор, который поможет разнообразить однотипным элементом сайта и тем самым без особых усилий сделает страницу интереснее для визуального восприятия.

Псевдокласс: nth-child | CSS | WebReference

Псевдокласс: nth-child используется для добавления к элементу на основе нумерации в дереве элементов.

Синтаксис

   Селектор : nth-child (odd | even | <число> | <выражение>) {...}  

Обозначения

Значения

нечетные

Все нечётные номера элементов.

даже

Все чётные номера элементов.

<число>

Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке.

<выражение>

Задаётся в виде an ± b, где a и b — целые числа, а n — счётчик, который автоматически принимает значение 0, 1, 2 …

Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an.a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

В табл. 1 представлены некоторые выражения и ключевые слова, а также указаны какие номера элементов будут задействованы.

Допустимо комбинировать два псевдокласса: nth-child для выбора диапазона элементов. Здесь будут выбраны все элементы со второго по пятый.

 : nth-child (n + 2): nth-child (-n + 5) {…}  

Пример

<стиль> Таблица { ширина: 100%; / * Ширина таблицы * / граница-интервал: 0; / * Расстояние между ячейками * / } tr: nth-child (2n) { фон: # f0f0f0; / * Цвет фона * / } tr: nth-child (1) { фон: # 666; / * Цвет фона * / цвет: #fff; / * Цвет текста * / }

	2134	2135	2136	2137	2138
Нефть	16	34	62	74	57
Золото	4	69	72	56	47
Дерево	7	73	79	34	86
Камни	23	34	88	53	103

В данном примере стиля-ребенка используется для изменения первой строки таблицы, а также для выделения цветом всех чётных строк (рис.1).

Рис. 1. Применение псевдокласса: nth-child к строкам таблицы

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Рекомендация (Рекомендация) — спецификация W3C и одобана как стандарт.
• Кандидат в рекомендации (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Предлагаемая рекомендация (Предлагаемая рекомендация) — на этом этапе представлен на рассмотрении Консультативного совета W3C для окончательного утверждения.
• Рабочий проект (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Черновик редакции (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Проект (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров следующие обозначения.

• — свойство полностью предоставленным браузером со всеми допустимыми значениями;
• — свойство браузером не воспринимается и игнорируется;
• — при работе возможно появление различных ошибок, либо свойство имеется лишь частично, например, не все допустимые значения имеют свойство не ко всем элементам, которые указаны в спецификации.

Число указывает версию, начиная с свойства, имеющего свойство.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 06.08.2018

Редакторы: Влад Мержевич

.

Псевдоклассы nth-child и nth-last-child CSS

Псевдокласс : nth-child используется для добавления к элементу на основе нумерации в родительском элементе. В значении может быть указан как порядковый номер элемента:

ul li: nth-child (1) {...}

Так и выражение, которое задается в виде an + b , где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2 и т.д.

: nth-child (3n + 2) или: nth-child (-n + 3)

Также доступны значении нечетных и четных , которые определяют четные и нечетные элементы.

Псевдокласс : nth-last-child делает все тоже самое, только с конца списка элементов.

Примеры использования у списка

:

  

 1 
 2 
 3 
 4 
 5 
...
 30 
  

1

Нечётные

Все нечётные номера элементов: 1, 3, 5, 7 …

  ul li: nth-child (odd) {
фон: небесно-голубой;
}

/ * или * /
ul li: nth-child (2n + 1) {
фон: небесно-голубой;
}  

2

Чётные

Чётные номера элементов: 2, 3, 6, 8…

  ul li: nth-child (even) {
фон: небесно-голубой;
}

/ * или * /
ul li: nth-child (2n) {
фон: небесно-голубой;
}  

3

Определенные номера

Пример группировки псевдоклассов и выбор элементов 2, 4, 6, 9.

  ul li: nth-child (2), ul li: nth-child (4), ul li: nth-child (6), ul li: nth-child (9) {
фон: небесно-голубой;
}  

4

Каждый третий элемент

Элементы 3, 6, 9, 12…

  ul li: nth-child (3n) {
фон: небесно-голубой;
}  

5

Один через три

Элементы 1, 5, 9, 13 …

  ul li: nth-child (4n + 1) {
фон: небесно-голубой;
}  

6

Два через два

Элементы 1, 2, 5, 6, 9, 10 …

  ul> li: nth-child (4n + 1), ul li: nth-child (4n + 2) {
фон: небесно-голубой;
}  

7

Два через три

Элементы 1, 2, 6, 7, 11, 12…

  ul> li: nth-child (5n + 1), ul li: nth-child (5n + 2) {
фон: небесно-голубой;
}  

8

Три через три

Элементы 1, 2, 3, 7, 8, 9 …

  ul> li: nth-child (6n + 1), ul li: nth-child (6n + 2), ul li: nth-child (6n + 3) {
фон: небесно-голубой;
}  

9

Первые десять

  ul li: nth-child (-n + 10) {
фон: небесно-голубой;
}  

10

Диапазон

C третьего по пятнадцатый:

  ul li: nth-child (n + 3): nth-child (-n + 15) {
фон: небесно-голубой;
}  

11

Все, после десятого

  ul li: nth-child (n + 11) {
фон: небесно-голубой;
}  

12

Все, кроме последнего

  ul li: nth-last-child (n + 2) {
фон: небесно-голубой;
}  

13

Последний элемент

  ul li: nth-last-child (1) {
фон: небесно-голубой;
}  

14

Последние три

  ul li: nth-last-child (-n + 3) {
фон: небесно-голубой;
}  

.

No related posts.