:nth-child()

    0
    899

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

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

    Также вы можете ввести один из двух предопределенных ключевых слов: even или odd. li:nth-child(even) выберет все элементы списка с положительным индексом (2, 4, 6, 8 и т.д.), а li:nth-child(odd) выберет все элементы списка с отрицательным индексом (1, 3, 5, 7 и т.д.).

    :nth-child() также позволяет вам выбрать один или более элементов используя формулу (выражение) — an+b — которая вводится в качестве аргумента. Синтаксис ввода следующий: :nth-child(an+b). Задается в виде an+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2. Например, :nth-child(3n+1) выберет первый элемент (3*0+1 = 1), четвертый элемент (3*1+1 =4), седьмой элемент (3*2+1 = 7) и так далее.

    :nth-child(an+b) делит все элементы содержащиеся в контейнере на «a» элементов и выбирает «b» элемент каждой группы. Таким образом, li:nth-child(3n+1) поделит элементы списка на 3 группы, вставит элементы с остатком в четвертую группу (если число элементов списка не делится на 3) и выберет первый элемент в каждой группе.

    Например, следующее изображение демонстрирует результат css выборки li:nth-child(3n+1) в списке элементов. Имеется 10 элементов в списке, мы имеем a = 3, десять элементов мы делим на 3. 10/3 = 3 + 1, таким образом, с учётом остатка мы имеем четыре группы. В каждой из групп, будет выбран первый элемент.

    Демонстрация работы nth-child

    Когда вы вводите формулу в :nth-child(), браузер перебирает все элементы контейнера и затем выбирает элементы, которые соответствуют формуле.

    Тонкости & Особенности

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

    Легкий способ протестировать использование псевдоклассов nth-child и nth-of-type.

    Как и другие псевдоклассы :nth-child() можете работать совместно с другими селекторами, такими как: :hover или псевдоэлементом ::after.  Например, следующее правило применит hover стили к элементам заданным формулой в :nth-child():

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

    Примеры

    Следующий пример выбирает четные строки в таблице и задает им цвет фона для создания эффекта зебры:

    Варианты использования nth-child():

    Живой пример

    Следующий пример демонстрирует как работает :nth-child(3n+1):

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

    Селектор :nth-child() поддерживается в Chrome, Firefox, Safari, Opera 9.5+, Internet Explorer 9+, на Android и iOS.

    ПОДЕЛИТЬСЯ
    Предыдущая статья:link
    Следующая статья:nth-last-child()
    Постоянный автор на exabyte.ws. Специализируюсь на Wordpress, Javascript & jQ, REST API. Любые вопросы связанные с Web разработкой вы можете задать лично или в группе вконтакте.

    ОСТАВЬТЕ ОТВЕТ

    Пожалуйста оставьте комментарий!
    Введите ваше имя