Свойство nth-child

Как работает CSS свойство nth-child и nth-of-type

118

:nth-child — один из моих самых любимых селекторов, потому что с помощью него можно делать клевые разноцветные штуки собирать элементы списка в группы произвольной длины и делать с ними разные интересные вещи: от полосатых таблиц до целых разноцветных дизайнов, и все это без необходимости задавать дополнительные классы или как-то менять разметку. Вот простой пример полосатых таблиц: Полоски помогают легче скользить глазами по длинной строке или столбцу, это увеличивает читабельность больших таблиц, а сделать это можно всего лишь парой строчек в CSS:/* Горизонтальные полоски */ TR:nth-child(odd) { background: #EEE; } /* Вертикальные полоски */ TD:nth-child(odd) { background: #EEE; }Или вот что можно сделать с обычным списком вроде такого:
Никаких дополнительных классов, все сделано только с помощью :nth-child:

В круглых скобках задается размер цикла: например (3n) выберет каждый третий элемент.

Также можно задать сдвиг вперед или назад: (3n+1) — найдет каждый третий и сделает один шаг вперед, а (3n-2) — два шага назад от найденого.

Если размер цикла не задан — (n) — выберутся все элементы списка. Если размер цикла не задан, но задано конкретное число — (5) — выберется элемент списка с этим индексом.

Обратите внимание
Важно

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

[/su_box]

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

Примеры

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если Вам или Вашей компании необходимо реализовать верстку макетов, пишите  мне.   Профессионально занимаюсь версткой сайтов любой сложности, пишу гибкий качественный код. Максимальное использование возможностей CSS эффектов и анимаций. Использование подходов БЭМ. 

Email — [email protected]

Telegram — @abraxabr 

Vk — https://vk.com/ivan_raiz

CSS

Источник: https://abraxabra.ru/blog/css/how-does-the-css-property-nth-child-and-nth-of-type/

CSS псевдокласс :nth-child()

Первый заголовок h2 тега body

  • один
  • два
  • три

Второй заголовок h2 тега body

Первый заголовок h2 тега article

  • один
  • два
  • три

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

и

  • , которые имеют определённый порядковый номер дочернего элемента внутри своих родительских элементов.

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

    Пример использования псевдоэлемента :last-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) {
    background-color: lightblue; /* устанавливаем цвет заднего фона */
    }
    Этот селектор означает, что каждая четвёртая ячейка таблицы (

    ) внутри строки, начиная со второй ячейки таблицы, будет стилизована:

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

    В формулах допускается использование значений со знаком вычитания, но в этом как правило нет необходимости:
    td:nth-child(4n-1) {
    background-color: lightblue; /* устанавливаем цвет заднего фона */
    }
    Этот селектор означает, что каждая четвёртая ячейка таблицы (

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

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

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

    1234567891011121314
    2
    3
    4

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

    ) внутри строки, начиная со второй ячейки таблицы. Результат нашего примера:

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

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

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

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

    Первый параграф<\p>

    Второй параграф

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

    p:nth-child(2) {
    background-color: khaki; /* устанавливаем цвет заднего фона */
    }
    p:nth-of-type(2) {
    background-color: khaki; /* устанавливаем цвет заднего фона */
    }

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

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

    ), про него мы совсем забыли:

    Заголовок второго уровня

    Первый параграф

    Второй параграф

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

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

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

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

    CSS селекторы

    Источник: https://basicweb.ru/css/css_sel_nth-child.php

    Nth-child и nth-of-type

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

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

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

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

    /* Горизонтальные полоски */
    TR:nth-child(odd) { background: #EEE; }
    /* Вертикальные полоски */
    TD:nth-child(odd) { background: #EEE; }

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

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

    See the Pen Nth-child games by yoksel (@yoksel) on CodePen.

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

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

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

    В круглых скобках задается размер цикла: например (3n) выберет каждый третий элемент.

    Также можно задать сдвиг вперед или назад: (3n+1) — найдет каждый третий и сделает один шаг вперед, а (3n-2) — два шага назад от найденого.

    Если размер цикла не задан — (n) — выберутся все элементы списка. Если размер цикла не задан, но задано конкретное число — (5) — выберется элемент списка с этим индексом.

    Обратите внимание
    Важно

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

    [/su_box]

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

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

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

    P:nth-child(odd)

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

    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:

    See the Pen Fluffy gallery by yoksel (@yoksel) on CodePen.

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

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

    See the Pen Waves and bubbles by yoksel (@yoksel) on CodePen.

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

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

    Источник: http://css.yoksel.ru/nth-child/

    Использование псевдокласса 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

    Перевод — Дежурка

    Смотрите также:

    Источник: http://www.dejurka.ru/css/how-to-use-css-nth-child/

    Псевдоклассы CSS: nth-child и nth-of-type

    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 выглядит примерно так:

    li:nth-child(выражение); {}

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

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

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

    • lorem ipsum
    • lorem ipsum
    • lorem ipsum
    • lorem ipsum
    • lorem ipsum
    • lorem ipsum
    • lorem ipsum
    • lorem ipsum
    • lorem ipsum
    • lorem ipsum
    • lorem ipsum
    • lorem ipsum

    Чтобы выбрать третий элемент списка, нужно указать 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 отбирает дочерние элементы по индексу и не учитывает тип элемента.

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

    lorem ipsum;

    Aenean commodo ligula eget dolor. Vestibulum dapibus nunc ac augue;

    Nunc sed turpis. Donec posuere vulputate arcu;

    Есть раздел с заголовком, подзаголовком и несколькими абзацами. Я хочу, чтобы первый абзац немного выделялся с помощью увеличенного размера шрифта 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» дружной командой проекта Сайтостроение от А до Я.

    Источник: https://www.internet-technologies.ru/articles/psevdoklassy-css-nth-child-i-nth-of-type.html

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

    В 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.

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

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

    Источник: http://www.css-tricks.ru/articles/css/how-nth-child-works

    Использование псевдокласса :nth-child

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

    В этой демонстрации мы детально разберем механизм работы этого селектора. Начнем с исходной html-разметки. Работать будем с обычным списком.

    Зададим стили для списка и его элементов. Теперь у нас есть наглядная сетка, над которой и будем экспериментировать.

    Самый простой вариант использования данного селектора: задать конкретное число. Наш селектор:

    li:nth-child(4)

    Совет

    Он обозначает: «Выбрать четвертый по счету элемент списка». Как видите, подсветился нужный элемент.

    Чтобы выбрать небольшое количество элементов, можно несколько раз использовать :nth-child с нужными номерами.

    Однако, если количество таких элементов велико, то такой подход не сработает. Представьте, сколько css-кода нужно, чтобы выделить все чётные элементы в примере.

    Не забывайте экспериментировать. Поменяйте номера в css-коде, чтобы подсветить другие элементы.

    В общем виде значение этого псевдокласса задаётся с помощью выражения: 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(2n) соответствует всем чётным элементам. Для четных элементов существует также специальное ключевое слово even.

    Посчитаем номера для :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-ый элемент …

    Т.е. все нечетные элементы.

    Для нечетных элементов тоже существует ключевое слово: odd.

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

    Рассчитаем выражение посложнее :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-ый элемент …

    Поэкспериментируйте с выражением в стилях.

    Если использовать большое положительное число 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-ый элемент …

    Можно использовать отрицательный 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 элементов в начале, а все остальное не выделять.

    Обратите внимание

    На предыдущих шагах мы с помощью разных выражений выделяли разные множества элементов. Cуществует возможность задавать множество с помощью комбинирования выражений.

    Например: :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+8) → :nth-child(n+4)

    Сдвинем правую границу: :nth-child(-n+14) → :nth-child(-n+18)

    Попробуйте поизменять размер выделения

    Можно комбинировать более двух выражений. Выражение в заголовке обозначает: «взять элементы с 4 по 18 включительно и среди них выделить только нечетные».

    Мы создали множество «элементы с 4 по 18 включительно, нечетные».

    Создадим второе множество «элементы с 4 по 18 включительно, четные».

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

    :nth-of-type работает почти так же, как и :nth-child. Разница заключается в том, что он учитывает тип элемента.

    Для того, чтобы поэкспериментировать с этим псевдоклассом, изменим код примера. Вначале в html коде создадим список из двух элементов: span и strong. И обернем этот список в контейнер.

    С помощью css оформим список. span будут лежачими прямоугольниками, а strong будут стоячими прямоугольниками.

    Приступаем к экспериментам.

    Попробуем простейшие выражения с числом.

    Выделить третий span:

    span:nth-of-type(3)

    Выделить пятый strong:

    strong:nth-of-type(5)

    Выражения с четными/нечетными элементами.

    Выделить нечетные span:

    span:nth-of-type(odd)

    Выделить четные strong:

    strong:nth-of-type(even)

    Выделить нечетные 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 идет между всеми потомками одного родителя.

    Важно

    Продемонстрируем это отличие еще раз. span:nth-of-type(odd) подсвечивает только нечетные лежачие прямоугольники.

    Если для этого же кода использовать span:nth-child(odd), то подсвечиваются все лежачие прямоугольники.

    Это связано с тем, что после каждого элемента span, расположен strong, который влияет на счетчик псевдокласса :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 не поддерживается браузером IE8 и младше. Если нужна поддержка старых браузеров, то можно использовать JavaScript, чтобы добавить стили нужным элементам. Например, на JQuery:

    $('li:nth-child(3n)').addClass('third');

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

    Назад Вперед<\p>

    Источник: https://htmlacademy.ru/demos/2

    :nth-child()

    The :nth-child() CSS pseudo-class matches elements based on their position in a group of siblings.

    /* Selects every fourth element among any group of siblings */
    :nth-child(4n) { color: lime;
    }

    Syntax

    The nth-child pseudo-class is specified with a single argument, which represents the pattern for matching elements.

    Keyword values

    oddRepresents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc.evenRepresents 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
    = | ? '*'
    = | | |
    = ':'
    = ':' | ':' ')'

    Обратите внимание

    where
    = ?
    = [ | '*' ]? |
    =
    = '.'
    = '[' ']' | '[' [ | ] ? ']'

    where
    = [ '~' | | | '^' | '$' | '*' ]? '='
    = i | s

    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

    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

    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

    elements of a group of siblings.

    Detailed example

    HTML

    span:nth-child(2n+1), WITHOUT an <em> among the child elements

    Children 1, 3, 5, and 7 are selected.

    Span 1! Span 2 Span 3! Span 4 Span 5! Span 6 Span 7!

    span:nth-child(2n+1), WITH an <em> among the child elements

    Children 1, 5, and 7 are selected.
    3 is used in the counting because it is a child, but it isn't selected because it isn't a <span>.

    Span! Span This is an `em`. Span Span! Span Span! Span

    span:nth-of-type(2n+1), WITH an <em> among the child elements

    Children 1, 4, 6, and 8 are selected.
    3 isn't used in the counting or selected because it is an <em>, not a <span>, and nth-of-type only selects children of that type. The <em> is completely skipped over and ignored.

    Span! Span This is an `em`. Span! Span Span! Span Span!

    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

    Browser compatibility

    Update compatibility data on GitHub

    DesktopMobileChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetBasic support

    of syntax

    Matches elements with no parent

    Chrome Full support 1 Edge Full support Yes Firefox Full support 3.5 IE Full support 9 Opera Full support 9.5NotesFull support 9.5NotesNotes Before Opera 15, Opera does not handle dynamically inserted elements for :nth-child(). Safari Full support 3.1 WebView Android Full support Yes Chrome Android Full support Yes Edge Mobile Full support Yes Firefox Android Full support 4 Opera Android Full support 9.5NotesFull support 9.5NotesNotes Before Opera 15, Opera does not handle dynamically inserted elements for :nth-child(). Safari iOS Full support 3.1 Samsung Internet Android Full support Yes
    Chrome No support No Edge ? Firefox No support NoNotesNo support NoNotesNotes See bug 854148. IE ? Opera ? Safari Full support 9 WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android No support NoNotesNo support NoNotesNotes See bug 854148. Opera Android ? Safari iOS Full support 9 Samsung Internet Android No support No
    Chrome Full support 57 Edge ? Firefox Full support 52 IE ? Opera Full support 44 Safari ? WebView Android Full support 57 Chrome Android Full support 57 Edge Mobile ? Firefox Android Full support 52 Opera Android Full support 44 Safari iOS ? Samsung Internet Android Full support 7.0

    Full support  Full supportNo support  No supportCompatibility unknown  Compatibility unknownSee implementation notes.See implementation notes.

    See also

    • :nth-of-type, :nth-last-child

    Источник: https://developer.mozilla.org/docs/Web/CSS/:nth-child

    CSS от А до Я: как использовать CSS селектор nth-child

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

    N значит nth-child

    В CSS есть множество мощных селекторов, с помощью которых можно находить элементы на странице и применять к ним стили.

    Из-за гибкости выражения для нахождения элементов по шаблону (an+b) псевдокласс nth-child, возможно, является самым мощным. Более подробно данный псевдокласс был разобран в видеоуроке.

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

    Когда нужно использовать nth-child?

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

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

    Совет 1: если вы поддерживаете IE8, используйте :first-child

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

    Практический курс по верстке адаптивного сайта с нуля!

    Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

    Узнать подробнее

    Не нужно добавлять рамку справа и затем удалять ее на последнем элементе. Лучше добавьте рамку слева и удалите ее у первого элемента.

      border-left: 2px solid grey;.site-nav li:first-child {

    Так же можно поступить и для верхних и нижних рамок. Если же вам посчастливилось не поддерживать IE8, читайте дальше…

    Совет 2: используйте вместо классов :first-child и :last-child

    Если вы создаете или используете готовую сетку, и вам нужно сделать что-то с первой и последней ячейками в ряду, воспользуйтесь псевдоклассами :first-child и :last-child вместо классов типа .first и .last в HTML.

    Так ваш HTML код будет выглядеть чище, и вам не придется слишком много думать во время разработки макета. Иногда макеты бывают очень сложными. Чем меньше вам нужно думать над ним, тем лучше.

    Совет 3: используйте nth-child для альтернативных стилей

    Классический пример альтернативных стилей – разный фон для четных и нечетных строк в таблице. Еще один пример – обтекание четных и нечетных блоков контента по левому и правому краю на странице или в контейнере (нить комментариев или диалог).

    Практический курс по верстке адаптивного сайта с нуля!

    Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

    Узнать подробнее

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

    .data-table tr:nth-child(even) {.data-table tr:nth-child(odd) {.data-table tr:nth-child(even) {

    Совет 4: избегайте странных и сложных выражений с nth-child

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

    Выражения типа li:nth-child(-n+3) или li:nth-child(5n+1):not(nth-child(3n-1)) слишком сложны для понимания. Понятия не имею, что они значат, но они работают!

    К сожалению, в некоторых сложных дизайнах без таких выражений не обойтись. Но представьте, что вы вернетесь к коду через пару месяцев и попытаетесь понять, что вы хотели сделать. Даже у опытных экспертов по CSS на это уйдет довольно много времени!

    Совет 5: используйте nth-child, когда не можете контролировать HTML

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

    При создании шаблона для сайта на CMS у вас будет возможность контролировать HTML структуру и создавать классы и атрибуты. Однако иногда в ваших шаблонах будут такие места, куда будет вставляться контент из текстовых полей или областей из самой CMS. Классический пример – WP the_content – один большой кусок HTML, который вы либо плохо контролируете, либо не контролируете вообще.

    В этой ситуации вам помогут :first-child, :last-child и :nth-child. Вот и все, 5 советов по тому, как использовать или не использовать самые мощные и гибкие CSS селекторы.

    Источник: https://webformyself.com/css-ot-a-do-ya-kak-ispolzovat-css-selektor-nth-child/

  • Ссылка на основную публикацию