Знакомство с 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.

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

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

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

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

* Примечание переводчика.

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

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