Css каждый второй элемент


Поддержка браузерами

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-ой пункт
и т.д.


Пример:

  <!doctype html>  <html>   <head>   <meta charset="utf-8">   <title>Пример</title>   <style>   tr:nth-child(odd) td { background-color: silver; }   </style>   </head>   <body>     <table>   <tr> <td>текст</td> </tr>   <tr> <td>текст</td> </tr>   <tr> <td>текст</td> </tr>   <tr> <td>текст</td> </tr>   <tr> <td>текст</td> </tr>   <tr> <td>текст</td> </tr>   <tr> <td>текст</td> </tr>   <tr> <td>текст</td> </tr>   <tr> <td>текст</td> </tr>   <tr> <td>текст</td> </tr>   </table>     </body>  </html>  

Результат данного примера:

puzzleweb.ru

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

<An+B>
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 <integer>s.

Formal syntax

:nth-child( <nth> [ of <complex-selector-list> ]? )

where
<nth> = <an-plus-b> | even | odd
<complex-selector-list> = <complex-selector>#

where


<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*

where
<compound-selector> = [ <type-selector>


pseudo-class-selector>
* ]* ]!
<combinator> = '>' | '

ultipliers to transform them as a single component">[
'||' ]

where
<type-selector> = <wq-name> | <ns-prefix>? '


<attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'

where
<wq-name> = <ns-prefix>


ax#Asterisk_(*)" title="Asterisk: the entity may occur zero, one or several times">*
' ]? |
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> '
ef="#attr-matcher"><attr-matcher>
[ <string-token> | <ident-token> ] <attr-modifier>? ']'

where


<attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='
<attr-modifier> = i

Examples

Example selectors

tr:nth-child(odd) or tr:nth-child(2n+1)
Represents the odd rows of an HTML table: 1, 3, 5, etc.
tr:nth-child(even) or tr:nth-child(2n)
Represents the even rows of an HTML table: 2, 4, 6, etc.
:nth-child(7)
Represents the seventh element.
:nth-child(5n)
Represents elements 5 [=5×1], 10 [=5×2], 15 [=5×3], etc.
:nth-child(3n+4)
Represents elements 4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [=(3×3)+4], etc.
:nth-child(-n+3)
Represents the first three elements. [=-0+3, -1+3, -2+3]
p:nth-child(n)
Represents every <p> element in a group of siblings. This selects the same elements as a simple p selector (although with a higher specificity).
p:nth-child(1) or p:nth-child(0n+1)
Represents every <p> that is the first element in a group of siblings. This is the same as the :first-child selector (and has the same specificity).
p:nth-child(n+8):nth-child(-n+15)
Represents the eighth through the fifteenth <p> elements of a group of siblings.

Detailed example

HTML

<h3><code>span:nth-child(2n+1)</code>, WITHOUT an  <code>&lt;em&gt;</code> among the child elements.</h3> <p>Children 1, 3, 5, and 7 are selected.</p> <div class="first">  <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>  <h3><code>span:nth-child(2n+1)</code>, WITH an  <code>&lt;em&gt;</code> among the child elements.</h3> <p>Children 1, 5, and 7 are selected.<br>  3 is used in the counting because it is a child, but it isn't  selected because it isn't a <code>&lt;span&gt;</code>.</p> <div class="second">  <span>Span!</span>  <span>Span</span>  <em>This is an `em`.</em>  <span>Span</span>  <span>Span!</span>  <span>Span</span>  <span>Span!</span>  <span>Span</span> </div>  <br>  <h3><code>span:nth-of-type(2n+1)</code>, WITH an  <code>&lt;em&gt;</code> among the child elements.</h3> <p>Children 1, 4, 6, and 8 are selected.<br>  3 isn't used in the counting or selected because it is an <code>&lt;em&gt;</code>,   not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selects  children of that type. The <code>&lt;em&gt;</code> is completely skipped  over and ignored.</p> <div class="third">  <span>Span!</span>  <span>Span</span>  <em>This is an `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; }

Result

Specifications

Specification Status Comment
Selectors Level 4
The definition of ‘:nth-child’ in that specification.
Working Draft Adds of <selector> syntax and specifies that matching elements are not required to have a parent.
Selectors Level 3
The definition of ‘:nth-child’ in that specification.
Recommendation Initial definition.

developer.mozilla.org

Значение и применение

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

Применение данного псевдокласса широко распространено, он позволяет чередовать стили строк в таблицах, списках, придать стиль сочетанию дочерних элементов и так далее.

CSS синтаксис:

 :nth-child(номер | ключевое слово | формула) { блок объявлений; } 

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

Стилизация по порядковому номеру

Давайте рассмотрим пример, в котором перед Вами стоит задача изменить стиль для всех элементов, которые выделены оранжевым цветом на изображении:

Пример выбора селектора дочерних элементов.
Пример выбора селектора дочерних элементов.

Что общего у элементов, выделенных на изображении? А общее у них то, что они выделены оранжевым цветом. Смешно? Не думаю. Общее у них все же есть, элементы <li> являются вторыми дочерними элементами своих родителей, а элемент <h2> тоже можно посчитать, и его порядковый номер будет третьим (третий дочерний элемент своего родителя <body>). Чтобы стилизовать эти элементы, нам необходимо использовать псевдокласс :nth-childcss3.

Перейдем к примеру:

 <!DOCTYPE html> <html> <head> 	<meta charset = "UTF-8"> 	<title>Псевдокласс :first-child</title> <style> /* групповой селектор, который выбирает каждый третий дочерний элемент <h2> своего родителя и каждый второй элемент <li> своего родителя */ h2:nth-child(3), li:nth-child(2) {  background-color: orange; /* устанавливаем цвет заднего фона */ } </style> </head> 	<body> 		<h2>Первый заголовок h2 тега body</h2> 		<ul> 			<li>один</li> 			<li>два</li> 			<li>три</li> 		</ul> 		<h2>Второй заголовок h2 тега body</h2> 		<article> 			<h2>Первый заголовок h2 тега article</h2> 			<ul> 				<li>один</li> 				<li>два</li> 				<li>три</li> 			</ul> 		</article> 	</body> </html>  

В этом примере с использованием псевдокласса :nth-childcss3 мы стилизовали элементы <h2> и <li>, которые имеют определённый порядковый номер дочернего элемента внутри своих родительских элементов.

Результат нашего примера:

Пример использования псевдоэлемента :last-child.
Пример использования псевдоэлемента :last-child.

Стилизация по ключевому слову

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

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

Давайте для примера создадим две простые таблицы с разными стилевыми классами и рассмотрим наглядно разницу в применении значений ключевых слов псевдокласса :nth-childcss3 для HTML элемента <tr>, который определяет строку таблицы:

 <!DOCTYPE html> <html> <head> 	<meta charset = "UTF-8"> 	<title>Стилизация четных и нечетных дочерних элементов</title> <style> .primer1 tr:nth-child(even)  { /* стилизация четных дочерних элементов */ background-color: #AAA; /* устанавливаем цвет заднего фона */ } .primer2 tr:nth-child(odd)  { /* стилизация нечетных дочерних элементов */ background-color: #AAA; /* устанавливаем цвет заднего фона */ } caption {/* селектор типа (выбираем HTML элемент <caption>) */ color: red; /* устанавливаем цвет текста */ } </style> </head> 	<body> 		<table class = "primer1"> 			<caption>Значение even (четные)</caption> 			<tr> 				<th>1 строка</th><th>Позиция</th><th>Количество</th> 			</tr> 			<tr> 				<td>2 строка</td><td></td><td></td> 			</tr> 			<tr> 				<td>3 строка</td><td></td><td></td> 			</tr> 			<tr> 				<td>4 строка</td><td></td><td></td> 			</tr> 			<tr> 				<td>5 строка</td><td></td><td></td> 			</tr> 		</table> 		<table class = "primer2"> 			<caption>Значение odd (нечетные)</caption> 			<tr> 				<th>1 строка</th><th>Позиция</th><th>Количество</th> 			</tr> 			<tr> 				<td>2 строка</td><td></td><td></td> 			</tr> 			<tr> 				<td>3 строка</td><td></td><td></td> 			</tr> 			<tr> 				<td>4 строка</td><td></td><td></td> 			</tr> 			<tr> 				<td>5 строка</td><td></td><td></td> 			</tr> 		</table> 	</body> </html> 

В этом примере с использованием псевдокласса :nth-child()css3 мы стилизовали четные строки первой таблицы (элементы <tr>) и нечетные во второй таблице.

Пример стилизации четных и нечетных дочерних элементов.
Пример стилизации четных и нечетных дочерних элементов.

Стилизация по простой математической формуле

Псевдокласс :nth-child()css3 позволяет выбрать не только чётные, нечетные, или дочерние элементы с определённым порядковым номером, но и дочерние элементы, заданные по элементарной математической формуле. Давайте рассмотрим следующий селектор и разберем, что значит эта запись:

 td:nth-child(4n+2)  { background-color: lightblue; /* устанавливаем цвет заднего фона */ } 

Этот селектор означает, что каждая четвёртая ячейка таблицы (<td>) внутри строки, начиная со второй ячейки таблицы, будет стилизована:

В формулах допускается использование значений со знаком вычитания, но в этом как правило нет необходимости:

 td:nth-child(4n-1)  { background-color: lightblue; /* устанавливаем цвет заднего фона */ } 

Этот селектор означает, что каждая четвёртая ячейка таблицы (<td>) внутри строки, начиная с третьей ячейки таблицы (-1 ячейки нет по объективным причинам, поэтому происходит сдвиг влево), будет стилизована:

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

 <!DOCTYPE html> <html> <head> 	<meta charset = "UTF-8"> 	<title>Стилизация дочерних элементов по математической формуле</title> <style> td, th{ /* групповым селектором выбираем заголовочные ячейки и ячейки данных */ border: 1px solid green; /* задаём сплошную границу размером 1 пиксель зеленого цвета */ width: 50px; /* устанавливаем ширину заголовочным ячейкам и ячейкам данных */ } td:nth-child(4n+2) { background-color: lightblue; /* устанавливаем цвет заднего фона */ } </style> </head> 	<body> 		<table> 			<tr> 				<th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>10</th><th>11</th><th>12</th><th>13</th><th>14</th> 			</tr> 			<tr> 				<td>2</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> 			</tr> 			<tr> 				<td>3</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> 			</tr> 			<tr> 				<td>4</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> 			</tr> 		</table> 	</body> </html>  

В этом примере с использованием псевдокласса :nth-childcss3 мы выбрали и стилизовали каждую четвёртую ячейку таблицы (<td>) внутри строки, начиная со второй ячейки таблицы. Результат нашего примера:

Пример cтилизации дочерних элементов по математической формуле.
Пример cтилизации дочерних элементов по математической формуле.

basicweb.ru

:nth-last-of-type

:nth-last-of-type выбирает дочерние элементы, если их позиция в документе совпадает с шаблоном, описываемым алгебраическим выражением.

Селектор :nth-last-of-type выглядит примерно так:

«Выражение» может быть представлено ключевыми словами even или odd, целым числом или формулой по типу an+b, где a и b — целые числа, положительные или отрицательные.

Поскольку псевдокласс CSS nth child может использоваться для выбора диапазона различных элементов. Давайте рассмотрим несколько примеров, чтобы стало понятнее.

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

Чтобы выбрать третий элемент списка, нужно указать li:nth-child(3). Чтобы выбрать все четные элементы, можно использовать ключевое слово even. И наоборот, можно использовать :nth-child(odd), чтобы выбрать все элементы с нечетным номером.

CSS nth child каждый 3 й — указываем li:nth-child(3n). Чтобы выбрать первые четыре элемента, используем li:nth-child(-n+4). Чтобы выбрать все, кроме первых четырех элементов, можно использовать li:nth-child(n+5).

Выражение an + b

Альтернативой использованию ключевого слова odd является использование выражения 2n+1. Но как это работает?

Когда выражение в формате an+b содержит отличные от ноля значения a и b, дочерние элементы разбиваются на группы. Если это выражение 2n+1, дочерние элементы разбиваются на группы по два. Каждому элементу в группе присваивается индекс, начиная с 1. Соответствующий элемент в каждой группе — это индекс номер b. В нашем примере это будет первый элемент.

Если выражение 3n+2, элементы группируются по три элемента, и второй элемент в каждой группе соответствует выражению.

Если значение b является отрицательным, соответствующим в группе является элемент с индексом b. Но отсчитывается он в обратном направлении от индекса 1. В этом случае соответствующий элемент будет принадлежать не данной, а предшествующей группе.

Ключевое слово even в CSS nth child может быть выражено как 2n. В этом случае у нас нет значения b, поэтому выбирается каждый элемент группы с индексом a; 2n выбирает каждый второй элемент, 3n — каждый третий, 4n — каждый четвертый и так далее.

Лично я считаю, что концепция разбивки дочерних элементов на группы и поиска индекса соответствия для каждой группы очень запутана. Хотя именно так их описывает спецификация CSS-селекторов.

Мне больше нравится концепция поиска каждого n-ного элемента — каждого 2-го, 3-го или 4-го и т.д. А потом мне проще представить, что вторая часть выражения — это смещение.

В случае 2n+1 я читаю это выражение следующим образом: «Найти каждый второй элемент и переместить выделение вниз на 1».

Если выражение 3n-5, оно будет читаться так: «Найти каждый третий элемент и переместить выделение вверх на 5».

Другие селекторы :nth-child

:nth-child имеет соответствующий ему псевдокласс :nth-last-child, который работает наоборот.

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

Этот псевдокласс менее распространен. Тем не менее, часто необходимо выбрать первый или последний дочерний элемент. Это можно сделать с помощью :nth-child(1) или :nth-last-child(1), но этот метод встречается не так часто, как псевдоклассы :first-child и :last-child. При этом только :first-child работает в IE8, а :last-child и :nth-селекторы — нет.

:nth-of-type

Что меня часто не удовлетворяет, так это то, что псевдокласс CSS nth child отбирает дочерние элементы по индексу и не учитывает тип элемента.

Рассмотрим следующий пример.

Есть раздел с заголовком, подзаголовком и несколькими абзацами. Я хочу, чтобы первый абзац немного выделялся с помощью увеличенного размера шрифта 1.5em.

Можно попробовать применить код section p:first-child, так как нужно задать дополнительный стиль для первого абзаца в этом разделе. Но это не сработает, поскольку первый дочерний элемент раздела — h1. В этом случае необходимо использовать селектор :first-of-type.

Существует целый ряд селекторов этого типа — :first-of-type, :last-of-type, :nth-of-type и :nth-last-of-type. Они ведут себя так же, как :nth-child, но отбирают n-ые экземпляры элементов определенного типа.

Эти селекторы довольно сложны, но они предоставляют большие возможности. Они поддерживаются всеми браузерами, начиная с IE9, в IE8 поддерживается только :first-child. В прошлом они не раз помогли мне решить несколько сложных задач.

Перевод статьи «AtoZ CSS Screencast: nth-child and nth-of-type» дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru

Это не столько ответ, сколько отказ от ответа, т.е. пример, показывающий, почему один из высоко оцененных ответов выше на самом деле ошибочен.

Я думал, что ответ выглядит хорошо. Фактически, это дало мне то, что я искал: :nth-of-type, который, по моей ситуации, работал. (Итак, спасибо за это, @Bdwey.)

Я изначально прочитал комментарий @BoltClock (в котором говорится, что ответ по существу неправильный) и отклонил его, поскольку я проверил свой вариант использования, и он сработал. Затем я понял, что @BoltClock имеет репутацию 300 000+ (!) И имеет профиль, в котором он утверждает, что является гуру CSS. Хм, подумал я, может быть, мне стоит подойти немного ближе.

Выключается следующим образом: div.myclass:nth-of-type(2) НЕ означает «второй экземпляр div.myclass». Скорее, это означает «второй экземпляр div, и он должен также иметь класс» myclass «». Это важное различие, когда между вашими экземплярами div.myclass происходит вмешательство div.

Мне понадобилось некоторое время, чтобы обдумать это. Поэтому, чтобы помочь другим понять это быстрее, я написал пример, который, как я считаю, более четко демонстрирует концепцию, чем письменное описание: я захватил h1, h2, h3 и h4 элементов, по существу, div s. Я наложил класс A на некоторые из них, сгруппировал их в 3, а затем покрасил 1, 2 и 3 экземпляры синим, оранжевым и зеленым, используя h?.A:nth-of-type(?). (Но, если вы внимательно читаете, вы должны спрашивать «1-й, 2-й и 3-й случаи чего?» ). Я также внедрил несвойственный (то есть другой уровень h) или аналогичный (то есть тот же уровень h) неклассифицированный элемент в некоторые из групп.

Обратите внимание, в частности, на последнюю группировку 3. В этом случае между первым и вторым элементами h3.A вставлен неклассифицированный элемент h3. В этом случае не появляется 2-й цвет (то есть оранжевый), а 3-й цвет (т.е. Зеленый) отображается во втором экземпляре h3.A. Это показывает, что n in h3.A:nth-of-type(n) подсчитывает h3 s, а не h3.A s.

Хорошо, надеюсь, что это поможет. И спасибо, @BoltClock.

qaru.site

Как работает 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

Поддержка браузерами

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

Спасением здесь может послужить библиотека jQuery, которая реализует поддержку всех CSS-селекторов, включая :nth-child, даже в Internet Explorer.

web-standards.ru

<!DOCTYPE HTML> <html>  <head>  <meta charset="utf-8"> </head>  <body>   <input type="checkbox">  <input type="checkbox" checked>  <input type="text" id="message">   <h3 id="widget-title">Сообщения:</h3>  <ul id="messages">  <li id="message-1">Сообщение 1</li>  <li id="message-2">Сообщение 2</li>  <li id="message-3" data-action="delete">Сообщение 3</li>  <li id="message-4" data-action="edit do-not-delete">Сообщение 4</li>  <li id="message-5" data-action="edit delete">Сообщение 5</li>  <li><a href="#">...</a></li>  </ul>    <a href="http://site.com/list.zip">Ссылка на архив</a>  <a href="http://site.com/list.pdf">..И на PDF</a>    <script>  // тестовая функция для селекторов  // проверяет, чтобы элементов по селектору selector было ровно count  function test(selector, count) {  var elems = document.querySelectorAll(selector);  var ok = (elems.length == count);   if (!ok) alert(selector + ": " + elems.length + " != " + count);  }   // ------------- селекторы --------------   // Выбрать input типа checkbox  test('input[type="checkbox"]', 2);   // Выбрать input типа checkbox, НЕ отмеченный  test('input[type="checkbox"]:not(:checked)', 1);   // Найти все элементы с id=message или message-*  test('[id|="message"]', 6);   // Найти все элементы с id=message-*  test('[id^="message-"]', 5);   // Найти все ссылки с расширением href="...zip"  test('a[href$=".zip"]', 1);   // Найти все элементы с data-action, содержащим delete в списке (через пробел)  test('[data-action~="delete"]', 2);   // Найти все элементы, у которых ЕСТЬ атрибут data-action,  // но он НЕ содержащит delete в списке (через пробел)  test('[data-action]:not([data-action~="delete"])', 1);   // Выбрать все чётные элементы списка #messages  test('#messages li:nth-child(2n)', 3);   // Выбрать один элемент сразу за заголовком h3#widget-title  // на том же уровне вложенности  test('h3#widget-title + *', 1);   // Выбрать все ссылки, следующие за заголовком h3#widget-title  // на том же уровне вложенности  test('h3#widget-title ~ a', 2);   // Выбрать ссылку внутри последнего элемента списка #messages  test('#messages li:last-child a', 1);  </script> </body>  </html>

learn.javascript.ru


You May Also Like

About the Author: admind

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.