Урок 91 із 239
38%
← Назад

Селектор заперечення в CSS

Вивчаємо псевдоклас :not(), який дозволяє вибирати всі елементи, крім тих, що відповідають заданому селектору.

Селектор заперечення в CSS

Псевдоклас :not() використовується для виключення елементів із вибірки. Він вибирає всі елементи, які НЕ відповідають вказаному селектору.

HTML/CSS приклад

<ul>
  <li>1</li>
  <li class="elem">2</li>
  <li>3</li>
  <li class="elem">4</li>
</ul>
li:not(.elem) {
  color: green;
}

У результаті зеленим стануть тільки li без класу elem.

Синтаксис :not()

selector:not(селектор) {
  властивість: значення;
}

Наприклад, p:not(.text) вибере всі абзаци, крім тих, які мають клас text.

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

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

Використовуйте :not(.elem).

✅ Показати відповідь
li:not(.elem) {
  color: green;
}
📌 Завдання:
  1. №2⊗mkPmSlNS
  3. Дано список:
  5. <ul>
  6. <li>1</li>
  7. <li>2</li>
  8. <li>3</li>
  9. <li>4</li>
  10. </ul>
  12. Напишіть селектор, який вибере всі li, крім першої.
💡 Показати підказку

Перша позиція визначається через :first-child. Її потрібно виключити.

✅ Показати відповідь
li:not(:first-child) {
  color: blue;
}
📌 Завдання:
  1. №3⊗mkPmSlNS
  3. Дано список:
  5. <ul>
  6. <li>1</li>
  7. <li>2</li>
  8. <li>3</li>
  9. <li>4</li>
  10. <li>5</li>
  11. </ul>
  13. Напишіть селектор, який вибере всі li, крім першої і останньої.
💡 Показати підказку

У :not() можна використовувати складні псевдокласи. Виключіть :first-child і :last-child.

✅ Показати відповідь
li:not(:first-child):not(:last-child) {
  color: red;
}
❗ Важливо:

:not() дуже корисний для створення винятків. Наприклад, можна стилізувати всі кнопки, крім кнопки 'Видалити'.