Для прикладу візьмемо все той самий список. Що робити, якщо потрібно вибрати не перший і не останній елемент списку, а, наприклад, другий? Так от, псевдоклас nth-child дозволяє звертатися до елемента за його порядковим номером у HTML-розмітці або за виразом.
// другий елемент — червоний
li:nth-child(2) {
color: #f00;
}
// третій елемент — синій
li:nth-child(3) {
color: #00f;
}
:even — вибирає всі парні елементи
:odd — вибирає всі непарні елементи
.li:nth-child(even) {
background: cyan;
}
li:nth-child(odd) {
background: pink;
}
n — це лічильник, який зростає від 0 до кількості дочірніх елементів. Вираз дозволяє робити складніший вибір елементів.
:nth-child(3n) — кожен третій елемент (3, 6, 9)
:nth-child(3n+4) — кожен третій елемент, починаючи з четвертого (4, 7, 10)
