Селектор nth-child

Как насчет обеспечения чередования цветов, в которые были окрашены ссылки на навигационной панели из оригинальной композиции? Опять-таки в CSS3 есть селектор, позволяющий нам выполнить это без необходимости дополнительной разметки:

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

Nav ul li:nth-child(even) a { color: #fe0208;

}

Теперь наши навигационные ссылки окрашены в чередующиеся цвета (рисунок 5.10).

Цвета ссылок чередуются.

Ну как? Ни единой jQuery-строки в коде сайта и никакой дополнительной разметки! Что я вам говорил? CSS3-селекторы — это отличная штука!