Псевдоклас :nth-child у CSS - огляд, синтаксис та приклади
Короткий SEO текст:
Дізнайтеся, як використовувати псевдоклас :nth-child у CSS для додавання стилів до елементів згідно їхнього порядкового номера в дереві елементів. Синтаксис, приклади та можливі значення.
Опис
Псевдоклас :nth-child використовується для додавання стилів до елементів на основі їхнього порядкового номера в дереві елементів.
Синтаксис
елемент:nth-child(odd | even | <число> | <вираз>) {…}
Значення
- odd
- Всі непарні номери елементів.
- even
- Всі парні номери елементів.
- число
- Порядковий номер дочірнього елемента відносно свого батька. Нумерація починається з 1.
- вираз
- Задається у вигляді an+b, де a і b - цілі числа, а n - лічильник, що автоматично приймає значення 0, 1, 2...
Якщо a дорівнює нулю, то воно не записується, а запис скорочується до b. Якщо b дорівнює нулю, то воно також не вказується.
За допомогою від'ємних значень a і b деякі результати можуть бути від'ємними або дорівнювати нулю. Однак на елементи впливають лише позитивні значення через те, що нумерація елементів починається з 1.
У таблиці 1 наведені деякі можливі вирази та ключові слова, а також вказано, які номери елементів будуть задіяні.
В цьому прикладі псевдоклас :nth-child використовується для зміни стилю першого рядка таблиці та виділення кольором всіх парних рядків.