Задать стили для каждого второго, третьего, четного и т.д. элеметта html-кода.

Ничто так не заставляет трепетать слабых в математике веб-разработчиков и дизайнеров клиентских приложений, как правила на основе :nth

CSS3 обеспечивает невероятную гибкость в этом плане бла- CSS3 обеспечивает невероятную гибкость в этом плане бла-  обеспечивает невероятную гибкость в этом плане благодаря правилам на основе :nth — :nth-child(n), :nth-lastchild(n), :nth-of-type(n) и :nth-last-of-type(n).

 

Параметр (n) допускается использовать двумя способами:

  1. подставить целое число, например :nth-child(2), то есть будет выбран второй элемент;
  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) начинает выборку с третьего элемента с конца, а затем выбирает все элементы, следующие за ним.

 

Добавить комментарий


Защитный код
Обновить