:not() :is() i :where()
Nauczy się Pan/Pani wykluczać elementy za pomocą :not(), dopasowywać dowolny element z listy za pomocą :is() oraz używać :where() do uzyskania niskiej specyficzności.
:not() :is() i :where() to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Pseudoklasa :not()
:not(selector) wybiera elementy, które nie pasują do podanego selektora. Odwraca wynik wyboru.
<input type="text" placeholder="Text input (styled)" />
<input type="submit" value="Submit (unstyled)" />
:not() z wieloma argumentami
Nowoczesny CSS pozwala umieszczać wiele argumentów wewnątrz :not() — pseudoklasa pasuje do elementów, które nie pasują do żadnego z wymienionych selektorów:
<a href="#">Normal link</a> <a href="#" class="active">Active link</a> <a href="#" class="disabled">Disabled link</a>
Specyficzność :not()
Specyficzność :not() jest równa specyficzności jego najbardziej specyficznego argumentu. :not(.active) ma specyficzność na poziomie klasy (0,1,0).
Pseudoklasa :is()
:is() pasuje do każdego elementu, który pasuje do dowolnego selektora z listy. Upraszcza grupowanie i ogranicza powtórzenia.
<header><h1>Site Title</h1><h2>Subtitle</h2><h3>Tagline</h3></header>
Specyficzność :is()
:is() przyjmuje specyficzność swojego najbardziej specyficznego argumentu. Jeśli lista zawiera selektor ID, cała reguła ma specyficzność ID.
<div id="header"><h2>Header H2 (crimson via ID)</h2></div>
<div class="card"><h2>Card H2 (crimson via class)</h2></div>
Tolerancyjne parsowanie :is()
:is() używa tolerancyjnego parsowania selektorów: jeśli którykolwiek selektor na liście jest nieprawidłowy, zostaje po cichu pominięty, a pozostałe nadal działają. Zwykłe selektory rozdzielone przecinkami całkowicie przestają działać, jeśli jeden z nich jest nieprawidłowy.
Pseudoklasa :where()
:where() działa dokładnie tak jak :is(), ale ma zerową specyficzność. Jest przeznaczona do klas użytkowych i stylów resetujących, które powinny łatwo poddawać się nadpisaniu.
<h1>No top margin</h1><h2>No top margin</h2><h3>No top margin</h3>
:where() w resetach
:where() idealnie nadaje się do resetów CSS i stylów bazowych, które nigdy nie powinny wygrywać rywalizacji specyficzności:
<ul><li>Item A</li><li>Item B</li></ul>
<ol><li>Step 1</li><li>Step 2</li></ol>
Porównanie specyficzności
Podsumowanie działania specyficzności:
:is()— najwyższa specyficzność spośród argumentów:where()— zawsze zerowa specyficzność:not()— najwyższa specyficzność spośród argumentów
Łączenie :is() i :not()
Można je łączyć, aby tworzyć precyzyjne i czytelne selektory:
<nav class="nav"><a href="#">Link</a> <button>Button</button> <a href="#" class="disabled">Disabled Link</a></nav>
Obsługa przez przeglądarki
:is() i :where() są obsługiwane we wszystkich nowoczesnych przeglądarkach. :not() z wieloma argumentami jest obsługiwana przez nowoczesne przeglądarki. Należy unikać tych pseudoklas w projektach wymagających obsługi IE11.
Szybkie sprawdzenie
Która pseudoklasa ma zerową specyficzność niezależnie od swoich argumentów?
Podsumowanie
:not() odwraca wybór i przyjmuje wiele argumentów. :is() pasuje do dowolnego elementu z listy, przyjmując najwyższą specyficzność z tej listy. :where() działa tak samo, ale ma zerową specyficzność — idealnie nadaje się do resetów. Wszystkie trzy pseudoklasy używają tolerancyjnego parsowania i po cichu pomijają nieprawidłowe selektory.
Ucz się CSS dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 40
- Lekcje
- 159
Często zadawane pytania
Czy lekcja „:not() :is() i :where()” jest bezpłatna?
Tak — pełny tekst „:not() :is() i :where()” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „:not() :is() i :where()”?
Nauczy się Pan/Pani wykluczać elementy za pomocą :not(), dopasowywać dowolny element z listy za pomocą :is() oraz używać :where() do uzyskania niskiej specyficzności. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „:not() :is() i :where()”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- :hover :focus :active i :visited
- :nth-child i :nth-of-type
- :not() :is() i :where()
- :checked :disabled i pseudo-klasy stanu formularza