Урок 86 із 239
36%
← Назад

Вибірка кінцевих елементів у CSS

Навчимося вибирати перший і останній дочірній елемент за допомогою псевдокласів :first-child та :last-child.

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

Псевдоклас :first-child вибирає елемент, який є першим дочірнім елементом свого батька.

<ul>
  <li>Перший елемент</li>
  <li>Другий елемент</li>
  <li>Третій елемент</li>
</ul>
li:first-child {
  color: red;
}

Псевдоклас :last-child

Псевдоклас :last-child вибирає елемент, який є останнім дочірнім елементом свого батька.

<ul>
  <li>Перший елемент</li>
  <li>Другий елемент</li>
  <li>Останній елемент</li>
</ul>
li:last-child {
  color: green;
}

Комбінація із селекторами

Можна використовувати :first-child і :last-child разом із класами, тегами та складними селекторами.

.menu li:first-child {
  color: blue;
}

.menu li:last-child {
  color: orange;
}

Практичні завдання

📌 Завдання:
  1. №1
  3. Зробіть перший елемент списку червоним.
  5. HTML:
  7. <ul>
  8. <li>text</li>
  9. <li>text</li>
  10. <li>text</li>
  11. </ul>
📌 Завдання:
  1. №2
  3. Зробіть останній елемент списку зеленим.
  5. HTML:
  7. <ul>
  8. <li>text</li>
  9. <li>text</li>
  10. <li>text</li>
  11. </ul>
📌 Завдання:
  1. №3
  3. Зробіть перший і останній абзаци синіми.
💡 Показати підказку

:first-child працює тільки з першим дочірнім елементом, а :last-child — тільки з останнім. Вони не вибирають просто перший або останній елемент на сторінці.

✅ Показати відповідь
№1

li:first-child {
  color: red;
}


№2

li:last-child {
  color: green;
}


№3

p:first-child,
p:last-child {
  color: blue;
}