CSS :not() — вибірка всіх елементів, крім указаних
CSS-селектор :not() обирає всі елементи, ОКРІМ тих, що збігаються з селектором у дужках.
Загальний опис
автор: NagarD
Синтаксис
:not(selector) {
css declarations;
}Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3.1 | 9.5 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 2 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
Роздільник між пунктами потрібен усюди, крім останнього — саме той випадок, заради якого :not() беруть найчастіше.
HTML
<ul class="menu">
<li>Головна</li>
<li>Каталог</li>
<li>Доставка</li>
<li>Контакти</li>
</ul>CSS
.menu {
list-style: none;
margin: 0;
padding: 0;
max-width: 260px;
font: 16px/1.4 system-ui, sans-serif;
}
.menu li {
padding: 10px 4px;
}
/* усі, крім останнього: у останнього лінія була б зайвою */
.menu li:not(:last-child) {
border-bottom: 1px solid #cbd5e1;
}Кілька селекторів у дужках через кому: правило мине і .ghost, і .link — писати два :not() поспіль більше не треба.
HTML
<div class="row">
<button class="btn">Звичайна</button>
<button class="btn ghost">Прозора</button>
<button class="btn link">Як посилання</button>
</div>CSS
.row {
display: flex;
gap: 12px;
font: 16px system-ui, sans-serif;
}
.btn {
padding: 10px 18px;
border: 1px solid #2563eb;
border-radius: 6px;
background: transparent;
color: #2563eb;
cursor: pointer;
}
/* заливку дістають усі кнопки, крім прозорої та схожої на посилання */
.btn:not(.ghost, .link) {
background: #2563eb;
color: #fff;
}
.btn.link {
border-color: transparent;
text-decoration: underline;
}:not(p) обирає все, крім абзаців. Правило навмисно обмежене контейнером .wrap: без цього почервоніли б і body з html — :not збігається з чим завгодно.
HTML
<div class="wrap">
<h2>Заголовок — червоний</h2>
<p>Абзац — єдиний без тла.</p>
<span>span — червоний.</span>
</div>CSS
.wrap :not(p) {
background: #ff0000;
}Коментарі
Коментарів ще немає — будьте першим!