Принцип работы nth-правил

Ничто так не заставляет трепетать слабых в математике веб-разработчиков и дизайнеров клиентских приложений, как правила на основе :nth (разве что за исключением тех, кто может выкрутиться, попросив вас написать небольшой объем кода.

На PHP или помочь им с регулярными выражениями). Посмотрим, сможем ли мы в них разобраться и заслужить немного уважения со стороны специалистов по созданию серверных приложений.

Если вести речь о выборке элементов в древовидной структуре объектной модели документа DOM (Document Object Model) (или, проще говоря, элементов в разметке страницы), то CSS3 обеспечивает невероятную гибкость в этом плане благодаря правилам на основе :nth — :nth-child(n), :nth-lastchild(n), :nth-of-type(n) и :nth-last-of-type(n). Вы уже знаете, что можно применять значения (odd) или (even) (поскольку ранее нам пришлось корректировать нашу навигационную область), однако параметр (n) допускается использовать двумя другими способами:

О подставить целое число, например :nth-child(2), то есть будет выбран второй элемент;

О подставить числовое выражение, например :nth-child(3n+1), то есть выборка начнется с элемента номер 1 и будет выбран каждый третий элемент.

Вариант с целым числом достаточно прост для понимания: нужно лишь ввести номер элемента, который вы желаете выбрать. Вариант селектора с числовым выражением может оказаться немного сложным. Проанализируем его. Начнем справа — с того, что заключено в скобки. Таким образом, например, если вы хотите разобраться в том, к выбору чего именно приведет (2n+3), начните справа (то есть с третьего элемента) и знайте, что выборке подвергнется каждый второй элемент, начиная с элемента номер 3. Я изменил наше правило, касающееся навигационной области, чтобы проиллюстрировать это:

Nav ul li:nth-child(2n+3) a { color: #fe0208;

}

Как вы можете видеть На рисунке 5.11, третий элемент списка окрасился в красный цвет, равно как и каждый второй последующий элемент за ним (если бы элементов списка было 100, то дальнейшей выборке подвергся бы каждый второй из них).

Элементы списка окрашиваются через один, начиная с третьего.

Как насчет того, чтобы выбрать все элементы, начиная со второго и далее? Что ж, несмотря на то что можно было бы написать :nth-child(1n+2), в действительности не требуется указывать номер 1, поскольку, если не оговорено иное, n равняется 1. Следовательно, мы можем просто написать :nth-child(n+2). Аналогичным образом, если нам потребуется выбрать каждый третий элемент, мы, вместо того чтобы писать :nthchild(3n+3), можем указать :nth-child(3n), поскольку каждый третий элемент в любом случае будет начинаться с третьего элемента, то есть нам не нужно явным образом указывать это.

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

Nav ul li:nth-child(3n-2) a { color: #fe0208;

}

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

В красный цвет окрашивается каждая третья ссылка.

Надеюсь, теперь вы полностью разобрались во всем этом.

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

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

Красными стали три элемента с конца.

Позволяет конкретно указать, элементы какого типа требуется выбрать. Взгляните на следующую разметку:

<ul>

<li class="internal"><a href="#">Why?</a></li>

<li><a href="#">Synopsis</a></li>

<li class="internal"><a href="#">Stills/Photos</a></li>

<li class="internal"><a href="#">Videos/clips</a></li>

<li class="internal"><a href="#">Quotes</a></li>

<li class="internal"><a href="#">Quiz</a></li>

</ul>

Обратите внимание, что для второго элемента списка не задан класс internal.

Теперь взгляните на такое правило:

Nav ul li. internal:nth-of-type(n+2) a { color: #fe0208;

}

Как вы можете видеть, мы «говорим» CSS следующее: «Начиная со второго соответствующего элемента, нацелиться на каждый элемент <li> с классом internal». Вот как результат будет выглядеть в браузере (рисунок 5.14).

В красный цвет окрашены все ссылки, для которых задан класс internal

В CSS3 ОТСЧЕТ ВЕДЕТСЯ НЕ ТАК, КАК В JQUERY!

Если вам доводилось использовать jQuery, то вы знаете, что там отсчет ведется от 0. Например, если при выборке элемента с применением jQuery указать целочисленное значение 1, то на самом деле это приведет к выборке второго элемента. Однако в CSS3 отсчет начинается с 1, то есть указание значения 1 приведет к выборке первого элемента, которому оно соответствует.

Селектор псевдокласса отрицания (:not).

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

Nav ul li:not(.internal) a { color: #fe0208;

}

Теперь окрашена лишь та ссылка, для которой не установлен класс internal.

До сих пор мы главным образом рассматривали то, что называется структурными псевдоклассами (полную информацию о них можно получить по адресу http://www.w3.org/TR/selectors/#structural-pseudos). Однако в CSS3 есть много других селекторов. Если вы работаете над веб-приложением, то вам стоит взглянуть на полный перечень псевдоклассов состояний элементов интерфейса пользователя (http://www.w3.org/TR/selectors/#UIstates).

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