Autor publikacji
Virtual Patriot - Administrator

:not()

Data publikacji
Ostatnio edytowano

Przeznaczenie selektora :not()

      :not(...) { ... }

Selektor :not() odwołuje się do każdego elementu HTML, którego cechy w danym momencie spełniają zasadę pseudoklasy :not().

Cechy elementu HTML spełniają zasadę pseudoklasy :not(), gdy w danym momencie dany element HTML spełnia określony przez nas warunek negacji.

Selektor :not() odszukuje elementy HTML w kodzie HTML na podstawie parametru simpleSelector, którego wartość musimy określić.

Parametry selektora :not()

Przykładowe zapisy

:not(p)

:not(#lipiec)

:not(.akapit)

:not([title])

:not(:first-child)

simpleSelector

Parametr simpleSelector jest wymaganym parametrem selektora :not(). Parametr simpleSelector określa, na podstawie jakiego interesującego nas warunku negacji selektor :not() powinien dokonać selekcji.

Dostępne wartości

selektor typu elementu lub selektor identyfikatora lub selektor klasy lub dowolny selektor CSS należący do selektorów atrybutów lub dowolny selektor CSS należący do selektorów pseudoklas (lecz nie selektor :not())

Sposób podawania

należy podać dokładnie jeden wybrany selektor CSS

Wartość domyślna

brak

Informacje techniczne o selektorze :not()

ograniczenie - elementy HTML

brak

ograniczenie - właściwości CSS

brak

Przykładowa reguła CSS, selektor :not()

p:not(.akapit) {
  color:red;
}

Wyjaśnienie przykładowej reguły CSS

      p:not(.akapit) { color:red; }
p:not(.akapit)

do każdego elementu p, który nie posiada atrybutu class o wartości akapit lub którego atrybut class nie posiada wartości akapit

color

dodaj właściwość CSS, która zmieni kolor tekstu elementu HTML

red

na barwę czerwoną

Kod źródłowy przykładowego dokumentu HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      p:not(.akapit) {
        color:red;
      }
    </style>
  </head>

  <body>

    <div>
      tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, mimo że ten element HTML nie posiada atrybutu "class" o wartości "akapit", ponieważ ten element HTML nie jest elementem "p"
    </div>

    <p class="akapit">
      tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element HTML jest elementem "p", który posiada atrybut "class" o wartości "akapit"
    </p>

    <p>
      tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ ten element HTML jest elementem "p", który nie posiada atrybutu "class" o wartości "akapit"
    </p>

    <p class="rozdzial">
      tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ ten element HTML jest elementem "p", którego atrybut "class" nie posiada wartości "akapit"
    </p>

    <p class="rozdzial akapit">
      tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element HTML jest elementem "p", którego jedną z wartości atrybutu "class" jest wartość "akapit"
    </p>

    <div class="akapit">
      tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, ponieważ ten element HTML nie jest elementem "p", który nie posiadałby atrybutu "class" o wartości "akapit"
    </div>

  </body>
</html>

Rezultat

tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, mimo że ten element HTML nie posiada atrybutu "class" o wartości "akapit", ponieważ ten element HTML nie jest elementem "p"

tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element HTML jest elementem "p", który posiada atrybut "class" o wartości "akapit"

tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ ten element HTML jest elementem "p", który nie posiada atrybutu "class" o wartości "akapit"

tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ ten element HTML jest elementem "p", którego atrybut "class" nie posiada wartości "akapit"

tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element HTML jest elementem "p", którego jedną z wartości atrybutu "class" jest wartość "akapit"

tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, ponieważ ten element HTML nie jest elementem "p", który nie posiadałby atrybutu "class" o wartości "akapit"

Interpretacja selektora :not()

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Edge

tak

Zobacz więcej informacji o interpretacji selektora .