Не заменимый псевдоклас nth-child

11.04.2016

Элемент :nth-child(odd | even | число | выражение ) {…}
  •  odd — все нечетные номера элементов.
  •  Even — все четные номера элементов.
  •  Выражение — задается в виде n+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2…
  •  Число — порядковый номер дочернего элемента относительно своего родителя. нумерация начинается с 1, это будет первый элемент в списке.

Допустим, есть такой HTML:

Пишем

Таким образом вы зададите стиль третьему элементу.

 

Второй случай:

Пишем

Таким образом вы зададите стиль каждому второму элементу.

Так же удобно использовать :first-child и :last-child :
:first-child — выбираем первый элемент;
:last-child — выбираем последний элемент.

Поддержка браузерами :nth-type довольно приличная… Firefox 3.6+, Opera 9.6+, Chrome 1+, Safari 3.1+, IE 9+, Android 2.1+, iOS 2.0+.
Можете посмотреть псевдокласс тут http://css-tricks.com/examples/nth-child-tester/

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

Ваш e-mail не будет опубликован.