Negacja :not
W jaki sposób zmienić wygląd wszystkich elementów z wyjątkiem podanych?
CSS 3
selektor:not(argument) { cecha: wartość }
Selektorem może być dowolny znacznik [zobacz: Wstawianie stylów].
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.
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: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 | |
---|---|---|---|---|---|
:not | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 9.5 2008-06-12 | 3.1 2008-03-18 |