:not()
Wybiera elementy, które nie pasują do podanego selektora ani do żadnego z listy.
Przykład
#.btn:not(:disabled):hover {
background: #6d28d9;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}<style>.btn { padding: 8px 14px; border: 0; border-radius: 8px; background: #7c3aed; color: #fff; font: inherit; cursor: pointer; }</style>
<div style="display: flex; gap: 8px;">
<button class="btn" type="button">Aktywny</button>
<button class="btn" type="button" disabled>Wyłączony</button>
</div>Najedź na oba przyciski. Wyłączony nie zmienia koloru, bo reguła najechania go wyklucza.
Definicja i zastosowanie
#Pseudoklasa :not() odwraca warunek. li:not(.done) wybiera punkty listy bez klasy done, a input:not([type="checkbox"]) wszystkie pola oprócz pól wyboru. Pozwala nadać styl „wszystkim oprócz” bez pisania reguły, którą potem trzeba cofać.
Nowoczesne przeglądarki przyjmują w nawiasie listę selektorów, także złożonych: :not(.a, .b) znaczy „ani .a, ani .b”, czyli to samo co :not(.a):not(.b). Lista nie wybacza błędów: jeden nieprawidłowy selektor unieważnia całą regułę. W nawiasie nie mogą też stać pseudoelementy.
Specyficzność :not() to waga najmocniejszego selektora z listy, a nie zero. p:not(#intro) ma więc wagę (1, 0, 1). Uważaj też na samotne :not(p): pasuje do wszystkiego, co nie jest akapitem, także do html i body, więc warto je zawężać, np. .menu > :not(.active).
Składnia
#:not( <lista selektorów> )Argumenty
#- Każdy punkt bez klasy
done, także ten z klasąlocked. - Lista w nawiasie: ani
done, anilocked. Zostają dwa zwykłe punkty. - Wszystkie punkty oprócz pierwszego.
- Punkty, które w ogóle nie mają atrybutu
class.
Argumenty w praktyce
#.done
done, także ten z klasą locked.li:not(.done) { background: #7c3aed; color: #fff; }.done, .locked
done, ani locked. Zostają dwa zwykłe punkty.li:not(.done, .locked) { background: #7c3aed; color: #fff; }:first-child
li:not(:first-child) { background: #7c3aed; color: #fff; }[class]
class.li:not([class]) { background: #7c3aed; color: #fff; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Zamiast pisać regułę dla wszystkich, a potem cofać ją dla jednego elementu, od razu wyklucz go przez
:not(). Kod jest krótszy i nie walczy sam ze sobą. - Pilnuj wagi:
:not(#id)dodaje specyficzność identyfikatora, choć niczego przez identyfikator nie wybiera. - Samotnego
:not()używaj zawsze z kontekstem, np..lista > :not(.ukryty). Bez niego reguła trafi także whtml,bodyi inne elementy.
Powiązane hasła
#- :is()Dopasowuje element do dowolnego selektora z listy. Skraca długie, powtarzalne selektory do jednego zapisu.
- :where()Działa jak :is(), ale zawsze ma zerową specyficzność. Idealna do stylów bazowych, które łatwo nadpisać.
- :has()Wybiera element na podstawie tego, co zawiera lub co stoi za nim. Pozwala stylować rodzica według jego dzieci.
- SpecyficznośćWaga selektora, która decyduje, która reguła wygra, gdy kilka reguł ustawia tę samą właściwość tego samego elementu.
- :first-childPasuje do elementu, który jest pierwszym dzieckiem swojego rodzica.
- A, BPrzecinek łączy kilka selektorów w jedną regułę, żeby nadać im te same style bez powtarzania deklaracji.
Widzisz błąd albo brakuje przykładu? Napisz do nas.