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

176 • Глава 5. Повышение эффективности за счет псевдоклассов

Технически ничто не запрещает вам добавить классы к первому, четвертому, седь-
мому и десятому элементам списка, но на это потребовалось бы много времени,
плюс вы могли бы забыть про какой-то элемент, и, конечно, размер страницы стал
бы значительно больше. Но важнее всего то, что подобный код крайне сложно
поддерживать. Если в будущем возникнет необходимость добавить между суще-
ствующими элементами списка новый, вам придется переопределить классы всех
элементов списка, следующих за новым, так как их порядковые номера изменятся.
Намного более эффективно и безопасно использовать псевдокласс :nth_child(),
который сам отслеживает порядковые номера и сопоставляет их с элементами.
Не пугайтесь расчетов: математика здесь не настолько сложна, чтобы сразу от-
брасывать мысль об использовании :nth-child(). В Сети вы найдете несколько
инструментов, которые помогут вам лучше понять принцип работы :nth-child().
Они дают возможность поэкспериментировать, вводя различные значения и одно-
временно наблюдая за изменениями на странице. Из подобных инструментов мой
любимый — авторства Lea Verou, который находится на странице http://leaverou.me/
demos/nth.html. С помощью этого инструмента можно протестировать не только
:nth-child(), но также :nth-last-child(), :nth-of-type() и :nth-last-of-type().

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

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

Существует исследование, дока- так эффективны, как применение :nth-child().
зывающее, что «раскраска под Формулы :nth-child() значительно упрощают
зебру» не настолько полезна, задачу: например, формула 2n выбирает все
как может показаться. Разуме- четные строки. Если и это кажется вам слишком
ется, определенную пользу она
приносит, но ее ценность силь- сложным, ключевые слова even и odd позволяют
но преувеличена. Подробнее быстро выбрать все четные или нечетные строки,
об этом читайте в статье «Zebra соответственно. На нашей странице с коммента-
striping: More Data for the Case» риями к записи в блоге мы используем ключевое
автора Jessica Enders (http://www. слово even и установим для всех четных об-
alistapart.com/articles/zebrastripin лачков с комментариями другой фоновый цвет.
gmoredataforthecase).
Для начала загрузите файлы упражнений для этой
главы с веб-сайта http://www.stunningcss3.com

www.trk.kg