Урок 76 із 239
32%
← Назад

Сусідній селектор у CSS

Розберемо сусідній селектор +, який дозволяє вибирати елементи, що знаходяться безпосередньо після іншого елемента.

Що таке сусідній селектор +

Сусідній селектор + дозволяє вибрати елемент тільки тоді, коли він знаходиться одразу після вказаного елемента.

Вибирається тільки один безпосередній сусід знизу. Інші елементи після нього не вибираються.

Приклад №1. Сусідній тег

<h2>
  text
</h2>

<p>
  +
</p>

<p>
  -
</p>

<p>
  -
</p>
h2 + p {
  color: red;
}
💡 Показати підказку

Символ + читається як: вибрати наступний сусідній елемент.

Приклад №2. Сусід після класу

<p class="test">
  text
</p>

<p>
  +
</p>

<p>
  -
</p>
.test + p {
  color: red;
}

Приклад №3. Сусідній селектор з класами

<p class="test">
  text
</p>

<p class="elem">
  +
</p>

<p>
  -
</p>
.test + .elem {
  color: red;
}
❗ Важливо:

Сусідній селектор працює тільки з одним наступним елементом. Якщо між елементами є інший тег — вибір не відбудеться.

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

📌 Завдання:
  1. №1
  3. Дано код:
  5. <ul>
  6. <li>1</li>
  7. <li>2</li>
  8. <li id="elem">5</li>
  9. <li>6</li>
  10. </ul>
  12. Напишіть селектор, який вибере елемент, що знаходиться одразу після #elem.
📌 Завдання:
  1. №2
  3. Дано код:
  5. <ul>
  6. <li>1</li>
  7. <li class="elem">2</li>
  8. <li>3</li>
  9. <li class="elem">5</li>
  10. <li>6</li>
  11. </ul>
  13. Напишіть селектор, який вибере елементи одразу після .elem.
💡 Показати підказку

Для пошуку елемента після id використовуйте #id + тег. Для пошуку після класу використовуйте .class + тег.

✅ Показати відповідь
№1: #elem + li. №2: .elem + li.