Selektory#

Pseudokalsa negacji#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
:not(<selector>) { /* deklaracje */ }

Pseudoklasa :not() pobiera jako argument listę selektorów i reprezentuje elementy, które nie pasują do przekazanego argumentu, czyli pozwala określić ewentualne/dodatkowe warunki filtracji. Lista selektorów jest traktowana jak unia poleceń.

W przypadku szybkiego profilu CSS jedynie listy selektorów złożonych są dozwolone w obrębie :not(), bez kombinatorów. Kompletny profil CSS zezwala na stosowanie selektorów kompleksowych.

W Selektorach poziomu 3 argumentem :not() mógł być tylko i wyłącznie pojedynczy selektor prosty.

Następujący selektor wybiera wszystkie elementy z klasą .important, które zawarte są w dowolnych elementach z wykluczeniem akapitów lub list uporządkowanych:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
:not(p, ol) .important

/* jest równoważne */

:not(p) .important, :not(ol) .important

/* i w konsekwencji */

:not(p) .important
:not(ol) .important

Poniższy selektor dopasowuje wszystkie elementy div, które nie zawierają klasy "heavy" lub atrybutu title:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
div:not(.heavy, [title])

/* jest równoważne */

div:not(.heavy), div:not([title])

/* i w konsekwencji */

div:not(.heavy)
div:not([title])

/* nie mylić z */

div:not(.heavy[title])
div:not(.heavy):not([title])

W pseudoklasie negacji nie można zagnieżdżać innych pseudoklas negacji oraz pseudoklas dopasowań. W dodatku pseudoelementy nie mogą być reprezentowane przez pseudoklasę negacji i nie są prawidłowe wewnątrz :not(). Poniższe konstrukcje selektorów są błędne:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
:not(:not(div))

:not(:matches(div))

:matches(:not(div))

:not(::first-line)

Deklaracje domyślnych przestrzeni nazw nie wpływają na podmiot żadnego selektora w ramach pseudoklasy negacji, chyba że argument jest jawnym selektorem uniwersalnym lub selektorem typu.

Dla przykładu, zakładając, że domyślną przestrzenią nazw jest "http://example.com/", to następujący selektor reprezentuje wszystkie elementy, które nie są w tej przestrzeni nazw:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
*|*:not(*)

W ramach porównania, poniższy selektor pasuje do każdego elementu, który nie został wskazany, niezależnie od jego przestrzeni nazw. Czyli nie jest ograniczony tylko do pasujących elementów w domyślnej przestrzeni nazw, które nie zostały wskazane, ale i do elementów nienależących do domyślnej przestrzeni nazw, które nie otrzymają reguły, kiedy będą wskazywane.

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
*|*:not(:hover)

Pseudoklasa negacji pozwala na tworzenie bezużytecznych selektorów. Zapis :not(*|*) nigdy nie dopasuje żadnego elementu. Z kolei selektor foo:not(bar) jest równoważny foo, ale o wyższej specyficzności, co można wykorzystać do "awaryjnego podbicia" całkowitej specyficzności selektora.

Prosty przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<!DOCTYPE html>
<html>

<head>

	<style>

		#p2:not([class]) {color: blue;}

		#p3:not(.light2):not(.info2) {color: green;}

		#p4:not(.light2, .info2) {color: lime;}

		#p5:not(.light2):not([title=opis2]) {color: red;}
		#p6:not(.light2[title=opis2]) {color: red;}

	</style>

	<script>

		window.onload = function(){

			document.querySelector("#p7:not(div+p)").style.color = "yellow";

		}

	</script>

</head>

<body>

	<p>Akapit powinien mieć kolor czarny (brak przypisanych stylów).</p>

	<p id="p2">Akapit powinien mieć kolor niebieski (id="p2").</p>

	<p id="p3" class="light info">Akapit powinien mieć kolor zielony (id="p3" class="light info").</p>

	<p id="p4" class="light2">Akapit powinien mieć kolor jasnozielony (id="p4" class="light2").</p>

	<p id="p5" class="light" title="opis">Akapit powinien mieć kolor czerwony (id="p5" class="light" title="opis").</p>
	<p id="p6" class="light" title="opis">Akapit powinien mieć kolor czerwony (id="p6" class="light" title="opis").</p>

	<p id="p7">Akapit powinien mieć kolor żółty (id="p7").</p>

</body>

</html>

Na chwilę obecną żadna aktualna przeglądarka nie obsługuje bardziej złożonych selektorów wewnątrz pseudoklasy :not(), co jest dopuszczalne w najnowszym module selektorów.

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Selektory (H1) Pseudokalsa negacji (H2) Specyfikacje i inne materiały (H3)