Селектор :nth-child(n). відповідає кожному елементу, який є n-м дочірнім елементом свого батька. n може бути числом, ключовим словом (парним або непарним) або формулою (як + b). Порада: подивіться на селектор :nth-of-type(), щоб вибрати елемент, який є n-м дочірнім елементом того самого типу (ім’я тегу) свого батька.
:nth-child() і :nth-of-type() Синтаксис такий:n-начаток (an+b) , де ви замінюєте a і b числами на свій вибір. Наприклад, :nth-child(3n+1) вибирає 1-й, 4-й, 7-й і т. д. дочірній елемент. :nth-of-type() працює так само, за винятком того, що він розглядає лише елемент заданого типу ( <div> у прикладі).
Представляє елементи, числова позиція яких у ряді братів і сестер відповідає шаблону An+B для кожного додатного цілого чи нульового значення n, де: A — цілочисельний розмір кроку, B — цілочисельний зсув, n — усі невід’ємні цілі числа, починаючи з 0.
Обидва відповідатимуть однаковим елементам. Жодної різниці на сторінці: однакова специфіка, однакова поведінка. nth-child(1) легше написати програмно/генерувати. Немає необхідності додавати умову в код препроцесора, щоб перевірити, «чи дорівнює 1, ніж вихідний селектор :перший-дочірній або вихідний:nth-дочірній (ваша змінна)».
Селектор :nth-last-child(n) вибирає всі елементи, які є n-м дочірнім елементом, незалежно від типу їх батьківського елемента, рахуючи від останнього дочірнього елемента.. Порада: скористайтеся селектором :nth-last-of-type(), щоб вибрати всі елементи, які є n-м дочірнім елементом певного типу свого батьківського елемента, рахуючи від останнього дочірнього елемента.