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.

Dodatkowe techniczne informacje 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 .