Nth child 1: :nth-child() — CSS: Cascading Style Sheets

Разное
15 Май, 2023
0

Содержание

Псевдокласс :nth-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+

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

Значение по умолчанию	Нет
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/css3-selectors/#nth-child-pseudo

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

Синтаксис

элемент:nth-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	1	Первый элемент, является синонимом псевдокласса :first-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-child</title>
  <style>
   table { 
    width: 100%; /* Ширина таблицы */
    border-spacing: 0; /* Расстояние между ячейками */
   }
   tr:nth-child(2n) {
    background: #f0f0f0; /* Цвет фона */
   } 
   tr:nth-child(1) {
    background: #666; /* Цвет фона */
    color: #fff; /* Цвет текста */
   } 
  </style>
 </head>
 <body>
  <table border="1">
   <tr> 
    <td>&nbsp;</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-child используется для изменения стиля первой строки таблицы, а также для выделения цветом всех четных строк (рис. 1).

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

Псевдоклассы

CSS по теме

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

Статьи по теме

Список с русскими буквами

Рецепты CSS

Использование псевдокласса :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-child() — CSS: каскадные таблицы стилей

Псевдокласс :nth-child() CSS сопоставляет элементы на основе их положения в группе братьев и сестер.

Обратите внимание, что в синтаксисе element:nth-child() количество дочерних элементов включает дочерние элементы любого типа; но это считается совпадением, только если элемент

в этой дочерней позиции имеет указанный тип элемента.

:nth-child() принимает один аргумент, описывающий шаблон для сопоставления индексов элементов в списке братьев и сестер. Индексы элементов отсчитываются от 1.

 :nth-child( [из ]?) {
  /* ... */
}

Значения ключевых слов

нечетные: Представляет элементы, чье числовое положение в ряду братьев и сестер является нечетным: 1, 3, 5 и т. д.
четный: Представляет элементы, чье числовое положение в ряду братьев и сестер четное: 2, 4, 6 и т. д.

Функциональное обозначение

<Ан+В>

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

A — целочисленный размер шага,
B — целочисленное смещение,
n — все неотрицательные целые числа, начиная с 0.

Можно прочитать как An+B -й элемент списка. A и B оба должны иметь значения .

Примеры селекторов

tr:nth-child(нечетный) или tr:nth-child(2n+1)

Представляет нечетные строки таблицы HTML: 1, 3, 5 и т. д.

tr:nth-child(четный) или tr:nth-child(2n)

Представляет четные строки таблицы HTML: 2, 4, 6 и т. д.

:n-й ребенок(7)

Представляет седьмой элемент.

:n-й ребенок (5n)

Представляет элементы 5 [=5×1], 10 [=5×2], 15 [=5×3], и т. д. Первый элемент, который будет возвращен в результате формулы 0 [=5×0], что приводит к несоответствию, поскольку элементы индексируются с 1, тогда как n начинается с 0. Сначала это может показаться странным, но это имеет больше смысла, когда B часть формулы >0 , как в следующем примере.

:n-й ребенок(n+7)

Представляет седьмой и все следующие элементы: 7 [=0+7], 8 [=1+7], 9 [=2+7], и т. д.

:n-й ребенок(3n+4)

Представляет элементы 4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [=(3×3)+4], и т. д.

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

Представляет первые три элемента. [=-0+3, -1+3, -2+3]

p:n-й ребенок(n)

Представляет каждый

элемент в группе братьев и сестер. Это выбирает те же элементы, что и простой селектор p (хотя и с более высокой специфичностью).

p:nth-ребенок(1) или p:n-й ребенок (0n+1)

Представляет каждый

, который является первым элементом в группе братьев и сестер. Это то же самое, что и селектор :first-child (и имеет ту же специфичность).

p:n-й потомок(n+8):n-й-потомок(-n+15)

Представляет с восьмого по пятнадцатый

элементов группы братьев и сестер.

Подробный пример

HTML

 
  
span:nth-child(2n+1), БЕЗ <em">> среди
  дочерние элементы.

Выбраны дети 1, 3, 5 и 7.
<дел>
  Диапазон 1!
  Диапазон 2
  Размах 3!
  Диапазон 4
  Размах 5!
  Диапазон 6
  Размах 7!

span:nth-child(2n+1), С <em">> среди дочерние элементы.

Выбраны дети 1, 5 и 7.
3 используется в подсчете, потому что это дочерний элемент, но он не выбран, потому что это не <span">>.

<дел> Размах! Размах Это `em`. Размах Размах! Размах Размах! Размах

span:nth-of-type(2n+1), С <em">> среди дочерние элементы.

Выбираются дети 1, 4, 6 и 8.
3 не используется в подсчете или выбрано, потому что это <em">>, а не <span">>, и nth-of-type выбирает только дочерние элементы этого типа. <em">> полностью пропускается и игнорируется.

<дел> Размах! Размах Это `em`. Размах! Размах Размах! Размах Размах!

CSS

 HTML {
  семейство шрифтов: без засечек;
}
охватывать,
делитель {
  отступ: 5px;
  граница: 1px сплошной зеленый;
  отображение: встроенный блок;
  нижняя граница: 3px;
}
. first span:nth-child(2n + 1),
.Второй диапазон: n-й ребенок (2n + 1),
.therth span:nth-of-type(2n + 1) {
  цвет фона: салатовый;
}

Result

Specification
Selectors Level 4 # nth-child-pseudo

BCD tables only load in the browser with JavaScript enabled. Включите JavaScript для просмотра данных.

:n-й тип , :n-й-последний-потомок

Обнаружили проблему с содержанием этой страницы?

Отредактируйте страницу на GitHub.
Сообщить о проблеме с содержимым.
Посмотреть исходный код на GitHub.

Хотите принять больше участия?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена 21 февраля 2023 г. участниками MDN.

:nth-last-child() — CSS: каскадные таблицы стилей

Псевдокласс :nth-last-child() CSS сопоставляет элементы на основе их положения в группе братьев и сестер, считая с конца.

Псевдокласс nth-last-child задается одним аргументом, который представляет шаблон для сопоставления элементов, считая с конца.

 :nth-last-child( [из ]?) {
  /* ... */
}

Значения ключевых слов

нечетное: Представляет элементы, чье числовое положение в ряду братьев и сестер является нечетным: 1, 3, 5 и т. д., считая с конца.
четный: Представляет элементы, чье числовое положение в ряду братьев и сестер четное: 2, 4, 6 и т. д., считая с конца.

Функциональное обозначение

Представляет элементы, чье числовое положение в ряду братьев и сестер соответствует шаблону An+B , для каждого положительного целого числа или нулевого значения n , где:

A — целочисленный размер шага,
B — целочисленное смещение,
n — все неотрицательные целые числа, начиная с 0.

Может быть прочитан как An+B -й элемент списка. Индекс первого элемента, считая с конца, равен 1 . A и B должны иметь <целое число> значений.

Примеры селекторов

tr:nth-last-child(нечетный) или tr:nth-last-child(2n+1)

Представляет нечетные строки таблицы HTML: 1, 3, 5 и т. д., считая с конца.

tr:n-последний-потомок(четный) или tr:n-последний-потомок(2n)

Представляет четные строки HTML-таблицы: 2, 4, 6 и т. д., считая с конца.

:n-последний-потомок(7)

Представляет седьмой элемент, считая с конца.

:n-последний-потомок(5n)

Представляет элементы 5, 10, 15 и т. д., считая с конца.

:n-последний-потомок(3n+4)

Представляет элементы 4, 7, 10, 13 и т. д., считая с конца.

:n-последний-потомок(-n+3)

Представляет последние три элемента среди группы братьев и сестер.

p:n-последний-потомок(n) или p:n-последний-потомок(n+1)

Представляет каждый

элемент среди группы братьев и сестер. Это то же самое, что и простой селектор p . (Поскольку n начинается с нуля, а последний элемент начинается с единицы, n и n+1 будут выбирать одни и те же элементы.)

p:n-последний-потомок(1) или p:n-последний-потомок(0n+1)

Представляет каждый

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

Пример таблицы

HTML

 <таблица>
  <тело>
    
      Первая строка
    
    
      Вторая строка
    
    
      Третья строка
    
    
      Четвертая строка
    
    
      Пятая линия

CSS

 таблица {
  граница: 1px сплошной синий;
}
/* Выбирает последние три элемента */
tr: n-последний-потомок (-n + 3) {
  цвет фона: розовый;
}
/* Выбирает каждый элемент, начиная со второго до последнего */
tr: n-последний ребенок (n + 2) {
  цвет синий;
}
/* Выбираем только последний второй элемент */
tr: n-последний ребенок (2) {
  вес шрифта: 600;
}

Результат

Запрос количества

Запрос количества стилизует элементы в зависимости от их количества. В этом примере элементы списка становятся красными, когда в данном списке их не менее трех. Это достигается за счет объединения возможностей nth-last-child псевдокласс и общий комбинатор братьев и сестер.

HTML

 Список из четырех элементов (стилизованный): 
<ол>
  Один
  Два
  Три
  Четыре

 Список из двух элементов (без оформления): 
<ол>
  Один
  Два

CSS

 /* Если есть хотя бы три элемента списка,
   стиль их всех */
li: n-последний ребенок (n + 3),
li:nth-last-child(3) ~ li {
  красный цвет;
}

Result

Specification
Selectors Level 4 # nth-last-child-pseudo

BCD tables only load in the browser with JavaScript enabled. Включите JavaScript для просмотра данных.

:n-й дочерний элемент , :n-й-последний тип
Количество запросов для CSS

Обнаружили проблему с содержанием этой страницы?

Отредактируйте страницу на GitHub.
No related posts.

Nth child 1: :nth-child() — CSS: Cascading Style Sheets

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

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

Версии CSS

Описание

Синтаксис

Значения

CSS по теме

Статьи по теме

Рецепты CSS

Использование псевдокласса :nth-child — Демонстрации — HTML Academy

Что такое

Подопытный объект готов

: nth-child (4)

Несколько

Комбинирование выражений

Два сложных множества

Псевдокласс

Второй подопытный готов

Комбинированные

Отличие

Отличие

Практический пример использования

Практический пример: оформляем товары

Практический пример: сетка

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

Практический пример: три колонки

Практический пример: три колонки готовы

:nth-child() — CSS: каскадные таблицы стилей

Значения ключевых слов

Функциональное обозначение

Примеры селекторов

Подробный пример

HTML

CSS

Result

Обнаружили проблему с содержанием этой страницы?

:nth-last-child() — CSS: каскадные таблицы стилей

Значения ключевых слов

Функциональное обозначение

Примеры селекторов

Пример таблицы

HTML

CSS

Результат

Запрос количества

HTML

Список из четырех элементов (стилизованный):

Список из двух элементов (без оформления):

CSS

Result

Обнаружили проблему с содержанием этой страницы?

Добавить комментарий Отменить ответ

Рубрики

Рубрики