Содержание

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

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
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. Результат для различных значений псевдокласса
ЗначениеНомера элементовОписание
11Первый элемент, является синонимом псевдокласса :first-child.
55Пятый элемент.
2n2, 4, 6, 8, 10Все четные элементы, аналог значения even.
2n+11, 3, 5, 7, 9Все нечетные элементы, аналог значения odd.
3n+22, 5, 8, 11, 14
-n+33, 2, 1
5n-23, 8, 13, 18, 23
even2, 4, 6, 8, 10Все четные элементы.
odd1, 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
21342135 213621372138
Нефть1634 627457
Золото469 725647
Дерево773 793486
Камни2334 8853103

В данном примере псевдокласс :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 – с какого элемента начинать.

    Давайте рассмотрим пример использования:

    Стилизация дочерних элементов по математической формуле
    1234567891011121314
    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
    21342135 213621372138
    Нефть1634 627457
    Золото469 725647
    Дерево773 793486
    Камни2334 8853103

    В данном примере псевдокласс :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:

      <раздел>
      
    Один
    Два
    Три
    Четыре
    Пять