Псевдокласс :nth-child() | CSS справочник
CSS селекторыЗначение и применение
Псевдокласс :nth-child() позволяет выбрать дочерние элементы внутри родительского элемента в зависимости от их размещения (порядкового номера).
Применение данного псевдокласса широко распространено, он позволяет чередовать стили строк в таблицах, списках, придать стиль сочетанию дочерних элементов и так далее.
Поддержка браузерами
CSS синтаксис:
:nth-child(номер | ключевое слово | формула) { блок объявлений; }
Версия CSS
CSS3Пример использования
Стилизация по порядковому номеру
Давайте рассмотрим пример, в котором перед Вами стоит задача изменить стиль для всех элементов, которые выделены оранжевым цветом на изображении:
Пример выбора селектора дочерних элементов.
Что общего у элементов, выделенных на изображении? А общее у них то, что они выделены оранжевым цветом. Смешно? Не думаю. Общее у них все же есть, элементы <li> являются вторыми дочерними элементами своих родителей, а элемент <h3> тоже можно посчитать, и его порядковый номер будет третьим (третий дочерний элемент своего родителя <body>). Чтобы стилизовать эти элементы, нам необходимо использовать псевдокласс
Перейдем к примеру:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Псевдокласс :first-child</title> <style> /* групповой селектор, который выбирает каждый третий дочерний элемент <h3> своего родителя и каждый второй элемент <li> своего родителя */ h3:nth-child(3), li:nth-child(2) { background-color: orange; /* устанавливаем цвет заднего фона */ } </style> </head> <body> <h3>Первый заголовок h3 тега body</h3> <ul> <li>один</li> <li>два</li> <li>три</li> </ul> <h3>Второй заголовок h3 тега body</h3> <article> <h3>Первый заголовок h3 тега article</h3> <ul> <li>один</li> <li>два</li> <li>три</li> </ul> </article> </body> </html>
В этом примере с использованием псевдокласса :nth-child мы стилизовали элементы <h3> и <li>, которые имеют определённый порядковый номер дочернего элемента внутри своих родительских элементов.
Результат нашего примера:
Пример использования псевдоэлемента :last-child.Стилизация по ключевому слову
В качестве значения псевдокласса :nth-child() может выступать не только порядковый номер дочерних элементов, которые необходимо стилизовать, но и ключевые слова, которые могут определять целую группу элементов. В качестве ключевого слова можно использовать два значения:
- even (четные элементы)
- odd (нечетные элементы)
Стилизация элементов с использованием ключевых слов имеет очень широкое применение, так как вы с легкостью можете выбрать и стилизовать четные, либо нечетные дочерние элементы в документе.
Давайте для примера создадим две простые таблицы с разными стилевыми классами и рассмотрим наглядно разницу в применении значений ключевых слов псевдокласса :nth-child для HTML элемента <tr>, который определяет строку таблицы:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Стилизация четных и нечетных дочерних элементов</title> <style> .primer1 tr:nth-child(even) { /* стилизация четных дочерних элементов */ background-color: #AAA; /* устанавливаем цвет заднего фона */ } .primer2 tr:nth-child(odd) { /* стилизация нечетных дочерних элементов */ background-color: #AAA; /* устанавливаем цвет заднего фона */ } caption {/* селектор типа (выбираем HTML элемент <caption>) */ color: red; /* устанавливаем цвет текста */ } </style> </head> <body> <table class = "primer1"> <caption>Значение even (четные)</caption> <tr> <th>1 строка</th><th>Позиция</th><th>Количество</th> </tr> <tr> <td>2 строка</td><td></td><td></td> </tr> <tr> <td>3 строка</td><td></td><td></td> </tr> <tr> <td>4 строка</td><td></td><td></td> </tr> <tr> <td>5 строка</td><td></td><td></td> </tr> </table> <table class = "primer2"> <caption>Значение odd (нечетные)</caption> <tr> <th>1 строка</th><th>Позиция</th><th>Количество</th> </tr> <tr> <td>2 строка</td><td></td><td></td> </tr> <tr> <td>3 строка</td><td></td><td></td> </tr> <tr> <td>4 строка</td><td></td><td></td> </tr> <tr> <td>5 строка</td><td></td><td></td> </tr> </table> </body> </html>
В этом примере с использованием псевдокласса :nth-child() мы стилизовали четные строки первой таблицы (элементы <tr>) и нечетные во второй таблице.
Пример стилизации четных и нечетных дочерних элементов.Стилизация по простой математической формуле
Псевдокласс :nth-child() позволяет выбрать не только чётные, нечетные, или дочерние элементы с определённым порядковым номером, но и дочерние элементы, заданные по элементарной математической формуле. Давайте рассмотрим следующий селектор и разберем, что значит эта запись:
td:nth-child(4n+2) { background-color: lightblue; /* устанавливаем цвет заднего фона */ }
Этот селектор означает, что каждая четвёртая ячейка таблицы (<td>) внутри строки, начиная со второй ячейки таблицы, будет стилизована:
- 4n – каждый четвертый элемент.
- 2 – с какого элемента начинать.
В формулах допускается использование значений со знаком вычитания, но в этом как правило нет необходимости:
td:nth-child(4n-1) { background-color: lightblue; /* устанавливаем цвет заднего фона */ }
Этот селектор означает, что каждая четвёртая ячейка таблицы (<td>) внутри строки, начиная с третьей ячейки таблицы (-1 ячейки нет по объективным причинам, поэтому происходит сдвиг влево), будет стилизована:
- 4n – каждый четвертый элемент.
- -1 – с какого элемента начинать.
Давайте рассмотрим пример использования:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Стилизация дочерних элементов по математической формуле</title> <style> td, th{ /* групповым селектором выбираем заголовочные ячейки и ячейки данных */ border: 1px solid green; /* задаём сплошную границу размером 1 пиксель зеленого цвета */ width: 50px; /* устанавливаем ширину заголовочным ячейкам и ячейкам данных */ }td:nth-child(4n+2) { background-color: lightblue; /* устанавливаем цвет заднего фона */ } </style> </head> <body> <table> <tr> <th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>10</th><th>11</th><th>12</th><th>13</th><th>14</th> </tr> <tr> <td>2</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr> <td>3</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr> <td>4</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> </table> </body> </html>
В этом примере с использованием псевдокласса :nth-child мы выбрали и стилизовали каждую четвёртую ячейку таблицы (<td>) внутри строки, начиная со второй ячейки таблицы. Результат нашего примера:
Пример cтилизации дочерних элементов по математической формуле.Отличие :nth-child от :nth-of-type()
Допустим, у нас есть статья, в которой два параграфа и мы хотим стилизовать абзац №2 отлично от первого, установив задний фон цвета khaki:
<article> <p>Первый параграф </p> <p>Второй параграф</p> </article>
Допустим мы стоим перед выбором какой селектор использовать: p:nth-child(2) или p:nth-of-type(2). Попробуем проверить как работают оба варианта:
p:nth-child(2) { background-color: khaki; /* устанавливаем цвет заднего фона */ } p:nth-of-type(2) { background-color: khaki; /* устанавливаем цвет заднего фона */ }
Что не удивительно оба селектора работают для данной задачи. Но в чём разница?
Давайте рассмотрим на примере, ах да, мы добавим к нашей статье заголовок второго уровня (тег <h3>), про него мы совсем забыли:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Отличие :nth-child() от :nth-of-type()</title> <style> p:nth-of-type(2) { background-color:khaki; /* устанавливаем цвет заднего фона */ } p:nth-child(2) { background-color:khaki; /* устанавливаем цвет заднего фона */ } </style> </head> <body> <article> <h3>Заголовок второго уровня</h3> <p>Первый параграф</p> <p>Второй параграф</p> </article> </body> </html>
Сразу посмотрите на результат использования обоих селекторов в одном примере, затем будем разбираться почему так происходит:
Пример использования псевдоклассов :nth-of-type() и :nth-child().В данном примере селектор p:nth-child(2) выбирает второй дочерний элемент своего родителя, а с добавлением заголовка второго уровня (тег <h3>) порядок элементов в родительком элементе изменился и это у нас стал первый абзац, а не второй, что для нас не приемлимо. Для нашей задачи оптимальным выбором является использование селектора с псевдоклассом :nth-of-type() по той причине, что он выбирает второй элемент того же типа, а у нас количество элементов этого типа не изменилось.
Псевдокласс :nth-last-child | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.6+ | 2.1+ | 2.0+ |
Краткая информация
Версии CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Описание
Псевдокласс :nth-last-child используется для добавления стиля к элементам на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-child отсчет ведется не от первого элемента, а от последнего.
Синтаксис
элемент:nth-last-child(odd | even | <число> | <выражение>) {…}
Значения
- odd
- Все нечетные номера элементов.
- even
- Все четные номера элементов.
- число
- Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это соответствует последнему элементу в списке.
- выражение
- Задается в виде an+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2…
Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.
За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.
В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.
Значение | Номера элементов | Описание |
---|---|---|
1 | 1 | Последний элемент, является синонимом псевдокласса :last-child. |
5 | 5 | Пятый элемент с конца. |
2n | 2, 4, 6, 8, 10 | Все четные элементы, аналог значения even. |
2n+1 | 1, 3, 5, 7, 9 | Все нечетные элементы, аналог значения odd. |
3n+2 | 2, 5, 8, 11, 14 | — |
-n+3 | 3, 2, 1 | — |
5n-2 | 3, 8, 13, 18, 23 | — |
even | 2, 4, 6, 8, 10 | Все четные элементы. |
odd | 1, 3, 5, 7, 9 | Все нечетные элементы. |
Пример
HTML5CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nth-last-child</title>
<style>
table {
width: 100%; /* Ширина таблицы */
border-collapse: collapse; /* Убираем двойные границы */
border-spacing: 0; /* Расстояние между ячейками */
}
td {
border: 1px solid #333; /* Параметры рамки */
padding: 3px; /* Поля в ячейках */
border-left: 3px double #333; /* Граница слева */
}
td:nth-last-child(2n+1) {
background: #f0f0f0; /* Цвет фона */
}
td:nth-child(1) {
border: 1px solid #333; /* Параметры рамки */
background: #cfc; /* Цвет фона */
}
</style>
</head>
<body>
<table>
<tr>
<td> </td><td>2134</td><td>2135</td>
<td>2136</td><td>2137</td><td>2138</td>
</tr>
<tr>
<td>Нефть</td><td>16</td><td>34</td>
<td>62</td><td>74</td><td>57</td>
</tr>
<tr>
<td>Золото</td><td>4</td><td>69</td>
<td>72</td><td>56</td><td>47</td>
</tr>
<tr>
<td>Дерево</td><td>7</td><td>73</td>
<td>79</td><td>34</td><td>86</td>
</tr>
<tr>
<td>Камни</td><td>23</td><td>34</td>
<td>88</td><td>53</td><td>103</td>
</tr>
</table>
</body>
</html>
В данном примере псевдокласс :nth-last-child используется для выделения цветом всех нечётных колонок, начиная с последней (рис. 1).
Рис. 1. Применение псевдокласса :nth-last-child к колонкам таблицы
Псевдокласс :nth-last-child | CSS | WebReference
Псевдокласс :nth-last-child используется для добавления стиля к элементам на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-child отсчёт ведётся не от первого элемента, а от последнего.
Синтаксис ?
Селектор:nth-last-child(odd | even | <число> | <выражение>) {...}
Обозначения
Описание | Пример | |
---|---|---|
<тип> | Указывает тип значения. | <размер> |
A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
[ ] | Группирует значения. | [ crop || cross ] |
* | Повторять ноль или больше раз. | [,<время>]* |
+ | Повторять один или больше раз. | <число>+ |
? | Указанный тип, слово или группа не является обязательным. | inset? |
{A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
# | Повторять один или больше раз через запятую. | <время># |
Значения
- odd
- Все нечётные номера элементов, начиная с конца.
- even
- Все чётные номера элементов, начиная с конца.
- <число>
- Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это соответствует последнему элементу в списке.
- <выражение>
- Задаётся в виде an±b, где a и b целые числа, а n — счётчик, который автоматически принимает значение 0, 1, 2…
Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.
За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.
В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы. Отсчёт ведётся от последнего элемента.
Значение | Номера элементов | Описание |
---|---|---|
1 | 1 | Последний элемент, является синонимом псевдокласса :last-child. |
5 | 5 | Пятый элемент с конца. |
2n | 2, 4, 6, 8, 10,… | Все чётные элементы, начиная с конца; аналог значения even. |
2n+1 | 1, 3, 5, 7, 9,… | Все нечётные элементы, начиная с конца; аналог значения odd. |
3n | 3, 6, 9, 12,… | Каждый третий элемент, начиная с конца. |
3n+2 | 2, 5, 8, 11, 14,… | Каждый третий элемент, начиная с предпоследнего. |
n+4 | 4, 5, 6, 7, 8,… | Все элементы, кроме последних трёх. |
-n+3 | 3, 2, 1 | Последние три элемента. |
5n-2 | 3, 8, 13, 18, 23,… | — |
even | 2, 4, 6, 8, 10,… | Все чётные элементы, начиная с конца. |
odd | 1, 3, 5, 7, 9,… | Все нечётные элементы, начиная с конца. |
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nth-last-child</title>
<style>
table {
width: 100%; /* Ширина таблицы */
border-collapse: collapse; /* Убираем двойные границы */
border-spacing: 0; /* Расстояние между ячейками */
}
td {
border: 1px solid #333; /* Параметры рамки */
padding: 3px; /* Поля в ячейках */
border-left: 3px double #333; /* Граница слева */
}
td:nth-last-child(2n+1) {
background: #f0f0f0; /* Цвет фона */
}
td:nth-child(1) {
border: 1px solid #333; /* Параметры рамки */
background: #cfc; /* Цвет фона */
}
</style>
</head>
<body>
<table>
<tr>
<td> </td><td>2134</td><td>2135</td>
<td>2136</td><td>2137</td><td>2138</td>
</tr>
<tr>
<td>Нефть</td><td>16</td><td>34</td>
<td>62</td><td>74</td><td>57</td>
</tr>
<tr>
<td>Золото</td><td>4</td><td>69</td>
<td>72</td><td>56</td><td>47</td>
</tr>
<tr>
<td>Дерево</td><td>7</td><td>73</td>
<td>79</td><td>34</td><td>86</td>
</tr>
<tr>
<td>Камни</td><td>23</td><td>34</td>
<td>88</td><td>53</td><td>103</td>
</tr>
</table>
</body>
</html>
В данном примере псевдокласс :nth-last-child используется для выделения цветом всех нечётных колонок, начиная с последней (рис. 1).
Рис. 1. Применение псевдокласса :nth-last-child к колонкам таблицы
Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 06.08.2018
Редакторы: Влад Мержевич
Псевдокласс :nth-of-type | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.6+ | 2.1+ | 2.0+ |
Краткая информация
Версии CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Описание
Псевдокласс :nth-of-type используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов.
Синтаксис
элемент:nth-of-type(odd | even | <число> | <выражение>) {…}
Значения
- odd
- Все нечетные номера элементов.
- even
- Все четные номера элементов.
- число
- Порядковый номер указанного элемента. Нумерация начинается с 1, это будет первый элемент в списке.
- выражение
- Задается в виде an+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2…
Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.
За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.
В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.
Значение | Номера элементов | Описание |
---|---|---|
1 | 1 | Первый элемент. |
5 | 5 | Пятый элемент. |
2n | 2, 4, 6, 8, 10 | Все четные элементы, аналог значения even. |
2n+1 | 1, 3, 5, 7, 9 | Все нечетные элементы, аналог значения odd. |
3n+2 | 2, 5, 8, 11, 14 | — |
-n+3 | 3, 2, 1 | — |
5n-2 | 3, 8, 13, 18, 23 | — |
even | 2, 4, 6, 8, 10 | Все четные элементы. |
odd | 1, 3, 5, 7, 9 | Все нечетные элементы. |
Пример
HTML5CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nth-of-type</title>
<style>
img:nth-of-type(2n+1) { float: left; }
img:nth-of-type(2n) { float: right; }
</style>
</head>
<body>
<p><img src="images/left.gif" alt="">
<img src="images/right.gif" alt=""></p>
<h2>Исторический турнир</h2>
</body>
</html>
В данном примере нечётные картинки выравниваются по левому краю окна, а чётные картинки по правому (рис. 1).
Рис. 1. Применение псевдокласса :nth-of-type к изображениям
Использование псевдокласса :nth-child — Демонстрации — HTML Academy
Что такое :nth-child
?
:nth-child
— это псевдокласс, который позволяет выбирать элементы по их порядковому номеру. Например, можно выбрать пятый абзац и применить к нему нужные стили, или выбрать все четные строки в таблице и сделать её полосатой.
В этой демонстрации мы детально разберем механизм работы этого селектора. Начнем с исходной html-разметки. Работать будем с обычным списком.
Подопытный объект готов
Зададим стили для списка и его элементов. Теперь у нас есть наглядная сетка, над которой и будем экспериментировать.
:nth-child(4)
Самый простой вариант использования данного селектора: задать конкретное число. Наш селектор:
li:nth-child(4)
Он обозначает: «Выбрать четвёртый по счету элемент списка». Как видите, подсветился нужный элемент.
Несколько :nth-child
(номер)
Чтобы выбрать небольшое количество элементов, можно несколько раз использовать :nth-child
с нужными номерами.
Однако, если количество таких элементов велико, то такой подход не сработает. Представьте, сколько CSS-кода нужно, чтобы выделить все чётные элементы в примере.
Не забывайте экспериментировать. Поменяйте номера в CSS-коде, чтобы подсветить другие элементы.
:nth-child(2n)
В общем виде значение этого псевдокласса задаётся с помощью выражения: an+b
, где a
и b
— целые числа, а n
— счетчик, принимающий целые значения от 0 и больше: 0,1,2,3…
Если после вычисления выражения браузер находит элемент с полученным номером, то он применяет к нему стили. Рассмотрим пример вычисления номеров для :nth-child(2n)
.
1. n=0; 2*0 = 0; нет элементов
2. n=1; 2*1 = 2; 2-ой элемент
3. n=2; 2*2 = 4; 4-й элемент
:nth-child(even)
Выражение :nth-child(2n)
соответствует всем чётным элементам. Для чётных элементов существует также специальное ключевое слово even
.
:nth-child(2n+1)
Посчитаем номера для :nth-child(2n+1)
.
1. n=0; 2*0 + 1 = 1; 1-ый элемент
2. n=1; 2*1 + 1 = 3; 3-ий элемент
3. n=2; 2*2 + 1 = 5; 5-ый элемент
...
Т.е. все нечётные элементы.
:nth-child(odd)
Для нечётных элементов тоже существует ключевое слово: odd
.
:nth-child(odd)
вместе с :nth-child(even)
Используя разные стили для чётных и нечётных элементов, можно создавать интересные визуальные эффекты. Именно таким образом, с помощью чистого CSS, делают полосатые таблицы.
:nth-child(3n-1)
Рассчитаем выражение посложнее :nth-child(3n-1)
.
1. n=0; 3*0 - 1 = -1; нет элементов
2. n=1; 3*1 - 1 = 2; 2-ой элемент
3. n=2; 3*2 - 1 = 5; 5-ый элемент
...
Поэкспериментируйте с выражением в стилях.
:nth-child(n+8)
Если использовать большое положительное число b
в формуле an+b
, то можно выделять все элементы, за исключением начальных. И чем больше b
, тем больше начальных пропускается. Расчет для :nth-child(n+8)
:
1. n=0; 0+8 = 8; 8-ой элемент
2. n=1; 1+8 = 9; 9-ой элемент
3. n=2; 2+8 = 10; 10-ый элемент
...
:nth-child(-n+14)
Можно использовать отрицательный n
. Расчёт для :nth-child(-n+14)
:
1. n=0; 0+14 = 14; 14-ый элемент
2. n=1; -1+14 = 13; 13-ый элемент
...
15. n=14; -14+14 = 0; нет совпадений
Т.е. :nth-child(n+8)
означает не выделять 7 элементов вначале, а все остальное выделить. :nth-child(-n+14)
обозначает выделить 14 элементов в начале, а все остальное не выделять.
Комбинирование выражений
На предыдущих шагах мы с помощью разных выражений выделяли разные множества элементов. Существует возможность задавать множество с помощью комбинирования выражений.
Например: :nth-child(n+8):nth-child(-n+14)
. Итоговое множество получается как пересечение двух исходных:
:nth-child(n+8) выделит: 8-21
:nth-child(-n+14) выделит: 1-14
на пересечении 1-14 и 8-21: 8-14
:nth-child(n+4):nth-child(-n+18)
Комбинируя выражения, мы можем задавать произвольные диапазоны элементов. Можно немного расширить выделение из предыдущего шага.
Сдвинем левую границу: :nth-child(n+8)
→ :nth-child(n+4)
Сдвинем правую границу: :nth-child(-n+14)
→ :nth-child(-n+18)
Попробуйте поизменять размер выделения
:nth-child(n+4):nth-child(-n+18):nth-child(odd)
Можно комбинировать более двух выражений. Выражение в заголовке обозначает: «взять элементы с 4 по 18 включительно и среди них выделить только нечётные».
Два сложных множества
Мы создали множество «элементы с 4 по 18 включительно, нечётные».
Создадим второе множество «элементы с 4 по 18 включительно, чётные».
Вот такой интересный псевдокласс :nth-child
, с помощью которого можно выделять практически любые множества элементов, используя их порядковый номер.
Псевдокласс :nth-of-type
:nth-of-type
работает почти так же, как и :nth-child
. Разница заключается в том, что он учитывает тип элемента.
Для того, чтобы поэкспериментировать с этим псевдоклассом, изменим код примера. Вначале в HTML коде создадим список из двух элементов: span
и strong
. И обернём этот список в контейнер.
Второй подопытный готов
С помощью CSS оформим список. span
будут лежачими прямоугольниками, а strong
будут стоячими прямоугольниками.
Приступаем к экспериментам.
:nth-of-type(3)
Попробуем простейшие выражения с числом.
Выделить третий span
:
span:nth-of-type(3)
Выделить пятый strong
:
strong:nth-of-type(5)
:nth-of-type(odd)
Выражения с чётными/нечётными элементами.
Выделить нечётные span
:
span:nth-of-type(odd)
Выделить чётные strong
:
strong:nth-of-type(even)
Комбинированные :nth-of-type
Выделить нечётные span
из первых четырёх:
span:nth-of-type(odd):nth-of-type(-n+4)
Выделить чётные strong
из идущих после четвёртого:
strong:nth-of-type(even):nth-of-type(n+5)
Отличие :nth-of-type
от :nth-child
Значения для двух псевдоклассов задаются абсолютно одинаково. Отличие заключается в том, что нумерация элементов при использовании :nth-of-type
идёт только между потомками одного родителя заданного типа. Нумерация элементов при использовании :nth-child
идёт между всеми потомками одного родителя.
Продемонстрируем это отличие еще раз. span:nth-of-type(odd)
подсвечивает только нечётные лежачие прямоугольники.
Отличие :nth-of-type
от :nth-child
Если для этого же кода использовать span:nth-child(odd)
, то подсвечиваются все лежачие прямоугольники.
Это связано с тем, что после каждого элемента span
, расположен strong
, который влияет на счетчик псевдокласса :nth-child
.
Практический пример использования :nth-child
Иногда дизайнеры рисуют каталог товаров, в котором товары расположены в несколько колонок, причем края колонок выровнены строго по краям родительского блока.
Сверстать такой блок не проблема. Можно задать разные классы элементам левой и правой колонок и пусть программист мучается при генерации правильного html кода страницы.
Но намного лучше сверстать такой список товаров, не используя разные классы. На этом шаге задан исходный HTML.
Практический пример: оформляем товары
Зададим базовый CSS код нашего каталога. Пунктирные линии справа и слева — это границы блока, по которым должны выравниваться края колонок.
Нужно создать двухколончатую сетку, в которой ширина каждой колонки составляет 45% от ширины родительского блока. Правая колонка прижата к правому краю, а левая к левому. Приступим.
Практический пример: сетка
Чтобы получить нужную сетку, достаточно задать следующие проценты:
45% - ширина левой колонки
10% - отступ справа левой колонки
45% - ширина правой колонки
Итого: 45% + 10% + 45% = 100%
Мы использовали box-sizing:border-box;
, чтобы на ширину колонок не влияли границы. Товары расположились в одну колонку, зато она правильной ширины.
Практический пример: две колонки
Чтобы появилась вторая колонка, нужно избавиться от отступа справа у каждого второго элемента списка.
Мы не используем разные классы для разных элементов, поэтому на помощь приходит псевдокласс li:nth-child(even)
. С помощью него удаляются лишние отступы и идеальная сетка готова.
Практический пример: три колонки
При таком подходе можно изменять количество колонок только с помощью CSS. То есть, HTML код страницы, а значит и логику генерации кода на сервере менять не надо.
Сначала изменим проценты:
30% - ширина колонок
5% - отступы справа у 1 и 2 колонки
Итого: 30% + 5% + 30% + 5% + 30% = 100%
Практический пример: три колонки готовы
Затем нужно удалить отступ справа у каждого третьего элемента. Для этого используем li:nth-child(3n)
. Готово!
Отличное решение, особенно для адаптивной верстки.
Псевдокласс :nth-of-type | CSS | WebReference
Псевдокласс :nth-of-type используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов.
Синтаксис ?
Селектор:nth-of-type(odd | even | <число> | <выражение>) {...}
Обозначения
Описание | Пример | |
---|---|---|
<тип> | Указывает тип значения. | <размер> |
A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
[ ] | Группирует значения. | [ crop || cross ] |
* | Повторять ноль или больше раз. | [,<время>]* |
+ | Повторять один или больше раз. | <число>+ |
? | Указанный тип, слово или группа не является обязательным. | inset? |
{A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
# | Повторять один или больше раз через запятую. | <время># |
Значения
- odd
- Все нечётные номера элементов.
- even
- Все чётные номера элементов.
- <число>
- Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке.
- <выражение>
- Задаётся в виде an±b, где a и b — целые числа, а n — счётчик, который автоматически принимает значение 0, 1, 2…
Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.
За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.
В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.
Значение | Номера элементов | Описание |
---|---|---|
1 | 1 | Первый элемент, является синонимом псевдокласса :first-of-type. |
5 | 5 | Пятый элемент. |
2n | 2, 4, 6, 8, 10,… | Все чётные элементы, аналог значения even. |
2n+1 | 1, 3, 5, 7, 9,… | Все нечётные элементы, аналог значения odd. |
3n | 3, 6, 9, 12, 15,… | Каждый третий элемент. |
3n+2 | 2, 5, 8, 11, 14,… | Каждый третий элемент, начиная со второго. |
n+4 | 4, 5, 6, 7, 8,… | Все элементы, кроме первых трёх. |
-n+3 | 3, 2, 1 | Первые три элемента. |
5n-2 | 3, 8, 13, 18, 23,… | — |
even | 2, 4, 6, 8, 10,… | Все чётные элементы. |
odd | 1, 3, 5, 7, 9,… | Все нечётные элементы. |
Допустимо комбинировать два псевдокласса :nth-of-type для выбора диапазона элементов. Здесь будут выбраны все элементы со второго по пятый.
:nth-of-type(n+2):nth-of-type(-n+5) { … }
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nth-of-type</title>
<style>
img:nth-of-type(2n+1) { float: left; }
img:nth-of-type(2n) { float: right; }
</style>
</head>
<body>
<p><img src="image/left-knight.gif" alt="">
<img src="image/right-knight.gif" alt=""></p>
<h2>Исторический турнир</h2>
</body>
</html>
В данном примере нечётные картинки выравниваются по левому краю окна, а чётные картинки по правому (рис. 1).
Рис. 1. Применение псевдокласса :nth-of-type к изображениям
Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 06.08.2018
Редакторы: Влад Мержевич
Как работает CSS-селектор nth-child | CSS-Tricks по-русски
Как работает CSS-селектор nth-child
В CSS существует селектор, если быть более точным, псевдо-селектор, называемый nth-child. Пример его использования:
ul li:nth-child(3n+3) {
color: #ccc;
}
Вышеприведённый CSS делает следующее: применяет стиля для каждого третьего элемента ненумерованного списка. А именно 3-го, 6-го, 9-го, 12-го и т.д. Но как это работает? А также какую выгоду можно извлечь используя nth-child?
Основной смысл заключается в выражении в скобках. nth-child принимает два ключевых слова: even (чётный) и odd (нечётный). Смысл их абсолютно ясен. Even выбирает чётные элементы (2, 4, 6), odd — нечётные (1, 3, 5).
Как показано в примере выше, nth-child может обрабатывать выражения. Какое самое простое возможное выражение? Просто число. Если вы напишите какое-нибудь число в скобках, то будет выбран один единственный элемент. Например, выберем пятый элемент списка:
ul li:nth-child(5) {
color : #ccc;
}
Вернёмся к нашему первому примеру, в котором мы использовали выражение (3n+3). Как он работает? Почему он выбирает каждый третий элемент? Вся суть в переменной n. Она принимает целые значения от нуля и больше. Давайте рассмотрим подробнее:
(3 x 0) + 3 = 3 = 3-ий элемент
(3 x 1) + 3 = 6 = 6-ой элемент
(3 x 2) + 3 = 9 = 9-ый элемент
и т.д.
Теперь попробуем следующее выражение: nth-child(2n+1):
(2 x 0) + 1 = 1 = 1-ый элемент
(2 x 1) + 1 = 3 = 3-ий элемент
(2 x 2) + 1 = 5 = 5-ый элемент
и т.д.
В итоге получили тоже самое что и в случае с odd, таким образом нет нужды часто использовать такое выражение. Более того, наш первый пример тоже можно упростить и использовать вместо оригинального выражения (3n+3), выражение (3n):
(3 x 0) + 0 = 0 = нет соответствия
(3 x 1) + 0 = 3 = 3-ий элемент
(3 x 2) + 0 = 6 = 6-ой элемент
и т.д.
Как видите, результат тот же, но не надо писать «+3». Также мы можем использовать отрицательные значения в выражении. Например, 4n-1:
(4 x 0) - 1 = -1 = нет соответствия
(4 x 1) - 1 = 3 = 3-ий элемент
(4 x 2) - 1 = 7 = 7-ой элемент
и т.д.
Использование отрицательных значений для коэффициента при n, выглядит слегка странно, потому что в случае отрицательного результата не будет найдено соответствие. Вам надо будет постоянно изменять выражение, чтобы добавить положительных элементов. Как оказалось, этот подход очень удобен для выбора первых n элементов. Рассмотрим пример с «-n+3»:
-0 + 3 = 3 = 3ий элемент
-1 + 3 = 2 = 2-ой элемент
-2 + 3 = 1 = 1-ый элемент
-3 + 3 = 0 = нет соответствия
Кроссбраузерность
nth-child является одним из тех самых несчастных атрибутов, которые являются полностью кроссбраузерными, за исключением абсолютного нуля в IE, даже 8-ой версии. Поэтому, когда речь заходит о его использовании, то если ожидаемый результат — это в некотором роде визуальный эффект (например раскраска строк некой таблицы), то это идеальный подход. Но, вероятно, не стоит использовать его для чего-то более важного, что может повлиять, например, на корректность вёрстки.
Конечно, если вы используете jQuery, то вам не стоит переживать по этому поводу, так как jQuery работает даже в Internet Explorer.
Ну и напоследок
Вы можете поиграть с различными выражениями для селектора на страничке с примером.