Назад Вперед Зміст

Дочірні псевдокласи в CSS

• :first-child – за допомогою цього псевдокласу можна застосувати стиль до вказаного елемента веб-сторінки за умови, що він є першим дочірнім елементом свого батька;
• :last-child – стиль застосовується до вказаного елемента веб-сторінки за умови, що він є останнім дочірнім елементом свого батька;
• :nth-child – дозволяє вибирати парні (even) та непарні (odd) дочірні елементи; також за допомогою цього псевдокласу можна стилізувати чергуючі дочірні елементи, використовуючи вирази виду an+b та числа;
• :only-child – застосовується до дочірнього елемента за умови, що він є єдиною дитиною у батька;
• :first-of-type – стиль застосовується до першого елемента вказаного типу (навіть якщо цей елемент не є першим дочірнім для свого батька і над ним знаходяться інші дочірні елементи інших типів);
• :last-of-type – працює так само, як і попередній псевдоклас, з тією лише різницею, що стиль застосовується до останнього елемента вказаного типу;
• :nth-of-type – за принципом роботи схожий на :nth-child, але орієнтується на тип елемента;
• :only-of-type – застосовується до дочірнього елемента вказаного типу за умови, що він є у батька єдиною дитиною свого типу.

Псевдоклас first-child

:first-child – задає CSS стилі першому дочірньому елементу в групі елементів одного батька.

<ul>
<li>child 1</li>
<li>child 2</li>
<li>child 3</li>
<li>child 4</li>
<li>child 5</li>
</ul>

li:first-child {
background: grey;
}

У першого елемента списку з’явився сірий фон.

:last-child – задає CSS стилі останньому дочірньому елементу в групі елементів одного батька.

У останнього елемента списку з’явився оранжевий фон.