Задать стили для каждого второго, третьего, четного и т.д. элеметта html-кода.
Ничто так не заставляет трепетать слабых в математике веб-разработчиков и дизайнеров клиентских приложений, как правила на основе :nth
CSS3 обеспечивает невероятную гибкость в этом плане бла- CSS3 обеспечивает невероятную гибкость в этом плане бла- обеспечивает невероятную гибкость в этом плане благодаря правилам на основе :nth — :nth-child(n), :nth-lastchild(n), :nth-of-type(n) и :nth-last-of-type(n).
Параметр (n) допускается использовать двумя способами:
- подставить целое число, например :nth-child(2), то есть будет выбран второй элемент;
- подставить числовое выражение, например :nth-child(3n+1), то есть выборка начнется с элемента номер 1 и будет выбран каждый третий элемент.
Вариант с целым числом достаточно прост для понимания: нужно лишь ввести номер элемента, который вы желаете выбрать. Вариант селектора с числовым вы ражением может оказаться немного сложным. Проанализируем его. Начнем справа — с того, что заключено в скобки. Таким образом, например, если вы хотите разобраться в том, к выбору чего именно приведет (2n+3), начните справа (то есть с третьего элемента) и знайте, что выборке подвергнется каждый второй элемент, начиная с элемента номер 3.
Например:
nav ul li:nth-child(2n+3) a {
color: #fe0208;
}
Таким образом третий элемент и последующие каждый второй элементы списка окрасятся в красный цвет.
Правила child и last-child различаются в том, что вариант last-child работает с противоположного конца дерева документа. Например, :nth-last-child(-n+3) начинает выборку с третьего элемента с конца, а затем выбирает все элементы, следующие за ним.
