Page 179 - Сила CSS3 Освой новейший стандарт

Выбор определенных элементов без идентификаторов и классов • 179

к каждому второму облачку. Хотя чередующиеся
цвета облачков с комментариями не дают особо- Готовая страница с перечислен-
го выигрыша в смысле удобства использования, ными изменениями называется
как часто бывает с «раскрашенными под зебру» alternate_final.html. Она сохране-
таблицами, главный урок вы наверняка усвоили: на в папке с остальными файлами
упражнений для этой главы.
нет ничего проще и эффективнее, чем выбор
нужных элементов по определенному шаблону
с помощью :nth-child().

Таблица 5.2. Поддержка псевдокласса :nth-child() в браузерах
IE Firefox Opera Safari Chrome

Да, начиная с версии 9 Да, начиная с версии 3.5 Да* Да Да

* Opera поддерживает :nth-child(), но неправильно обновляет стили, если после за-
грузки страницы на нее с помощью JavaScript добавляются новые элементы. Эту
ошибку можно исправить, добавив в код страницы объявление :last-child. Пример
и дополнительную информацию вы найдете на сайте http://www.quirksmode.org/
css/nthchild.html.

коротко о пСевдоклаССе :nth-ChIld()

Псевдокласс :nth-child() входит в модуль Selectors (Селекторы), который вы найдете на
сайте W3C: http://www.w3.org/TR/css3-selectors. Это структурный псевдокласс, выбирающий
элемент на основе его местоположения в списке братьев внутри общего родительского
элемента.
В скобках при записи псевдокласса :nth-child() нужно указать либо порядковый номер
(для выбора определенного ребенка), либо ключевое слово odd или even (для выбора
всех нечетных или четных детей), а также можно использовать формулу an+b (для выбора
определенной комбинации дочерних элементов). В этом случае a представляет размер
цикла, n — счетчик, начинающийся с нуля, а b — смещение.
Значения a и b могут быть отрицательными. Если a=1, то его можно вообще не указывать
(так как 1n+3 — это то же самое, что n+3). Если b=0 или a=b, то можно не указывать значе-
ние b (так как 2n+0 и 2n+2 — это то же самое, что 2n). Подробнее об этом рассказывается
на странице http://reference.sitepoint.com/css/understandingnthchildexpressions.
Помимо «раскраски под зебру», псевдокласс :nth-child() можно применять для решения
следующих задач:
• стилизация первых двух (или более) абзацев статьи особым образом (для первых двух
абзацев используйте формулу –n+2);

• вывод первых десяти элементов в списке ста лучших более крупным шрифтом (ис-
пользуйте –n+10);

www.trk.kg