Przejdź do treści

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.

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
:not1
2008-12-11
1
2004-11-09
12
2015-07-29
9.5
2008-06-12
3.1
2008-03-18
 100%

Komentarze #

  • Sławomir Kokłowski
    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
    Gosc

    18.05.2020 20:29
    Ktoś to jeszcze "ulepsza"?
    Zobacz więcej

  • Nitr0Skay
    Nitr0Skay

    07.01.2015 21:17
    kurshtml
    Teraz już jest w porządku. Dziękuję za poprawkę :)
    Zobacz więcej

  • Sławomir Kokłowski
    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
    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ść
    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
    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
    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
    Roberto

    30.03.2013 21:03
    zmiana display dziecka z none na jakiś przy :hover rodzica...
    Zobacz więcej

  • jaaa
    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

Zobacz więcej komentarzy

Facebook