Герб Укріїни
Віримо в Україну та ЗСУ. Слава Україні!

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

Элемент :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 адреса не оприлюднюватиметься. Обов’язкові поля позначені *