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()
simpleSelector
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()
Wyjaśnienie przykładowej reguły CSS
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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>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>
