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

<ul>
            <li>Элемент 1</li>
            <li>Элемент 2</li>
            <li>Элемент 3</li>
            <li>Элемент 4</li>
            <li>Элемент 5</li>
            <li>Элемент 6</li>
            <li>Элемент 7</li>
            <li>Элемент 8</li>
            <li>Элемент 9</li>
            <li>Элемент 10</li>
</ul>

Давайте выделим красным цветом, например, пятый по счету элемент li. Для этого воспользуемся псевдоклассом CSS nth-child

ul li:nth-child(5) {color:#F00;}

Для того, чтобы выбрать 5 элемент, в качестве параметра для псевдокласса nth-child, нужно указать цифру 5. Все просто. Цифра 5 это позиция элемента, по порядку, в котором он находится в коде.

Вот какой результат получился.

Вместо цифры «5» можно указывать любое другое число, в зависимости от того элемента, который вы хотите выбрать.

Например, для того, чтобы выбрать каждый второй элемент с помощью CSS, необходимо написать:

ul li:nth-child(2) {color:#F00;}

Что делать, если нужно выбрать каждый второй элемент с помощью CSS, а не только второй. Как быть в этом случае?

Используйте следуйющий код:

ul li:nth-child(2n) {color:#F00;}

По сути, добавляем символ «n» к цифре.

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

Как работает CSS-селектор nth-child | CSS-Tricks по-русски

Как работает CSS-селектор nth-child

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

ul li:nth-child(3n+3) {
	color: #ccc;
}

Вышеприведённый CSS делает следующее: применяет стиля для каждого третьего элемента ненумерованного списка. А именно 3-го, 6-го, 9-го, 12-го и т.д. Но как это работает? А также какую выгоду можно извлечь используя nth-child?

Основной смысл заключается в выражении в скобках. nth-child принимает два ключевых слова: even (чётный) и odd (нечётный). Смысл их абсолютно ясен. Even выбирает чётные элементы (2, 4, 6), odd — нечётные (1, 3, 5).

Как показано в примере выше, nth-child может обрабатывать выражения. Какое самое простое возможное выражение? Просто число. Если вы напишите какое-нибудь число в скобках, то будет выбран один единственный элемент. Например, выберем пятый элемент списка:

ul li:nth-child(5) {
	color : #ccc;
}

Вернёмся к нашему первому примеру, в котором мы использовали выражение (3n+3). Как он работает? Почему он выбирает каждый третий элемент? Вся суть в переменной n. Она принимает целые значения от нуля и больше. Давайте рассмотрим подробнее:

(3 x 0) + 3 = 3 = 3-ий элемент
(3 x 1) + 3 = 6 = 6-ой элемент
(3 x 2) + 3 = 9 = 9-ый элемент
и т.д.

Теперь попробуем следующее выражение: nth-child(2n+1):

(2 x 0) + 1 = 1 = 1-ый элемент
(2 x 1) + 1 = 3 = 3-ий элемент
(2 x 2) + 1 = 5 = 5-ый элемент
и т.д.

В итоге получили тоже самое что и в случае с odd, таким образом нет нужды часто использовать такое выражение. Более того, наш первый пример тоже можно упростить и использовать вместо оригинального выражения (3n+3), выражение (3n):

(3 x 0) + 0 = 0 = нет соответствия
(3 x 1) + 0 = 3 = 3-ий элемент
(3 x 2) + 0 = 6 = 6-ой элемент
и т.д.

Как видите, результат тот же, но не надо писать «+3». Также мы можем использовать отрицательные значения в выражении. Например, 4n-1:

(4 x 0) - 1 = -1 = нет соответствия
(4 x 1) - 1 = 3 = 3-ий элемент
(4 x 2) - 1 = 7 = 7-ой элемент
и т.д.

Использование отрицательных значений для коэффициента при n, выглядит слегка странно, потому что в случае отрицательного результата не будет найдено соответствие. Вам надо будет постоянно изменять выражение, чтобы добавить положительных элементов. Как оказалось, этот подход очень удобен для выбора первых n элементов. Рассмотрим пример с «-n+3»:

-0 + 3 = 3 = 3ий элемент
-1 + 3 = 2 = 2-ой элемент
-2 + 3 = 1 = 1-ый элемент
-3 + 3 = 0 = нет соответствия

Кроссбраузерность

nth-child является одним из тех самых несчастных атрибутов, которые являются полностью кроссбраузерными, за исключением абсолютного нуля в IE, даже 8-ой версии. Поэтому, когда речь заходит о его использовании, то если ожидаемый результат — это в некотором роде визуальный эффект (например раскраска строк некой таблицы), то это идеальный подход. Но, вероятно, не стоит использовать его для чего-то более важного, что может повлиять, например, на корректность вёрстки.

Конечно, если вы используете jQuery, то вам не стоит переживать по этому поводу, так как jQuery работает даже в Internet Explorer.

Ну и напоследок

Вы можете поиграть с различными выражениями для селектора на страничке с примером.

Знакомство с nth-child

Перевод статьи: How nth-child Works.
Автор: Chris Coyier.

В данной статье мы подробно рассмотрим принцип действия CSS селектора, а точнее псевдо-селектора по имени nth-child. Вот пример его использования:

ul li:nth-child(3n+3) {
color: #ccc;
}

Все, что делает данный CSS код – выбирает каждый третий элемент <li> внутри неупорядоченного списка. Это третий, шестой, девятый, двенадцатый и т.д. элементы. Но каким образом это работает и что еще полезного можно извлечь из использования псевдо-элемента :nth-child() на практике? Давайте разбираться.

Суть вопроса заключается в том, что находится между этими скобками. В качестве аргументов псевдо-селектор :nth-child допускает применение ключевых слов even и odd. Я думаю, что здесь все очевидно — even выбирает четные элементы, такие как второй, четвертый, шестой и т.д., а odd соответствует нечетным элементам, таким как первый, третий, пятый и т.д.

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

ul li:nth-child(5) {
color: #ccc;
}

А теперь давайте вернемся к примеру, приведенному в начале статьи, когда в качестве параметра указывается выражение 3n+3. Как же вычисляется необходимое значение? И почему выбирается каждый третий элемент в этом случае? Смысл заключается в вычислении значения представленного в скобках псевдо-селектора алгебраического выражения при определенных значениях переменной n, которая принимает значения положительных целых чисел, начиная с нуля. (.) Если выполнить несколько первых подстановок, то получим следующее:

(3 x 0) + 3 = 3 (третий элемент)
(3 x 1) + 3 = 6 (шестой элемент)
(3 x 2) + 3 = 9 (девятый элемент)
и так далее.

Давайте возьмем еще один пример :nth-child(2n+1):

(2 x 0) + 1 = 1 (первый элемент)
(2 x 1) + 1 = 3 (третий элемент)
(2 x 2) + 1 = 5 (пятый элемент)
и так далее.

Если хорошо присмотреться, то последний пример дает тот же результат, что и ключевое слово odd, что позволяет заменять его при необходимости этим выражением. К тому же, на первый взгляд может показаться, что наш первый пример, использующий аргумент 3n+3, слишком усложнен и для достижения того же эффекта можно его упростить подставив вот это выражение — 3n+0 или и того проще 3n. Давайте проверим:

(3 x 0) = 0 (совпадений нет)
(3 x 1) = 3 (третий элемент)
(3 x 2) = 6 (шестой элемент)
(3 x 3) = 9 (девятый элемент)
и так далее.

Как видно из примера, результат тот же, что и в начальном примере, поэтому для выбора каждого третьего элемента будет вполне достаточно упрощенного варианта выражения.

К тому же, мы можем использовать отрицательные значения для переменной n, а также применять другие арифметические операции, кроме сложения, к примеру, вычитание. Давайте рассмотрим пример 4n-1:

(4 x 0) – 1 = -1 (совпадений нет)
(4 x 1) -1 = 3 (третий элемент)
(4 x 2) -1 = 7 (седьмой элемент)
и так далее.

Использование отрицательных значений переменной n кажется несколько странным, так как если выражение в результате дает отрицательное значение, то совпадений указанному селектору найдено не будет. Поэтому, если в этом есть необходимость, то вы должны использовать в выражении достаточно большое положительное число, чтобы в результате вычисления выражения получить желаемый эффект. Таким способом можно выбрать несколько элементов начиная с первого и до определенного значения. К примеру, если использовать выражение -n+3, то можно отобрать первые три элемента из указанного набора:

-0 + 3 = 3 (третий элемент)
-1 + 3 = 2 (второй)
-2 + 3 = 1 (первый)
-3 +3 = 0 (совпадений не найдено)
и т. д.

На ресурсе Sitepoint.com можно найти очень удобную таблицу, предназначенную для работы с псевдо-классом :nth-child, которая приведена ниже.

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

Рассматриваемый в статье псевдо-класс :nth-child является ярким представителем тех CSS классов, которые хотя и поддерживаются большинством известных браузеров, но в тоже время не поддерживаются IE, включая восьмую его версию. Поэтому для принятия окончательного решения, касательно целесообразности использования :nth-child в рамках своего проекта, нужно учитывать важность конечного результата. К примеру, если вы собираетесь применить этот псевдо-класс для визуального форматирования отдельных элементов таблицы (строк или полей), что определяется дизайном страницы, то это, конечно же, допустимо и не приведет к каким-либо катастрофическим последствиям. Но в том случае, если вы планируете использовать этот псевдо-класс для формирования общей структуры сайта, то этого делать не стоит. В качестве примера можно взять ситуацию, когда при помощи :nth-child вы убираете правый отступ у каждого третьего крайнего блока, входящего в блочную структуру страницы для их правильного внутреннего позиционирования. В этом случае, лучше использовать более универсальный способ отбора необходимых элементов – библиотеку jQuery, которая поддерживает все, входящие в CSS спецификацию селекторы, включая :nth-child. Более того, это обеспечит нормальную работу данного селектора даже в IE.

Все еще не можете понять принцип?

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

Post Views: 678

css каждый второй элемент — ComputerMaker.info

Автор admin На чтение 6 мин.

Nth-child и nth-of-type

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

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

See the Pen IfaoC by yoksel (@yoksel) on CodePen.

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

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

Никаких дополнительных классов, все сделано только с помощью :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-й, а затем только четные из них.

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

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

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

See the Pen itagK by yoksel (@yoksel) on CodePen.

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

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

See the Pen jAxuF by yoksel (@yoksel) on CodePen.

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

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

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

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

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

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

Иногда, при работе с CSS нужно выбрать какой-то определенный по счету элемент, например, в списке, таблице и.т.д. Либо нужно выбрать каждый второй, третий и.т.д. элементы. Давайте рассмотрим способ, как это можно сделать с помощью CSS и псевдокласса nth-child.

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

Давайте выделим красным цветом, например, пятый по счету элемент li. Для этого воспользуемся псевдоклассом CSS nth-child

Для того, чтобы выбрать 5 элемент, в качестве параметра для псевдокласса nth-child, нужно указать цифру 5. Все просто. Цифра 5 это позиция элемента, по порядку, в котором он находится в коде.

Вот какой результат получился.

Вместо цифры «5» можно указывать любое другое число, в зависимости от того элемента, который вы хотите выбрать.

Например, для того, чтобы выбрать каждый второй элемент с помощью CSS, необходимо написать:

Что делать, если нужно выбрать каждый второй элемент с помощью CSS, а не только второй. Как быть в этом случае?

Используйте следуйющий код:

По сути, добавляем символ «n» к цифре.

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

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

Версии CSS

Описание

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

Синтаксис

Значения

Если a равно нулю, то оно не пишется и запись сокращается до b . Если b равно нулю, то оно также не указывается и выражение записывается в форме an . a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.

HTML5 CSS3 IE Cr Op Sa Fx

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

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

Css четный нечетный элемент. Как выбрать в css первый элемент родителя. Использование псевдокласса CSS:nth-last-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.

Ну и напоследок

Вы можете поиграть с различными выражениями для селектора на

Существует такой селектор, точнее псевдокласс, называемый: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 есть хороший справочник с милой табличкой , которую я бесстыдно опубликую здесь:

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

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

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

Обозначения

Значения

odd Все нечётные номера элементов. even Все чётные номера элементов. Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке. Задаётся в виде an±b , где a и b — целые числа, а n — счётчик, который автоматически принимает значение 0, 1, 2…

Если a равно нулю, то оно не пишется и запись сокращается до b . Если b равно нулю, то оно также не указывается и выражение записывается в форме an . a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.

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

:nth-child(n+2):nth-child(-n+5) { … }

Пример

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

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

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor»s draft (Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации ) — первая черновая версия стандарта.

Описание

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

Синтаксис

элемент:nth-child(odd | even | | ) {…}

Значения

Если a равно нулю, то оно не пишется и запись сокращается до b . Если b равно нулю, то оно также не указывается и выражение записывается в форме an . a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.

HTML5 CSS3 IE Cr Op Sa Fx

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

Описание

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

Синтаксис

элемент:nth-child(odd | even | | ) {…}

Значения

Если a равно нулю, то оно не пишется и запись сокращается до b . Если b равно нулю, то оно также не указывается и выражение записывается в форме an . a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.

HTML5 CSS3 IE Cr Op Sa Fx

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

Как работает nth-child | CSS-уловки

Есть селектор CSS, на самом деле псевдоселектор, называемый nth-child. Вот пример его использования:

  ul li: nth-child (3n + 3) {
  цвет: #ccc;
}  

Приведенный выше CSS выбирает каждый третий элемент списка внутри неупорядоченных списков. То есть 3-го, 6-го, 9-го, 12-го и т. Д. Но как это работает? А что еще можно делать с nth-child? Давайте взглянем.

Все сводится к тому, что находится между скобками.nth-child принимает в этом месте два ключевых слова: четный и нечетный . Это должно быть довольно очевидно. «Четный» выбирает элементы с четными номерами, например 2-й, 4-й, 6-й и т. Д. «Нечетный» выбирает элементы с нечетными номерами, например 1-й, 3-й, 5-й и т. Д.

Как видно из первого примера, nth-child также принимает выражений между этими скобками. Самое простое возможное выражение? Просто число. Если вы поместите просто число в круглые скобки, оно будет соответствовать только этому элементу числа.Например, вот как выбрать только 5-й элемент:

  ul li: nth-child (5) {
  цвет: #ccc;
}  

Однако вернемся к «3n + 3» из исходного примера. Как это работает? Почему выбирается каждый третий элемент? Хитрость заключается в понимании «n» и алгебраического выражения, которое представляет. Думайте о «n» как о начале с нуля, а затем о множестве всех положительных целых чисел. Затем завершите выражение. Итак, 3n — это «3xn», а все выражение вместе — «(3xn) +3».Теперь подставляя ноль и целые положительные числа, получаем:

(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 + 0» или даже проще «3n».

(3 x 0) = 0 = нет совпадений
(3 x 1) = 3 = 3-й элемент
(3 x 2) = 6 = 6-й элемент
(3 x 3) = 9 = 9-й элемент
и т. Д.

Итак, как видите, совпадения точно такие же, «+3» не требуется. Мы можем использовать отрицательные значения n, а также использовать вычитание в выражениях. Например, 4н-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 = нет совпадений
и т. Д.

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

Совместимость с браузером

nth-child — один из тех довольно неудачных атрибутов CSS, который находится между почти полной кросс-браузерной совместимостью, за исключением полностью нулевой поддержки в IE, даже в IE 8.Поэтому, когда дело доходит до его использования, если конечный результат каким-то образом представляет собой «прогрессивное улучшение» (например, применение прохладной цветовой палитры к строкам таблицы), тогда, во что бы то ни стало, дерзайте. Но вам, вероятно, не стоит использовать его, если вы делаете что-то более важное, например, полагаетесь на него при создании структуры сайта. Например, удаление правого поля из каждого третьего блока в сетке блоков три на три, чтобы они соответствовали правильному расположению.

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

Все еще не понимаете?

Я не большой поклонник фразы «Я учусь наглядно». Конечно, все. Наглядные пособия чрезвычайно полезны в подобных ситуациях. Чтобы помочь, я собрал небольшую страницу тестера nth-child. Там вы можете ввести выражения и увидеть результаты того, что он выбирает ниже.

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

html — стиль каждого третьего элемента?

Чистый CSS, без Javascript, с поддержкой IE7 / 8

Требуется изменение HTML, или…

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

Демо скрипка

HTML

  <раздел>
  
 
  
 
  
 
  
 
  
 
  
 
  
 

  

КСС

 .explicitClass {
    ваше свойство, которое нужно изменить: ваше значение, желаемое;
}
  

… Требуется расширенная разметка CSS

Или вы должны сгенерировать CSS, который громоздко «считает» за вас. Как отметил Инди в своем ответе (не уверен, почему он заявил, что соседний брат «недоступен по умолчанию в IE8 или ниже», поскольку это неверно), это можно было бы обработать с помощью препроцессора CSS, но даже тогда вы действительно не хотите пойти по этому пути, если у вас очень ограниченное количество элементов, вероятно, не больше, чем то, что вы опубликовали для своего примера.Если бы элементов были сотни, это не практично. Это решение не требует изменения вашего HTML.

ДЕМО скрипка

КСС

  раздел div: первенец,
раздел div: first-child + div + div + div,
раздел div: first-child + div + div + div + div + div + div {
    ваше свойство, которое нужно изменить: ваше значение, желаемое;
}
  

В конечном счете, я согласен с JoshC и Indy

Я предложил приведенные выше ответы только для того, чтобы показать, что вы должны делать, если вы действительно хотите того, о чем говорите.Если бы это был я, если бы изменение стилей для каждого третьего элемента не было абсолютно жизненно важным (поэтому отключение javascript фатально для всей схемы; и даже это можно было бы обойти, чтобы изменить стиль для не-javascript), я бы использовал Ответ JoshC в качестве вашего CSS, а затем используйте некоторую форму решения javascript, чтобы сделать его обратно совместимым (как отметил Инди, или любую другую форму решения javascript).

Введение в селектор CSS nth-child | Мэтью Кроак

Используя nth-child (odd) , вы можете применить CSS к каждому нечетному дочернему элементу.Если бы вы переписали приведенный выше CSS, чтобы повлиять на каждый нечетный элемент, тег p для Келли, Стэнли, Майкла и т. Д. Стал бы красным.

даже

И наоборот, nth-child (even) применит CSS к Creed, Oscar, Jim и т. Д. Формула

(

Помимо значения n может быть любым числом, вы также можете использовать формулу. nth-child (3n) повлияет на каждый третий дочерний элемент. nth-child (3n + 1) будет применяться к каждому третьему элементу, начиная с первого.Умножение и деление не поддерживаются в формулах nth-child (n) . Давайте разберем этот формат формулы и посмотрим, что означает каждая часть для nth-child .

a представляет размер цикла. Если a равно 3, это означает, что CSS применяется к каждому третьему элементу. См. Ниже p: nth-child (3n) .

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

b представляет значение смещения. Если вы посмотрите на предыдущий пример nth-child (3n + 1) , CSS будет применяться к каждому третьему элементу, изначально смещенному на единицу. Таким образом, для p: nth-child (3n + 1) будет затронут первый тег p , а затем — каждый третий тег. См. ниже.

Вы также можете использовать вычитание. В nth-child (3n-1) цикл равен 3, а n является счетчиком, что означает, что будет затронут каждый третий тег p . Но когда смещение равно -1, что по существу составляет 3n + (- 1) , вы должны начать свой цикл с одного элемента перед первым тегом p . См. ниже.

Теперь, когда вы понимаете формульную опцию для nth-child , давайте проверим обратную операцию, отрицательный дочерний диапазон .

CSS nth-last-child (n) Селектор: nth-last-child (n)

Что такое CSS: селектор nth-last-child (n)?

CSS: селектор nth-last-child (n) соответствует только последнему n-му дочернему элементу родительского элемента.

Синтаксис

Общий синтаксис: селектор nth-last-child,

 : nth-last-child (n) {
  стоимость имущества;
  стоимость имущества;
  ...
}

/ * n-ый номер в списке с последнего * /
li: nth-last-child (n) {
  стоимость имущества;
  стоимость имущества;
  ...
}

/ * выбрать нечетный элемент в списке из последнего * /
li: nth-last-child (odd) {
  стоимость имущества;
  стоимость имущества;
  ...
}

/ * выбрать четный элемент в списке из последнего * /
li: nth-child (even) {
  стоимость имущества;
  стоимость имущества;
  ...
}

/ * каждый второй элемент в списке с последнего * /
li: nth-child (2n + 1) {
  стоимость имущества;
  стоимость имущества;
  ...
}

/ * каждый третий элемент в списке с последнего * /
li: nth-child (3n + 1) {
  стоимость имущества;
  стоимость имущества;
  ...
}  

Пример

CSS-селектор li: nth-last-child (2) выбирает только второй последний элемент