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

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

12.0+ 9.0+ 3.5+ 4.0+ 9.6+ 3.2+

Описание

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

Синтаксис

В круглых скобках указывается аргумент, который может быть числом, ключевым словом или числовым выражением в виде an+b, где a и b целые числа, а n — счётчик, автоматически принимающий целые неотрицательные значения от 0 и больше: 0, 1, 2, 3, . .

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

Всего есть два возможных ключевых слова: odd (нечётные) и even (чётные). Они позволяют выбирать дочерние элементы имеющие чётные или нечётные порядковые номера:

Часть выражения "an" вычисляет позиции дочерних элементов по следующей формуле: число*n, так как n — счётчик, вместо него при вычислении автоматически подставляются числовые значения начиная с 0 и далее значение каждый раз увеличивается на единицу больше предыдущего: 0,1,2,3 и т.д. Допустим нам необходимо выбрать каждый третий пункт списка, для этого нам надо написать всего лишь 3n:

Таким образом пункты списка будут выбираться по следующей формуле:
3 * 0 = 0 — ничего не выбрано
3 * 1 = 3-ий пункт
3 * 2 = 6-ой пункт
и т.д.

Часть выражения "b" позволяет указать с какой позиции следует начинать выбор элементов. Допустим нам необходимо выбрать каждый третий пункт списка начиная со второго пункта в списке, для этого нам надо написать следующее выражение 3n + 2:

Таким образом пункты списка будут выбираться по следующей формуле:
(3 * 0) + 2 = 2-ой пункт
(3 * 1) + 2 = 5-ый пункт
(3 * 2) + 2 = 8-ой пункт
и т.д.

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

В этой статье мы рассмотрим:

  • различные способы использования :nth-child ;
  • более гибкий селектор :nth-of-type ;
  • и связанные с ними селекторы :nth-last-child и :nth-last-of-type .

:nth-last-of-type

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

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

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

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

Читайте также:  Библиотека boost c описание

У меня есть маркированный список из 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-селекторы — нет.

Читайте также:  Как открыть файл xsd вышивки крестом

: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 » , подготовленной дружной командой проекта Интернет-технологии.ру

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

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

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

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

Селектор Chrome Firefox Opera Safari IExplorer Edge
:nth-child() 4.0 3.5 9.6 3.2 9.0 12.0

CSS синтаксис:

Версия CSS

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

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

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


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

Что общего у элементов, выделенных на изображении? А общее у них то, что они выделены оранжевым цветом. Смешно? Не думаю. Общее у них все же есть, элементы являются вторыми дочерними элементами своих родителей, а элемент

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

В этом примере с использованием псевдокласса :nth-child мы стилизовали элементы

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

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

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

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

  • even (четные элементы)
  • odd (нечетные элементы)
Читайте также:  Как посмотреть фото со смартфона на телевизоре

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

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

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

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

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

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

  • 4n – каждый четвертый элемент.
  • 2 – с какого элемента начинать.

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

  • 4n – каждый четвертый элемент.
  • -1 – с какого элемента начинать.

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

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

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

Отличие :nth-child от :nth-of-type()

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

Допустим, у нас есть статья, в которой два параграфа и мы хотим стилизовать абзац №2 отлично от первого, установив задний фон цвета khaki:

Допустим мы стоим перед выбором какой селектор использовать: p:nth-child(2) или p:nth-of-type(2). Попробуем проверить как работают оба варианта:

Что не удивительно оба селектора работают для данной задачи. Но в чём разница?

Давайте рассмотрим на примере, ах да, мы добавим к нашей статье заголовок второго уровня (тег

Сразу посмотрите на результат использования обоих селекторов в одном примере, затем будем разбираться почему так происходит:

Пример использования псевдоклассов :nth-of-type() и :nth-child().

В данном примере селектор p:nth-child(2) выбирает второй дочерний элемент своего родителя, а с добавлением заголовка второго уровня (тег