Элемент :nth-child(odd | even | число | выражение ) {…}
- odd – все нечетные номера элементов.
- Even – все четные номера элементов.
- Выражение – задается в виде n+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2…
- Число – порядковый номер дочернего элемента относительно своего родителя. нумерация начинается с 1, это будет первый элемент в списке.
Допустим, есть такой HTML:
|
1 2 3 4 5 6 7 8 9 |
<div> <p>Little</p> <p>Little</p> <p>Little</p> <!-- Нужен этот элемент --> <p>Little</p> <p>Little</p> <p>Little</p> <p>Little</p> </div> |
Пишем
|
1 |
div p:nth-child(3) {background: red;} |
Таким образом вы зададите стиль третьему элементу.
Второй случай:
|
1 2 3 4 5 6 7 8 9 |
<div> <p>Little</p> <p>Little</p><!-- Нужен этот элемент --> <p>Little</p> <p>Little</p><!-- Нужен этот элемент --> <p>Little</p> <p>Little</p><!-- Нужен этот элемент --> <p>Little</p> </div> |
Пишем
|
1 |
div p:nth-child(2n+n) {background: red;} |
Таким образом вы зададите стиль каждому второму элементу.
Так же удобно использовать :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/
Залишити відповідь