Вибір елементів за позицією в CSS

Вивчаємо псевдокласи :nth-child() та :nth-last-child() для вибору елементів за їх порядковим номером.

Вибір елементів за позицією в CSS

Псевдоклас :nth-child() дозволяє вибирати елементи за їх порядковим номером серед дочірніх елементів одного батька.

Наприклад, якщо потрібно вибрати третій елемент списку, використовується селектор :nth-child(3).

<ul>
  <li>Елемент 1</li>
  <li>Елемент 2</li>
  <li>Елемент 3</li>
  <li>Елемент 4</li>
</ul>

li:nth-child(3) {
  color: red;
}

У результаті третій елемент списку буде вибраний і стане червоним.

Вибір парних і непарних елементів

За допомогою значень even та odd можна вибрати парні або непарні елементи.

li:nth-child(even) {
  color: blue;
}

li:nth-child(odd) {
  color: green;
}

❗ Важливо:

even вибирає парні елементи (2, 4, 6...), а odd — непарні (1, 3, 5...).

Вибір кожного третього елемента

За допомогою формули 3n можна вибрати кожен третій елемент.

li:nth-child(3n) {
  font-weight: bold;
}

Такий селектор вибере елементи з номерами 3, 6, 9 і так далі.

Вибір елемента з кінця

Псевдоклас :nth-last-child() працює так само, але рахує елементи від кінця списку.

li:nth-last-child(2) {
  color: red;
}

Цей селектор вибере другий елемент з кінця.

HTML/CSS приклад

<ul class="list">
  <li>Перший</li>
  <li>Другий</li>
  <li>Третій</li>
  <li>Четвертий</li>
  <li>П'ятий</li>
</ul>

.list li:nth-child(3) {
  color: red;
}

.list li:nth-child(even) {
  background-color: #ddd;
}

.list li:nth-child(odd) {
  background-color: #eee;
}

.list li:nth-last-child(2) {
  color: blue;
}

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

📌 Завдання:

№1
Виберіть треті елементи з початку:
li:nth-child(3) {
}

💡 Показати підказку

Використовуйте :nth-child() і вкажіть номер елемента в дужках.

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

li:nth-child(3) {
  color: red;
}

📌 Завдання:

№2
Виберіть парні та непарні елементи:
li:nth-child(even) {
}
li:nth-child(odd) {
}

💡 Показати підказку

Для парних використовуйте even, для непарних — odd.

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

li:nth-child(even) {
  color: blue;
}

li:nth-child(odd) {
  color: green;
}

📌 Завдання:

№3
Виберіть кожен третій елемент:
li:nth-child(3n) {
}

💡 Показати підказку

Формула 3n вибирає кожен третій елемент.

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

li:nth-child(3n) {
  font-weight: bold;
}

📌 Завдання:

№4
Виберіть другий елемент з кінця:
li:nth-last-child(2) {
}

💡 Показати підказку

Для рахування з кінця використовуйте :nth-last-child().

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

li:nth-last-child(2) {
  color: red;
}