HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - Фрэйн .

Теперь, несмотря на то что значения идентификаторов и классов в HTML5 могут начинаться с цифр, спецификация CSS по-прежнему не позволяет использовать селекторы идентификаторов и классов, начинающиеся с цифр (http://www.w3.org/TR/CSS21/syndata.html).

К счастью, этот запрет легко обойти, воспользовавшись селектором атрибутов, например [id="10"].

Структурные псевдоклассы CSS3

В CSS3 предоставляется более эффективный механизм выбора элементов на основе их местоположения в структуре DOM.

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

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

<nav class="nav-Wrapper">

    <a href="/home" class="nav-Link">Home</a>

    <a href="/About" class="nav-Link">About</a>

    <a href="/Films" class="nav-Link">Films</a>

    <a href="/Forum" class="nav-Link">Forum</a>

    <a href="/Contact-Us" class="nav-Link nav-LinkLast">Contact Us</a>

</nav>

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

Селектор :last-child

В CSS 2.1 уже был селектор, применяющийся для выбора первого элемента списка:

div:first-child {

    /* Стили */

}

А в CSS3 добавился селектор, который также может соответствовать последнему элементу:

div:last-child {

    /* Стили */

}

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

@media (min-width: 60rem) {

    .nav-Wrapper {

        display: flex;

    }

    .nav-Link:last-child {

        margin-left: auto;

    }

}

Есть также селекторы для тех случаев, когда имеется только один элемент :only-child и только один элемент заданного типа :only-of-type.

Селекторы nth-child

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

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

.nav-Link:nth-child(odd) {

    /* Стили */

}

А так можно выбрать каждый первый элемент:

.nav-Link:nth-child(even) {

    /* Стили */

}

Усвоение порядка работы nth-правил

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

CSS3 обеспечивает невероятную гибкость, позволяя нам использовать ряд правил на nth-основе:

• nth-child(n);

• nth-last-child(n);

• nth-of-type(n);

• nth-last-of-type(n).

Мы уже видели, как в выражениях на nth-основе можно использовать значения (odd) или (even), а вот параметр (n) может использоваться следующими двумя способами:

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

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

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

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

Разбираемся с математикой. Рассмотрим десять линейных блоков span на странице (посмотреть их в работе можно, запустив пример из файла каталога example_05-05):

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

Изначально им будет задан следующий стиль:

span {

    height: 2rem;

    width: 2rem;

    background-color: blue;

    display: inline-block;

}

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

А теперь посмотрим, как можно выбрать различные элементы с помощью селекции на nth-основе.

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

span:nth-child(2n+3) {

    color: #f90;

    border-radius: 50%;

}

даст на экране браузера следующий результат.

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

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

Можно также изменить направление. По умолчанию, как только найдена первая часть заданного выбора, последующие части ищутся вниз по элементам в DOM-дереве (и поэтому выбор в нашем примере идет слева направо). Но направление можно изменить на обратное, поставив минус, например:

span:nth-child(-2n+3) {

    background-color: #f90;

    border-radius: 50%;

}

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

Надеюсь, теперь-то вы усвоили логику выражений на nth-основе?

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

И в заключение рассмотрим селекторы :nth-of-type и :nth-last-of-type. В предыдущих примерах вычисление шло в отношении всех дочерних элементов независимо от их типа (следует твердо усвоить, что селектор nth-child нацеливается на все дочерние элементы одного и того же DOM-уровня независимо от их классов), а вот селекторы :nth-of-type и :nth-last-of-type позволяют указывать тип подлежащих выбору элементов. Рассмотрим следующую разметку (файл с которой можно найти в каталоге example_05-06):

<span class="span-class"></span>

<span class="span-class"></span>

<span class="span-class"></span>

<span class="span-class"></span>

<span class="span-class"></span>

<div class="span-class"></div>

<div class="span-class"></div>

<div class="span-class"></div>

<div class="span-class"></div>

<div class="span-class"></div>

Если воспользоваться следующим селектором:

.span-class:nth-of-type(-2n+3) {

    background-color: #f90;

    border-radius: 50%;

}

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

Вскоре мы увидим, как эта же задача решается с помощью селекторов из спе­цификации CSS4.

Счетчики в CSS3 работают не так, как в JavaScript и jQuery!

Если вы привыкли пользоваться JavaScript и jQuery, то должны быть в курсе, что подсчет там ведется с нуля и выше (используется индексация, начинающаяся с нуля). Например, при выборе элемента в JavaScript или jQuery целочисленное значение 1 будет фактически указывать на второй по счету элемент. Но в CSS3 счет начинается с 1, поэтому значение 1 соответствует первому элементу.

Выбор на nth-основе в адаптивных  веб-конструкциях

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

Помните горизонтальную прокручиваемую панель, файлы для создания которой можно найти в каталоге example_05-02? Посмотрим, как это может выглядеть в той ситуации, при которой осуществить горизонтальную прокрутку невозможно. Используя ту же разметку, поместим верхнюю десятку самых кассовых фильмов 2014 года в решетку grid-системы. Для некоторых окон просмотра решетка будет шириной всего в два элемента, по мере увеличения окна просмотра будут показаны три элемента, при еще более крупных размерах — четыре элемента. Но при этом возникает проблема. Независимо от размера окна просмотра нам бы не хотелось, чтобы у самой нижней строки элементов имелась нижняя граница. Файл с соответствующим кодом можно найти в каталоге example_05-09.