Negacja :not
W jaki sposób zmienić wygląd wszystkich elementów z wyjątkiem podanych?
CSS 3
selektor:not(argument) { cecha: wartość }
Argument to jeden z selektorów: typu, uniwersalny, atrybutu, klasy/identyfikatora albo dowolna pseuoklasa (z wyjątkiem samej pseudoklasy negacji).
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.
Wyobraźmy sobie sytuację, kiedy chcemy zmienić kolor całego tekstu na stronie z wyjątkiem np. tabelek. Moglibyśmy to zrobić, przypisując najpierw określony kolor całemu tekstowi, a następnie przywracając kolor domyślny wszystkim tabelom. Łatwiej będzie jednak takie działanie połączyć w pojedynczym selektorze negacji. Jeszcze ciekawsze efekty możemy uzyskać poprzez połączenie negacji z bardziej złożonymi selektorami - np. pokolorować wszystkie wiersze tabeli z wyjątkiem jednego, który podamy za pomocą pseudoklasy podstawionej jako argument negacji.
Selektorów negacji nie wolno zagnieżdżać, tzn. wstawiać jeden jako argument drugiego.
Przykład :not
Po wpisaniu w arkuszu stylów:📋 Zaznacz kod ▶ Edytuj na żywo
ul > li:not(:first-child) { font-weight: bold }otrzymamy wykaz, w którym wszystkie punkty z wyjątkiem pierwszego (pierwsze dziecko) powinny być pogrubione:
- Punkt 1
- Punkt 2
- Punkt 3
Przeglądarki
![]() Chrome | ![]() Firefox | ![]() Edge | ![]() Opera | ![]() Safari | Poziom wsparcia min. 2,5 roku | |
---|---|---|---|---|---|---|
:not | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 9.5 2008-06-12 | 3.1 2008-03-18 |
Komentarze
- Sławomir Kokłowski
18.05.2020 21:19
Zależy o co pytasz. Ale generalnie na tak postawione pytanie odpowiedź brzmi: tak ;-)
Zobacz więcej - Gosc
18.05.2020 20:29
Ktoś to jeszcze "ulepsza"?
Zobacz więcej - Nitr0Skay
07.01.2015 21:17
kurshtml
Teraz już jest w porządku. Dziękuję za poprawkę :)
Zobacz więcej - Sławomir Kokłowski
07.01.2015 00:41
Dziękuję za informację. Minifikator kodu usunął białe znaki z tego znacznika.
Zobacz więcej - Nitr0Skay
06.01.2015 22:24
Gość
Potwierdzam. U mnie też to występuje. Korzystam z Chrome
http://caniuse.com/#search=%3Aempty
http://i.imgur.com/T3Mv6F2.png
Zobacz więcej - Gość
06.01.2015 22:05
Chciałam zapytać: czy tu (http://www.kurshtml.edu.pl/css/pusty_element,pseudoklasy.html) nie ma błędu? U mnie zarówno pierwszy jak i trzeci akapit mają czerwone tło.
Zobacz więcej - Roberto
31.03.2013 19:27
ujemne marginesy, position:absolute, ogólnie wyjęcie z obiegu albo 'przeciwdziałanie' zmianom.
nazwy muszą być dzieckiem elementu, którego :hover powoduje zmianę - [...] jak najedziesz na 'magia' to strong nadal jest...
Zobacz więcej - GoŚćX
31.03.2013 19:21
Chciałbym wiedzieć czy istnieje taka cecha że pojawiający się element który wcześniej miał ceche i wartość: display:none; nie rozwali żadnych elementów strony, tylko pokaże się nad nimi. I gdy robię menu gdzie po najechaniu na klawisz np: galeria zwiększa on wysokoś i na nim wyskakują nazwy...
Zobacz więcej - Roberto
30.03.2013 21:03
zmiana display dziecka z none na jakiś przy :hover rodzica...
Zobacz więcej - jaaa
30.03.2013 20:12
Jak zrobić żeby po najechaniu myszką na jakiś elemnt (np: klawisz z menu) oprucz zmiany (podświetlenia klawisza) pod nim pokazywał się na przykład jakiś bloczek (zupełnie inny elemnt) jakie selektory użyć???
Zobacz więcej