Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в родительском элементе. В значении может быть указан как порядковый номер элемента:
ul li:nth-child(1) {...}
Так и выражение, которое задается в виде an+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2 и т.д.
:nth-child(3n+2) или :nth-child(-n+3)
Также доступны значении odd и even, которые определяют четные и нечетные элементы.
Псевдокласс :nth-last-child делает все тоже самое, только с конца списка элементов.
Примеры использования у списка <ul>:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
...
<li>30</li>
</ul>Все нечётные номера элементов: 1, 3, 5, 7...
ul li:nth-child(odd) {
background: skyblue;
}
/* или */
ul li:nth-child(2n+1) {
background: skyblue;
}Чётные номера элементов: 2, 3, 6, 8...
ul li:nth-child(even) {
background: skyblue;
}
/* или */
ul li:nth-child(2n) {
background: skyblue;
}Пример группировки псевдоклассов и выбор элементов 2, 4, 6, 9.
ul li:nth-child(2), ul li:nth-child(4), ul li:nth-child(6), ul li:nth-child(9) {
background: skyblue;
}Элементы 3, 6, 9, 12...
ul li:nth-child(3n) {
background: skyblue;
}Элементы 1, 5, 9, 13...
ul li:nth-child(4n+1) {
background: skyblue;
}Элементы 1, 2, 5, 6, 9, 10...
ul > li:nth-child(4n+1), ul li:nth-child(4n+2) {
background: skyblue;
}Элементы 1, 2, 6, 7, 11, 12...
ul > li:nth-child(5n+1), ul li:nth-child(5n+2) {
background: skyblue;
}Элементы 1, 2, 3, 7, 8, 9...
ul > li:nth-child(6n+1), ul li:nth-child(6n+2), ul li:nth-child(6n+3) {
background: skyblue;
}ul li:nth-child(-n+10) {
background: skyblue;
}C третьего по пятнадцатый:
ul li:nth-child(n+3):nth-child(-n+15) {
background: skyblue;
}ul li:nth-child(n+11) {
background: skyblue;
}ul li:nth-last-child(n+2) {
background: skyblue;
}ul li:nth-last-child(1) {
background: skyblue;
}ul li:nth-last-child(-n+3) {
background: skyblue;
}
Рафаэль Каримов
Олег Олег
