Css каждый четный элемент: Псевдокласс :nth-child | htmlbook.ru

Css
9 Май, 2021
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+

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

Версии CSS

Описание

Псевдокласс :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 к строкам таблицы

:nth-child — CSS | MDN

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


:nth-child(4n) {
  color: lime;
}

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

Ключевые слова

odd: Описывает элементы среди группы соседних с нечётными номерами 1, 3, 5, и т. д.
even: Описывает элементы среди группы соседних с чётными номерами 2, 4, 6, и т. д.

Функциональная запись

<An+B>: Описывает элементы среди группы соседних с номерами, соответствующими паттерну An+B (для каждого целого числа n >= 0). Нумерация элементов начинается с единицы. Значения A и B должны быть <integer>s.

Формальный синтаксис

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

tr:nth-child(odd) или tr:nth-child(2n+1): Описывает нечётные строки HTML таблицы: 1, 3, 5, и т. д.
tr:nth-child(even) or tr:nth-child(2n): Описывает чётные строки HTML таблицы: 2, 4, 6, и т. д.
:nth-child(7): Описывает седьмой элемент.
:nth-child(5n): Описывает элементы с номерами 5, 10, 15, и т. д.
:nth-child(3n+4): Описывает элементы с номерами 4, 7, 10, 13, и т. д.
:nth-child(-n+3): Описывает первые три элемента среди группы соседних элементов.
p:nth-child(n): Описывает каждый элемент<p> среди группы соседних элементов. Эквивалентно простому селектору p.
p:nth-child(1) или p:nth-child(0n+1): Описывает каждый элемент <p>, являющийся первым среди группы соседних элементов. Эквивалентно селектору :first-child.

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

HTML

<h4><code>span:nth-child(2n+1)</code>, БЕЗ элемента
   <code>&lt;em&gt;</code> в группе элементов-потомков.</h4>
<p>Элементы 1, 3, 5 и 7 будут выбраны.</p>
<div>
  <span>Span 1!</span>
  <span>Span 2</span>
  <span>Span 3!</span>
  <span>Span 4</span>
  <span>Span 5!</span>
  <span>Span 6</span>
  <span>Span 7!</span>
</div>

<br>

<h4><code>span:nth-child(2n+1)</code>, С элементом
   <code>&lt;em&gt;</code> в группе элементов-потомков.</h4>
<p>Элементы 1, 5 и 7 будут выбраны.<br>
   3 используется в подсчёте потому что это элемент-потомок,
   но он не выбран потому что он не <code>&lt;span&gt;</code>.</p>
<div>
  <span>Span!</span>
  <span>Span</span>
  <em>Это `em`.</em>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
</div>

<br>

<h4><code>span:nth-of-type(2n+1)</code>, С элементом
   <code>&lt;em&gt;</code> в группе элементов-потомков.</h4>
<p>Элементы 1, 4, 6 и 8 будут выбраны.<br>
   3 не используется в подсчёте и не выбран, потому что это <code>&lt;em&gt;</code>,
   но не <code>&lt;span&gt;</code>, а <code>nth-of-type</code> выбирает только
   потомков этого типа. Элемент <code>&lt;em&gt;</code> полностью пропускается и игнорируется.</p>
<div>
  <span>Span!</span>
  <span>Span</span>
  <em>Это `em`.</em>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
</div>

CSS

html {
  font-family: sans-serif;
}

span,
div em {
  padding: 5px;
  border: 1px solid green;
  display: inline-block;
  margin-bottom: 3px;
}

.first span:nth-child(2n+1),
.second span:nth-child(2n+1),
.third span:nth-of-type(2n+1) {
  background-color: lime;
}

Результат

BCD tables only load in the browser

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

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

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

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

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


TR:nth-child(odd) {
  background: #EEE;
}


TD:nth-child(odd) {
  background: #EEE;
}

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

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

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

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

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

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

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

(5) — выберется элемент списка с этим индексом.

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

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

Примеры

:nth-child(3n)

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

:nth-child(3n+1)

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

:nth-child(even) = :nth-child(2n)

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

:nth-child(odd) = :nth-child(2n+1)

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

:nth-child(3n-1) = :nth-child(3n+2)

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

:nth-child(5) = :nth-child(0n+5)

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

:nth-child(n+6)

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

:nth-child(-n+6)

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

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

:nth-child(n+3):nth-child(-n+8)

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

:nth-child(n+4):nth-child(even)

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

:nth-child(3n+1):nth-child(even)

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

:nth-child(n+3):nth-child(-n+8):nth-child(even)

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

nth-of-type()

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

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

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

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

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

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

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

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

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

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

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

nth-child(четный) для класса css только не все узлы

Попытка только раскрасить каждый другой div класса 'story' :

<div>
    <div>odd</div>
    <div>even</div>
    <div></div>
    <div>odd</div>
    <div>even</div>
    <div></div>
    <div>odd</div>
    <div>even</div>
</div>

CSS:

.wrap-well div.story:nth-child(even) {
    background-color:#ff00ff;
}

Fiddle: http://jsfiddle.net/NF2dk/

Но, похоже, что 'clearfix' столбец также подсчитывается…

html css css-selectors
Поделиться Источник keeg 30 января 2014 в 18:31
3 ответа

3

nth-child работает не с селектором, а с элементом. Он выбирает каждый четный div независимо от состава селектора.
Вы можете использовать nth-of-type только для выбора <div> элементов и использовать другой элемент, такой как <br> для clearfix.
http://jsfiddle.net/NF2dk/1/
Поделиться Explosion Pills 30 января 2014 в 18:36

3

@Marcin и @Explosion таблетки абсолютно правы здесь, но, как я проверил ваш DOM, у вас есть последовательный шаблон происходит там, вы можете использовать соседний селектор для достижения этой цели, а не использовать nth-child или nth-of-type
.wrap-well div.story + div.story { background-color:#ff00ff; }
Демонстрация
Таким образом, он просто выполнит ту работу, которую вы хотели достичь, а также будет гораздо более совместим по сравнению с псевдосом nth
Поделиться Mr. Alien 30 января 2014 в 18:37

0

Нет ничего похожего на селектор nth-of-class() .
Самое близкое, что вы можете получить, — это nth-of-type() . Но он будет смотреть на тег элемента, а не на class , назначенный элементу.
Поделиться MarcinJuraszek 30 января 2014 в 18:33
nth-child(четный) на tablerow/data
У меня есть небольшая борьба с тем, чтобы заставить N-й ребенок(даже) css работать прямо на моей строке таблицы. Я создал fiddle для вас тоже, видите, в чем проблема: http://jsfiddle.net/jn9q8 / У меня есть такая система фильтрации, где я разделяю издателей по определенным странам. Если вы нажмете…
CSS как использовать псевдокласс: not with :nth-child
Можно ли использовать :not() с nth-child ? Я попробовал что-то подобное, но безуспешно : td:not(:nth-child(4n)){ text-align:center; } Однако это похоже работает : td:not(:first-child){ text-align:center; } Я пытаюсь выровнять по центру все столбцы таблицы, кроме 2-го и 4-го столбцов. Столбцы…
Похожие вопросы:

nth-Child CSS селекторы
У меня есть девять наборов цветовых схем, которые я хочу применить к последовательности divs. Использование :nth-child(1), :nth-child(2)… работает для первых девяти, но я бы хотел, чтобы…

Выберите каждый четный элемент после 4
Мне интересно, можно ли выбрать каждый четный элемент после 4-го элемента с помощью селектора CSS nth-child. Ниже приведено то, что у меня есть до сих пор? Есть идеи СКС .project{ @include…

css nth-child(2n+1) перекрасить css после фильтрации элементов списка
У меня есть список из 20 + пунктов. Цвет фона изменяется с помощью селектора :nth-child(2n+1). четный предмет черный, нечетный предмет белый). Когда я нажимаю кнопку, чтобы отфильтровать…

Использование: nth-child(нечетный) селектор на изображении div
У меня возникли небольшие проблемы с использованием селектора CSS :nth-child(odd) . Кажется, что он применяет правила CSS к каждому изображению, когда я выбираю его на основе класса div. Например:…

использование nth-child (n) с scss и &:nth-child для предоставления детям различных классов
Я пытаюсь делать какие-то художественные вещи, я просто раскрашиваю дивы и делаю из них линии. Сначала я делал это так <a href=’#’></a> и стайлинг через [href*=’#’] { &:after {…

nth-child(четный) на tablerow/data
У меня есть небольшая борьба с тем, чтобы заставить N-й ребенок(даже) css работать прямо на моей строке таблицы. Я создал fiddle для вас тоже, видите, в чем проблема: http://jsfiddle.net/jn9q8 / У…

CSS как использовать псевдокласс: not with :nth-child
Можно ли использовать :not() с nth-child ? Я попробовал что-то подобное, но безуспешно : td:not(:nth-child(4n)){ text-align:center; } Однако это похоже работает : td:not(:first-child){…

css селектор :nth-child (четный|нечетный) vs: nth-child(int)
У меня есть следующая проблема с псевдо-селектором CSS :nth-child , и я почти уверен, что что-то упустил. index.html <html> <head>…</head> <body> <div…

Как :nth-child(n+4): nth-child(-n+8) выбирает диапазон элементов?
Согласно http://nthmaster.com/ , при стилизации диапазона элементов N-м ребенком мы должны сделать это: :nth-child(n+4):nth-child(-n+8) Если мы используем только один :nth-child() , то мы видим, что…

nth-child(number) селектор для css не применяется
Я пытаюсь поместить 3 прямоугольных div 200*200 внутри 600*600 div. с разделением 25 пикселей . мой первый код работает fine.but, когда я пытаюсь применить nth-child(1) и nth-child(2), он не…
Использование псевдокласса :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 и nth-of-type. Значение и применение
Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.
Обозначения
Описание Пример
Указывает тип значения.
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 1 Первый элемент, является синонимом псевдокласса :first-child .
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-child для выбора диапазона элементов. Здесь будут выбраны все элементы со второго по пятый.
:nth-child(n+2):nth-child(-n+5) { … }
Пример
nth-child
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
В данном примере псевдокласс :nth-child используется для изменения стиля первой строки таблицы, а также для выделения цветом всех чётных строк (рис. 1).
Рис. 1. Применение псевдокласса:nth-child к строкам таблицы
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
Recommendation (Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor»s draft (Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации ) — первая черновая версия стандарта.
×
Псевдоклассы можно использовать для выбора определенного элемента из списка. В этом уроке мы расскажем о псевдоклассе: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».
Иногда, при оформлении страниц, хочется немного «автоматизировать» стили CSS.
Одна из проблем, с которой можно столкнуться: как выбрать все четные элементы списка, таблицы, блока, и др. элементов на веб-странице.
Можно, конечно, каждому четному элементу присвоить, какой-то определенный class, но это хорошо, когда элементов не слишком много. Добавлять это все вручную не всегда возможно и не всегда хочется.
Мне бы хотелось рассказать о методе, который основывается на использовании псевдокласса nth-child.
Этот псевдокласс появился в CSS3, поэтому нужно иметь в виду, что на старых браузерах, это может не работать. Но, возможности, которые появляются при его использовании, очень впечатляют.
Одним из способов применения этого псевдокласса на практике является выборка всех четных элементов, которые располагаются в дереве HTML-документа.
Есть несколько вариантов, как это можно реализовать. Давайте их разберем.
1 вариант. Использовать параметр even.
Предположим, что у нас есть вот такой список:
Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10
Чтобы выделить красным цветом все четные элементы в этом списке, нужно добавить стиль CSS:
Ul li:nth-child(even) {color:#F00;}
В итоге, получиться следующая картина.
Even – это ключевое слово, которое означает, что будут выбраны четные элементы.
Красивое решение, не правда ли? Всего одна строка CSS стилей.
2 вариант. Использовать параметр 2n.
Этот вариант можно использовать, как альтернативный. Значение 2n означает, что будет выбран каждый второй элемент, а каждый второй элемент, по сути, является четным.
Вот как это может быть использовано применительно для таблиц.
Столбец 1 Столбец 2&.
t;td>6
7 7
8 8
9 9
И стили CSS
Tr:nth-child(2n) {color:#F00;}
Текст в каждом четном элементе tr стал красным.
webgyry.info
Поддержка браузерами
12.0+ 9.0+ 3.5+ 4.0+ 9.6+ 3.2+
Описание
Псевдо-класс:nth-child() выбирает дочерние элементы на основе их позиции (порядкового номера) внутри родительского элемента.
Синтаксис
:nth-child(число) { свойства }
В круглых скобках указывается аргумент, который может быть числом, ключевым словом или числовым выражением в виде an+b, где a и b целые числа, а n — счётчик, автоматически принимающий целые неотрицательные значения от 0 и больше: 0, 1, 2, 3, … .
С помощью числа можно указать конкретный порядковый номер дочернего элемента, к которому необходимо применить стиль:
/* выбрать третий по счёту пункт списка */ ul li:nth-child(3) { color: red; }
Всего есть два возможных ключевых слова: odd (нечётные) и even (чётные). Они позволяют выбирать дочерние элементы имеющие чётные или нечётные порядковые номера:
/* выбрать все строки в таблице с нечётным порядковым номером */ tr:nth-child(odd) td { background-color: silver; }
Часть выражения «an» вычисляет позиции дочерних элементов по следующей формуле: число*n, так как n — счётчик, вместо него при вычислении автоматически подставляются числовые значения начиная с 0 и далее значение каждый раз увеличивается на единицу больше предыдущего: 0,1,2,3 и т.д. Допустим нам необходимо выбрать каждый третий пункт списка, для этого нам надо написать всего лишь 3n:

ul li:nth-child(3n) { color: red; }

3 * 0 = 0 — ничего не выбрано
3 * 1 = 3-ий пункт
3 * 2 = 6-ой пункт
и т.д.
Часть выражения «b» позволяет указать с какой позиции следует начинать выбор элементов. Допустим нам необходимо выбрать каждый третий пункт списка начиная со второго пункта в списке, для этого нам надо написать следующее выражение 3n + 2:
Ul li:nth-child(3n + 2) { color: red; }
Таким образом пункты списка будут выбираться по следующей формуле:
(3 * 0) + 2 = 2-ой пункт
(3 * 1) + 2 = 5-ый пункт
(3 * 2) + 2 = 8-ой пункт
и т.д.
Пример:
Пример
текст
текст
текст
текст
текст
текст
текст
текст
текст
текст
Результат данного примера:
puzzleweb.ru
Поддержка браузерами
Селектор:nth-child
— один из немногих CSS-селекторов, который почти полностью поддерживается в современных браузерах и абсолютно не поддерживается в IE, даже в IE8. Поэтому когда дело доходит до его использования, и конечный результат сделан по технологии прогрессивного улучшения — вы можете смело использовать его для некоторых оформительских элементов, вроде расцветки строк таблицы. Однако не стоит применять его в более серьезных случаях. Например, полагаться на него в раскладке сайта или удалять правое поле из каждого третьего блока в сетке три на три, чтобы они вошли в ряд.
Спасением здесь может послужить библиотека jQuery, которая реализует поддержку всех CSS-селекторов, включая:nth-child , даже в Internet Explorer.
web-standards.ru
Значение и применение
Псевдокласс :nth-child() позволяет выбрать дочерние элементы внутри родительского элемента в зависимости от их размещения (порядкового номера).
Применение данного псевдокласса широко распространено, он позволяет чередовать стили строк в таблицах, списках, придать стиль сочетанию дочерних элементов и так далее.
CSS синтаксис:
:nth-child(номер | ключевое слово | формула) { блок объявлений; }
Пример использования
Стилизация по порядковому номеру
Давайте рассмотрим пример, в котором перед Вами стоит задача изменить стиль для всех элементов, которые выделены оранжевым цветом на изображении:

Что общего у элементов, выделенных на изображении? А общее у них то, что они выделены оранжевым цветом. Смешно? Не думаю. Общее у них все же есть, элементы
являются вторыми дочерними элементами своих родителей, а элемент
тоже можно посчитать, и его порядковый номер будет третьим (третий дочерний элемент своего родителя ). Чтобы стилизовать эти элементы, нам необходимо использовать псевдокласс
:nth-child .
Перейдем к примеру:
Псевдокласс:first-child
Первый заголовок h3 тега body
Второй заголовок h3 тега body
Первый заголовок h3 тега article
:nth-child мы стилизовали элементы
и
, которые имеют определённый порядковый номер дочернего элемента внутри своих родительских элементов.
Результат нашего примера:

Стилизация по ключевому слову
В качестве значения псевдокласса :nth-child() может выступать не только порядковый номер дочерних элементов, которые необходимо стилизовать, но и ключевые слова, которые могут определять целую группу элементов. В качестве ключевого слова можно использовать два значения:
even (четные элементы)
odd (нечетные элементы)
Стилизация элементов с использованием ключевых слов имеет очень широкое применение, так как вы с легкостью можете выбрать и стилизовать четные, либо нечетные дочерние элементы в документе.
Давайте для примера создадим две простые таблицы с разными стилевыми классами и рассмотрим наглядно разницу в применении значений ключевых слов псевдокласса :nth-child для HTML элемента
, который определяет строку таблицы: Стилизация четных и нечетных дочерних элементов
Значение even (четные)
1 строка Позиция Количество
2 строка
3 строка
4 строка
5 строка
Значение odd (нечетные)
1 строка Позиция Количество
2 строка
3 строка
4 строка
5 строка
В этом примере с использованием псевдокласса :nth-child() мы стилизовали четные строки первой таблицы (элементы
) и нечетные во второй таблице.
Стилизация по простой математической формуле
Псевдокласс :nth-child() позволяет выбрать не только чётные, нечетные, или дочерние элементы с определённым порядковым номером, но и дочерние элементы, заданные по элементарной математической формуле. Давайте рассмотрим следующий селектор и разберем, что значит эта запись:
td:nth-child(4n+2) ) внутри строки, начиная со второй ячейки таблицы, будет стилизована:
4n – каждый четвертый элемент.
2
В формулах допускается использование значений со знаком вычитания, но в этом как правило нет необходимости:
td:nth-child(4n-1) { background-color: lightblue; /* устанавливаем цвет заднего фона */ }
Этот селектор означает, что каждая четвёртая ячейка таблицы (
) внутри строки, начиная с третьей ячейки таблицы (-1 ячейки нет по объективным причинам, поэтому происходит сдвиг влево), будет стилизована:
4n – каждый четвертый элемент.
-1 – с какого элемента начинать.
Давайте рассмотрим пример использования:
Стилизация дочерних элементов по математической формуле
1 2 3 4 5 6 7 8 9 10 11 12 13 14
2
3
4
В этом примере с использованием псевдокласса:nth-child мы выбрали и стилизовали каждую четвёртую ячейку таблицы (
) внутри строки, начиная со второй ячейки таблицы. Результат нашего примера:
basicweb.ru
Как работает 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.
Ну и напоследок
Вы можете поиграть с различными выражениями для селектора на страничке с примером.
www.css-tricks.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 (начиная с третьей):
Результат выполнения кода:
Пример
В селекторе можно указать диапазон элементов. Допустим, у вас есть список из 20 элементов и нужно выбрать элементы с 7 по 14 включительно. Это можно сделать вот так:
Результат выполнения кода:
code.mu
Syntax
The nth-child pseudo-class is specified with a single argument, which represents the pattern for matching elements.
Keyword values
odd Represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc. even Represents elements whose numeric position in a series of siblings is even: 2, 4, 6, etc.
Functional notation
Represents elements whose numeric position in a series of siblings matches the pattern An+B , for every positive integer or zero value of n . The index of the first element is 1 . The values A and B must both be s.
Formal syntax
:nth-child( [ of ]?)
where
= even odd
=
where
=
where
=
= «>» » » «~» » »
where
=
В 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.
Ну и напоследок
Вы можете поиграть с различными выражениями для селектора на
Описание
Псевдокласс :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 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.
HTML5 CSS3 IE Cr Op Sa Fx
nth-child
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
В данном примере псевдокласс :nth-child используется для изменения стиля первой строки таблицы, а также для выделения цветом всех четных строк (рис. 1).
Существует такой селектор, точнее псевдокласс, называемый: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 и приведенного алгебраического уравнения. Подумайте об n , как о начинающемся с нуля множестве целых чисел. Потом дополните уравнение. Так 3n это 3×n , а все уравнение вместе это (3×n)+3 . Теперь, подставляя вместо n числа больше или равные нулю, мы получим:
(3 × 0) + 3 = 3 = 3-й элемент
(3 × 1) + 3 = 6 = 6-й элемент
(3 × 2) + 3 = 9 = 9-й элемент и т.д.
А как насчёт:nth-child(2n+1) ?
(2 × 0) + 1 = 1 = 1-й элемент
(2 × 1) + 1 = 3 = 3-й элемент
(2 × 2) + 1 = 5 = 5-й элемент и т.д.
Так, стоп! Это ведь то же самое, что и odd . Тогда, возможно, не стоит использовать это выражение? Но разве в этом случае мы не подвергаем наш первый пример излишнему усложнению? Что, если вместо 3n+3 мы запишем 3n+0 или ещё проще 3n ?
(3 × 0) = 0 = ничего нет
(3 × 1) = 3 = 3-й элемент
(3 × 2) = 6 = 6-й элемент
(3 × 3) = 9 = 9-й элемент и т.д.
Итак, как вы можете видеть, результат получится такой же, а значит, нет необходимости в +3 . Мы можем использовать и отрицательные значения n , с таким же успехом, как и вычитание в уравнениях. Например, 4n-1:
(4 × 0) – 1 = –1 = ничего нет
(4 × 1) – 1 = 3 = 3-й элемент
(4 × 2) – 1 = 7 = 7-й элемент и т.д.
Использование -n может показаться странным — ведь если конечный результат отрицательный, то никакие элементы в выборку не попадут. Но если дополнить уравнение и снова сделать результат положительным, то выборка окажется довольно интересной: при помощи неё можно будет получить первые n элементов, например так: -n+3:
–0 + 3 = 3 = 3-й элемент
–1 + 3 = 2 = 2-й элемент
–2 + 3 = 1 = 1-й элемент
–3 + 3 = 0 = ничего нет и т.д.
На SitePoint есть хороший справочник с милой табличкой , которую я бесстыдно опубликую здесь:
n 2n+1 4n+1 4n+4 4n 5n-2 -n+3
0 1 1 4 – – 3
1 3 5 8 4 3 2
2 5 9 12 8 8 1
3 7 13 16 12 13 –
4 9 17 20 16 18 –
5 11 21 24 20 23 –
Поддержка браузерами
Селектор:nth-child — один из немногих CSS-селекторов, который почти полностью поддерживается в современных браузерах и абсолютно не поддерживается в IE, даже в IE8. Поэтому когда дело доходит до его использования, и конечный результат сделан по технологии прогрессивного улучшения — вы можете смело использовать его для некоторых оформительских элементов, вроде расцветки строк таблицы. Однако не стоит применять его в более серьезных случаях. Например, полагаться на него в раскладке сайта или удалять правое поле из каждого третьего блока в сетке три на три, чтобы они вошли в ряд.
Использование псевдокласса 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
Перевод — Дежурка
Смотрите также:
CSS: селектор nth-child ()

Пример
Укажите цвет фона для каждого элемента
, который является вторым дочерним элементом его родитель:
p: nth-ребенок (2) {
фон: красный;
}
Попробуй сам »
Дополнительные примеры «Попробуйте сами» ниже.
Определение и использование
Селектор : nth-child ( n ) соответствует каждому элементу, который является n -м дочерним элементом, независимо от тип своего родителя.
n может быть числом, ключевым словом или формулой.
Совет: Посмотрите на: nth-of-type () селектор для выбора элемента, который является n -м потомком, определенного тип своего родителя.
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую селектор.
Селектор
: nth-child () 4.0 9,0 3,5 3,2 9,6
Синтаксис CSS
: nth-child ( номер ) {
объявления css ;
} Демо
Другие примеры
Пример
Четные и нечетные ключевые слова, которые могут использоваться для сопоставления дочерних элементов, индекс которых нечетное или четное (индекс первого потомка равен 1).
Здесь мы указываем два разных цвета фона для нечетных и четных элементов p:
p: nth-child (нечетный) {
фон: красный;
}
p: nth-child (четный) {
фон: синий;
}
Попробуй сам »
Пример
По формуле ( и + b ).Описание: a представляет собой размер цикла, n — счетчик (начинается с 0), а b — значение смещения.
Здесь мы указываем цвет фона для всех элементов p, индекс которых равен кратно 3:
p: n-й ребенок (3n + 0) {
фон: красный;
}
Попробуй сам »
CSS: селектор nth-of-type ()

Пример
Укажите цвет фона для каждого элемента
, который является вторым элементом p своего родителя:
p: n-й тип (2) {
фон: красный;
}
Попробуй сам »
Дополнительные примеры «Попробуйте сами» ниже.
Определение и использование
Селектор : nth-of-type ( n ) соответствует каждому элементу, который является n -м дочерним элементом определенного типа его родитель.
n может быть числом, ключевым словом или формулой.
Совет: Посмотрите на селектор: nth-child () для выбора элемента, который является n -м потомком, независимо от тип своего родителя.
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую селектор.
Селектор
: nth-of-type () 4,0 9,0 3,5 3,2 9,6
Синтаксис CSS
: nth-of-type ( номер ) {
объявления css ;
} Демо
Другие примеры
Пример
Четные и нечетные ключевые слова, которые могут использоваться для сопоставления дочерних элементов, индекс которых нечетное или четное (индекс первого потомка равен 1).
Здесь мы указываем два разных цвета фона для нечетных и четных элементов p:
p: nth-of-type (нечетный) {
фон: красный;
}
p: nth-of-type (четное) {
фон: синий;
}
Попробуй сам »
Пример
По формуле ( и + b ). Описание: a представляет собой размер цикла, n — счетчик (начинается с 0), а b — значение смещения.
Здесь мы указываем цвет фона для всех элементов p, индекс которых равен кратно 3:
p: n-й тип (3n + 0) {
фон: красный;
}
Попробуй сам »
: nth-ребенок | CSS-уловки
Селектор : nth-child позволяет выбрать один или несколько элементов на основе их исходного порядка в соответствии с формулой.
/ * Выбрать первый элемент списка * / li: nth-child (1) {} / * Выбираем 5-й элемент списка * / li: nth-child (5) {} / * Выбираем все остальные элементы списка, начиная с первого * / li: nth-child (нечетное) {} / * Выбираем каждый третий элемент списка, начиная с первого * / li: nth-child (3n - 2) {} / * Выбираем каждый третий элемент списка, начиная со второго * / li: nth-child (3n - 1) {} / * Выбираем каждый третий дочерний элемент, если он имеет класс "el" * / .el: nth-child (3n) {}
Он определен в спецификации CSS Selectors Level 3 как «структурный псевдокласс», что означает, что он используется для стилизации контента на основе его отношений с родительскими и родственными элементами.
Предположим, мы создаем сетку CSS и хотим удалить поля на каждом четвертом модуле сетки. Вот этот HTML:
<раздел> Один Два Три Четыре Пять

	Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	{1,4}
#	Повторять один или больше раз через запятую.	#

Значение	Номера элементов	Описание
1	1	Первый элемент, является синонимом псевдокласса :first-child .
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,…	Все нечётные элементы.

Значение	Описание
Число	Положительное число начиная с 1. Задает номер элемента, к которому мы хотим обратиться. Нумерация элементов начинается с 1.
odd	Нечетные элементы.
even	Четные элементы.
Выражение	Можно составлять специальные выражения с буквой n, которая обозначает все целые числа от нуля (не от единицы!) до бесконечности. Так, 2n — значит все четные числа (начиная со второго). Как это понять? Подставляем в n последовательно числа от 0 и так далее: если n = 0, то 2n даст 0 — такого элемента нет (нумерация элементов с 1! ), если n = 1, то 2n даст 2 — второй элемент, если n = 2, 2n дает 4 — четвертый элемент. Если написать 3n — это будет каждый третий элемент (начиная с третьего!), и так далее.

n	2n+1	4n+1	4n+4	4n	5n-2	-n+3
0	1	1	4	–	–	3
1	3	5	8	4	3	2
2	5	9	12	8	8	1
3	7	13	16	12	13	–
4	9	17	20	16	18	–
5	11	21	24	20	23	–

Селектор
: nth-child ()	4.0	9,0	3,5	3,2	9,6

Селектор
: nth-of-type ()	4,0	9,0	3,5	3,2	9,6

Вместо того, чтобы добавлять класс к каждому четвертому элементу (например,грамм. . Последний ), мы можем использовать : nth-child :
.module: nth-child (4n) { поле справа: 0; }
Селектор : nth-child принимает аргумент: это может быть одно целое число, ключевые слова четное , нечетное или формула. Если указано целое число, выбирается только один элемент, но ключевые слова или формула будут перебирать все дочерние элементы родительского элемента и выбирать соответствующие элементы — аналогично навигации по элементам в массиве JavaScript.Ключевые слова «четный» и «нечетный» являются простыми (2, 4, 6 и т. Д. Или 1, 3, 5 соответственно). Формула построена с использованием синтаксиса an + b , где:
«a» — целое число
«n» — буквальная буква «n»
«+» — оператор и может быть либо «+», либо «-».
«b» — целое число и требуется, если в формулу включен оператор
Важно отметить, что эта формула является уравнением и проходит через каждый родственный элемент, определяя, какой из них будет выбран.Часть формулы «n», если она присутствует, представляет собой набор возрастающих положительных целых чисел (точно так же, как итерация по массиву). В нашем примере выше мы выбрали каждый четвертый элемент по формуле 4n , которая работала, потому что каждый раз, когда элемент проверялся, «n» увеличивалось на единицу (4 × 0, 4 × 1, 4 × 2, 4 × 3, так далее). Если порядок элементов соответствует результату уравнения, он будет выбран (4, 8, 12 и т. Д.). Для более подробного объяснения используемых математических вычислений, пожалуйста, прочтите эту статью.
Для дальнейшей иллюстрации, вот несколько примеров действительных селекторов : nth-child :
К счастью, не всегда нужно делать математику самостоятельно — существует несколько тестеров и генераторов : nth-child :
: nth-child (an + b of
)
Существует малоизвестный фильтр, который можно добавить к : nth-child в соответствии со спецификацией CSS Selectors: возможность выбрать : nth-child из подмножества элементов, используя формат из .Предположим, у вас есть список смешанного содержимого: у некоторых есть класс .video , у некоторых — класс .picture , и вы хотите выбрать первые 3 изображения. Вы можете сделать это с помощью фильтра «из», например:
: nth-child (-n + 3 of .picture) { / * Выбирает первые 3 элемента применяется не ко ВСЕМ детям, а только для тех, кто соответствует .picture * / }
Обратите внимание, что это отличается от добавления селектора непосредственно к селектору : nth-child :
.picture: nth-child (-n + 3) { / * Не то же самое! Это относится к элементам, совпадающим с .picture который _также_ соответствует: nth-child (-n + 3) * / }
Это может немного запутать, поэтому пример может помочь проиллюстрировать разницу:
Браузер поддерживает фильтр «of» очень ограниченно: на момент написания этой статьи только Safari поддерживал синтаксис. Чтобы проверить статус вашего любимого браузера, вот открытые вопросы, связанные с : nth-child (an + b of s) :
Достопримечательности
: nth-child выполняет итерацию по элементам, начиная с вершины исходного порядка.Единственная разница между ним и : nth-last-child заключается в том, что последний выполняет итерацию по элементам , начиная с нижней части исходного порядка .
Синтаксис для выбора числа первых n элементов немного противоречит интуиции. Вы начинаете с -n плюс положительное количество элементов, которые хотите выбрать. Например, li: nth-child (-n + 3) выберет первые 3 элемента li .
Селектор : nth-child очень похож на : nth-of-type , но с одним критическим отличием : он менее специфичен.В нашем примере выше они дадут тот же результат, потому что мы повторяем только элементы .module , но если бы мы выполняли итерацию по более сложной группе братьев и сестер, : nth-child попытался бы сопоставить всех братьев и сестер, а не только братья и сестры одного и того же типа элемента. Это раскрывает мощь : nth-child — он может выбрать любой родственный элемент в расположении, а не только элементы , указанные перед двоеточием .
Сопутствующие объекты
Прочие ресурсы
Поддержка браузера
Хром Safari Firefox Opera IE Android iOS
Любая 3.2+ Любые 9,5+ 9+ Любые Любые
: nth-child был представлен в модуле CSS Selectors Module 3, что означает, что старые версии браузеров не поддерживают его. Однако поддержка современных браузеров безупречна, а новые псевдоселекторы широко используются в производственных средах. Если вам требуется поддержка старых версий браузера, используйте polyfill для IE или используйте эти селекторы некритическими способами, например, с прогрессивным улучшением, что рекомендуется.
Полезное: Рецепты nth-child | CSS-уловки
У меня немного кружится голова, когда я сталкиваюсь с идеальным использованием : nth-child или : nth-of-type (прочтите о различиях). Чем лучше вы их поймете, тем больше у вас будет css-ботаников!
В этих простых «рецептах» (на самом деле: выражениях) я произвольно использую плоский список элементов списка и случайно выбранных чисел. Но должно быть достаточно очевидно, как изменить их, чтобы получить аналогичный выбор.
Выберите только пятый элемент
li: nth-child (5) { цвет: зеленый; }
Чтобы выбрать первый элемент, вы можете использовать: first-child, или, держу пари, вы можете догадаться, как изменить вышеуказанный элемент, чтобы сделать это.
Выбрать все, кроме первых пяти
li: nth-child (n + 6) { цвет: зеленый; }
Если бы здесь было более 10 элементов, он бы выбрал все из них сверх 5.
Выберите только первые пять
li: nth-child (-n + 5) { цвет: зеленый; }
Выбрать каждый четвертый, начиная с первого
li: nth-child (4n-7) {/ * или 4n + 1 * / цвет: зеленый; }
Выбрать только нечетное или четное
li: nth-child (odd) { цвет: зеленый; }
li: nth-child (even) { цвет: зеленый; }
Выбрать последний элемент
li: last-child { цвет: зеленый; }
Выбирает 10-й, потому что здесь 10 элементов, но если бы их было 8, он выбрал бы 8-й, или если бы их было 1290, он бы выбрал бы 1290-й.
Выбрать от второго до последнего элемента
li: nth-last-child (2) { цвет: зеленый; }
Выбирает 9-й, потому что здесь 10 элементов, но если бы было 30 элементов, он бы выбрал 29-й.
Хочешь поиграть?
Попробуй тестером.
Поддержка браузера
Интересно, что: first-child поддерживался IE 7, но остальная часть этого материала поддерживается только в IE 9. Кроме IE, поддержки браузеров особо не беспокоит, и если вас беспокоит IE, используйте Selectivizr.Если поддержка браузера интересна или важна для вас, обязательно ознакомьтесь с разделом «Когда я могу использовать…», который очень хорошо отслеживает эти вещи.
Как использовать правила четности и нечетности CSS для создания привлекательных таблиц в WordPress
Каскадные таблицы стилей (CSS) позволяют создавать фантастические эффекты, если у вас есть соответствующий опыт. Однако существует так много элементов, которые вы можете настроить, что усвоение языка может оказаться трудным.
Возьмем, к примеру, четные и нечетные правила CSS. Это малоизвестные селекторы, которые позволяют вам выбирать четные и нечетные элементы в таблицах, списках и почти во всем, что вы можете придумать.В этой статье мы поговорим о том, как работают четные и нечетные правила CSS, и как вы можете их использовать. Затем мы научим вас использовать Divi для воспроизведения их эффектов для получения еще лучших результатов. Давай приступим к работе!
Введение в правила CSS для четных и нечетных чисел
CSS-правила четности и нечетности позволяют настраивать таргетинг на очень конкретные элементы.
Название этого типа селектора CSS раскрывает его назначение. Правила для четных и нечетных элементов позволяют настроить таргетинг на эти два типа элементов практически в любой ситуации и применить к ним стили.
Возьмем пример в верхней части этого раздела — все четные столбцы имеют один и тот же цвет текста, а нечетные числа — другой. Этот эффект возможен, потому что мы использовали четные и нечетные селекторы, чтобы нацелить каждый тип элемента и применить к ним уникальные цвета фона.
Сейчас вам, вероятно, интересно, какие приложения могут быть для таких конкретных селекторов, поэтому давайте разберем их на примерах:
Таблицы цен. В лучших таблицах цен используются цвета, чтобы привлечь внимание к планам, на которые они хотят, чтобы вы подписались.В этом случае вы можете использовать четные и нечетные селекторы, чтобы выделить конкретные планы.
Для облегчения чтения расширенных наборов данных. Представьте, что вы пытаетесь разобраться в длинной таблице, полной данных. С помощью небольшого количества CSS вы можете применять правила четности и нечетности, чтобы создать контраст между строками или столбцами, чтобы сделать вещи более удобочитаемыми.
Для выделения определенных элементов в списке. Если вы включаете в статью длинный список, четные и нечетные правила могут пригодиться для выделения определенных статей.Вместо того, чтобы играть с цветами фона, вы можете выделить определенные элементы жирным шрифтом, изменить их размер шрифта и т. Д.
Честно говоря, четные и нечетные правила CSS — это не то, что вы часто видите в природе. Однако их легко применить, поэтому нет причин, по которым они не должны быть частью вашего арсенала. Давайте поговорим о том, как применить их на практике!
Как на практике работают правила CSS для четных и нечетных чисел
Таблицы — наиболее распространенный вариант использования правил CSS для четных и нечетных операций, поскольку они представляют собой элементы с четкими визуальными ограничениями.Кроме того, таблицы, как правило, состоят из нескольких элементов, что делает их идеальными кандидатами для рассматриваемых селекторов.
Вот пример быстрой и грязной таблицы с минимальным стилем. Его легко читать, и он получает необходимую информацию, но это почти все:
Если бы мы хотели применить к нему четные и нечетные правила, вот пример того, как будет выглядеть CSS:
tr: nth-child (even) {background: #CCC} tr: nth-child (odd) {background: # 4D4D4D}
Здесь tr относится к элементам HTML для каждой строки в вашей таблице.Приведенный выше код установит белый фон для всех четных строк и серый для нечетных чисел, вот так:
В этом примере зеленая ячейка в углу изображения просто выделена.
Вы также можете настроить таргетинг на столбцы вместо строк, что удобно при выделении уникальных планов в таблицах цен. Вот тот же код, что и раньше, только со столбцами вместо строк:
col: nth-child (even) {background: #CCC} col: nth-child (odd) {background: # 4D4D4D}
Вот как будет выглядеть результат:
Как мы упоминали ранее, вы можете использовать четные и нечетные правила для нацеливания практически на любой элемент.Ключ в том, что он должен содержать подэлементы, такие как строки или столбцы, иначе селектор не знал бы, на какие из них нацелить. Списки, например, включают li HTML-элементов для каждой записи. Вот пример:

Первый элемент.

Второй элемент.

Третий элемент.

Четвертый элемент.

В этом случае вы хотите, чтобы ваши четные и нечетные селекторы были специально нацелены на li элементов, поэтому ваш CSS должен выглядеть так:
li: nth-child (even) {background: #CCC} li: nth-child (odd) {background: # 4D4D4D}
Конечно, добавление цвета фона к элементам списка — не обычная практика, поэтому вы, вероятно, захотите использовать другие типы настроек.Например, вы можете выделить нечетные элементы в списке жирным шрифтом, чтобы выделить их:
Первый элемент.
Второй элемент.
Третий элемент.
Четвертый элемент.
Как видите, в использовании четных и нечетных селекторов нет никаких уловок. Все, что для этого нужно, — это нацелить на правильные элементы, и вы можете внести любые изменения, которые захотите, не затрагивая остальную часть вашей страницы.
Как воспроизвести четные и нечетные правила CSS с помощью Divi
Если вы являетесь пользователем Divi, система модулей позволяет добавлять сложные элементы, такие как контактные формы, таблицы цен, галереи и многое другое, на любую из ваших страниц с помощью нескольких щелчков мышью.Более того, вы получаете доступ к мощным функциям настройки для персонализации этих элементов.
Когда дело доходит до таблиц цен, например, очень легко воспроизвести эффекты четных и нечетных правил CSS без использования кода благодаря Divi. Вот пример таблицы цен на базовые серверы, которую мы составили с помощью Divi Builder:
Теперь предположим, что мы хотели применить разные цвета для каждого столбца, чтобы добавить немного контраста в таблицу. Используя правила CSS для четности и нечетности, мы в конечном итоге нацелились на целые столбцы одного цвета, что выглядело бы ужасно.С Divi вы можете настроить определенные разделы, на которые хотите настроить таргетинг. Давайте попробуем добавить синий фон в заголовки первого и третьего столбцов. Для этого найдите модуль таблицы цен на странице, которую вы редактируете, и нажмите его кнопку Настройки модуля :
Теперь найдите конкретный столбец, на который вы хотите настроить таргетинг, и еще раз нажмите кнопку его настроек:
Если вы перейдете на вкладку Advanced , вы найдете поле под названием Pricing Heading. Вы можете изменить цвет фона этого раздела с помощью простой строки CSS:
фон: # 0C71C3;
Вот как выглядит наша таблица:
Если вы примените то же изменение к столбцу Developer , вы в основном реализовали четные и нечетные правила для этой конкретной строки:
Остальная часть таблицы выглядит хорошо, но что, если вы также хотите выделить некоторые особенности каждого плана? Это то, что вы обычно видите в таблицах цен, чтобы посетители могли сравнить функции, предлагаемые каждым планом.Вы, , можете использовать для четных и нечетных правил таргетинга на строки, а также расположить функции вашего плана таким образом, чтобы выделялись только те, которые вам нужны. С Divi вы можете воспроизвести этот эффект с помощью простых знаков плюс и минус.
Для этого перейдите в разделы настроек столбца, который нужно изменить. В этом примере мы еще раз настроим таргетинг на столбец Basic . Если вы прокрутите вниз его главный экран настроек, вы найдете текстовый редактор со списком функций, которые вы видели ранее:
Как видите, перед каждым элементом стоит знак «плюс».Если вы замените их знаками минус, вот как они будут выглядеть на передней панели:
Если вы расположите знаки «плюс» и «минус» в шахматном порядке, вы сможете реализовать свой собственный четный и нечетный дизайн. Кроме того, вы можете поиграть с текстовым редактором, чтобы еще больше настроить вещи. Вот как выглядит наша таблица после небольшой настройки:
Естественно, вам захочется быть более разборчивым в том, какие элементы выделять в реальной таблице цен. Таким образом, пользователи с первого взгляда будут точно знать, что им предлагает каждый план и как он сравнивается с другими.
Наконец, помните, что модуль Pricing Table позволяет выделять определенные столбцы в качестве избранных таблиц:
Чтобы выбрать столбцы, которые вы хотите выделить, перейдите в их настройки, а затем перейдите на вкладку Design . Вы найдете опцию прямо вверху.
Заключение
CSS легко выучить, но сложно освоить. Приложив немного терпения, любой может создавать потрясающие дизайны и эффекты, используя этот язык. Даже не такие яркие элементы, как таблицы, можно оживить с помощью CSS правильным способом — в данном случае с помощью правил четности и нечетности.
Если вы не из тех, кто сидит и настраивает код до тех пор, пока все не станет правильным, тема Divi позволяет настраивать практически каждый аспект вашего веб-сайта с помощью простых меню. Кроме того, вы можете просмотреть свои изменения за секунды. При таком большом количестве настроек можно достаточно легко воспроизвести эффекты четных и нечетных правил CSS.
У вас есть вопросы о том, как использовать Divi для копирования четных и нечетных правил в WordPress? Давайте поговорим о них в разделе комментариев ниже!
Миниатюра статьи, автор: Ket4up / shutterstock.com
Создайте стиль для всех остальных элементов с помощью CSS
Стилизация веб-страниц с помощью CSS в основном довольно проста. Тем не менее, иногда вы можете искать более сложную задачу. Одного, которого у меня раньше не было, было стилизация всех остальных элементов в CSS. По сути, я хотел добавить стиль к четным или нечетным элементам HTML.
Чтобы проиллюстрировать это, допустим, вы хотите раскрасить все нечетные строки в таблице. Вы можете вручную добавить стиль к каждой из нечетных строк, но это не будет удовлетворительным решением.Вместо этого вы ищете псевдоклассы CSS. Синтаксис такого псевдокласса выглядит следующим образом:
селектор: псевдокласс {свойство: значение; }
В нашем примере мы хотим использовать : nth-child (odd) . Для нашей таблицы, если мы хотим присвоить каждой второй строке другой цвет фона , это будет:

Пример 1 Пример 2

Пример 3 Пример 4

Пример 5 Пример 6

Пример 7 Пример 8

Пример 9 Пример 10

Пример 11 Пример 12

tr: nth-child (odd) { цвет фона: #eee }
Это будет:
Пример 1 Пример 2
Пример 3 Пример 4
Пример 5 Пример 6
Пример 7 Пример 8
Пример 9 Пример 10
Пример 11 Пример 12
Цвет фона таблицы, как показано выше, белый, за исключением нечетных строк, они окрашены.
Добавьте стиль к определенным столбцам или строкам в приложении Table — Документация — Поддержка Awesome Table
Ваши варианты использования или потребности требуют стилизации определенных столбцов или строк (или их содержимого). Тип визуализации «Таблица» позволяет отображать их определенным образом. В этой статье вы узнаете простые приемы CSS для персонализации столбцов и строк.
1. Использование CSS3: селектор nth-child ()
Если вы хотите, чтобы применил стиль к определенному столбцу или строке (но не к другим), используйте свойство : nth-child () из CSS3.Этот селектор используется для применения стиля к элементу с номером «n» внутри родительского элемента .
Вы можете использовать : nth-child () несколькими способами:
: nth-child (3) — используйте число в качестве параметра, чтобы указать стиль для третьего элемента (например).
: nth-child (odd) или: nth-child (even) — используйте « odd » или « even » в качестве параметра, чтобы указать стиль для всех нечетных или четных элементов.
: nth-child (4n) — используйте ‘ number n ‘ в качестве параметра, чтобы указать стиль для каждого 4-го цикла элемента (например, выделите 4-ю строку таблицы красным цветом, затем следующую 4-ю строку после и так далее).
info Включите ! Important в каждое правило CSS, чтобы изменения вступили в силу.
2. Применить стиль к определенным столбцам
Чтобы добавить стиль к определенным столбцам, используйте следующий селектор в вашем CSS:
1 2 3
tbody> tr>: nth-child (your_parameter) {
/ * здесь ваш css * /
}
Вот простой пример (изменение цвета шрифта, выравнивания и ширины второго столбца):
Скопировать этот шаблон
1 2 3
4
5
tbody> tr>: nth-child (2) {
цвет: красный;
ширина: 200 пикселей;
выравнивание текста: по центру;
}
3.
No related posts.

	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

n	2n+1	4n+1	4n+4	4n	5n-2	-n+3
0	1	1	4	–	–	3
1	3	5	8	4	3	2
2	5	9	12	8	8	1
3	7	13	16	12	13	–
4	9	17	20	16	18	–
5	11	21	24	20	23	–

Пример 1	Пример 2
Пример 3	Пример 4
Пример 5	Пример 6
Пример 7	Пример 8
Пример 9	Пример 10
Пример 11	Пример 12

n	2n+1	4n+1	4n+4	4n	5n-2	-n+3
0	1	1	4	–	–	3
1	3	5	8	4	3	2
2	5	9	12	8	8	1
3	7	13	16	12	13	–
4	9	17	20	16	18	–
5	11	21	24	20	23	–

n	2n+1	4n+1	4n+4	4n	5n-2	-n+3
0	1	1	4	–	–	3
1	3	5	8	4	3	2
2	5	9	12	8	8	1
3	7	13	16	12	13	–
4	9	17	20	16	18	–
5	11	21	24	20	23	–