Селектори first-child, last-child и nth-child

Най-важното за first-child, last-child и nth-child

Псевдокласовете first-child, last-child и nth-child позволяват да стилизирате елементи според тяхната позиция в родителя. Това означава, че можете да изберете първия, последния или конкретен пореден елемент в даден списък или контейнер. Най-гъвкавият от тях е nth-child, защото приема число или формула и ви дава контрол върху четни, нечетни или всеки n-ти елемент. Това е особено полезно за по-четим дизайн – например оцветяване през ред.

Стъпка по стъпка: как да ги приложите

1. Създайте HTML списък с няколко li елемента в ul.
2. За да оцветите първия елемент, използвайте селектор с :first-child и задайте цвят.
3. За последния елемент заменете с :last-child.
4. За конкретен елемент използвайте :nth-child(2) – това ще избере втория елемент.
5. За оцветяване през ред използвайте формула като :nth-child(2n) за четни или :nth-child(2n+1) за нечетни елементи.
6. Запазете файла и презаредете страницата, за да видите резултата.

Използвани CSS селектори

• :first-child – избира първия дъщерен елемент на родителя.
• :last-child – избира последния дъщерен елемент.
• :nth-child(n) – избира елемент по позиция (например 1, 2, 3 и т.н.).
• :nth-child(2n) – избира всички четни елементи.
• :nth-child(2n+1) – избира всички нечетни елементи.