Selektory#

Pseudokalsa dopasowań#

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

Pseudoklasa :matches() pobiera jako argument listę selektorów i reprezentuje elementy, które pasują do przekazanego argumentu, czyli pozwala określić ewentualne/dodatkowe warunki filtracji. Za pomocą pseudoklasy dopasowań można uprościć zapis całego selektora. 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 :matches(), bez kombinatorów. Kompletny profil CSS zezwala na stosowanie selektorów kompleksowych.

Następujący selektor wybiera wszystkie elementy z klasą .important, które zawarte są w akapitach lub listach uporządkowanych:

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

/* jest równoważne */

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

/* i w konsekwencji */

p .important

ol .important

Poniższy selektor dopasowuje wszystkie elementy div, które zawierają klasę "heavy" lub atrybut title:

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

/* jest równoważne */

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

/* i w konsekwencji */

div.heavy
div[title]

/* nie mylić z */

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

W pseudoklasie dopasowań nie można zagnieżdżać innych pseudoklas dopasowań oraz pseudoklas negacji. W dodatku pseudoelementy nie mogą być reprezentowane przez pseudoklasę dopasowań i nie są prawidłowe wewnątrz :matches(). 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. #
:matches(:matches(div))

:matches(:not(div))

:not(:matches(div))

:matches(::first-line)

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

Dla przykładu, następujący selektor reprezentuje wszystkie elementy, które są wskazywane lub mają zogniskowanie, niezależnie od ich przestrzeni nazw. Czyli nie jest ograniczony tylko do pasujących elementów w domyślnej przestrzeni nazw, które zostały wskazane lub maja zogniskowanie:

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

W ramach porównania, poniższy selektor pasuje do wskazywanych lub zogniskowanych elementów, które znajdują się w domyślnej przestrzeni nazw, a to ze względu na jawne użycie selektora uniwersalnego wewnątrz pseudoklasy :matches():

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

Pseudoklasa dopasowań pozwala na tworzenie bezużytecznych selektorów. Zapis foo:matches(bar) nigdy nie dopasuje żadnego elementu. Z kolei selektor foo:matches(foo) 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:-moz-any(p) {color: blue;}

		#p3:-moz-any(.light.info) {color: green;}
		#p4:-moz-any(.info):-moz-any(.light) {color: green;}

		p:-moz-any(.light2, [title]) {color: red;}

	</style>

	<script>

		window.onload = function(){

			document.querySelector("#p7:-moz-any(body 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="light info">Akapit powinien mieć kolor zielony (id="p4" class="light info").</p>

	<p id="p5" class="light2">Akapit powinien mieć kolor czerwony (id="p5" class="light2").</p>
	<p id="p6" title="opis">Akapit powinien mieć kolor czerwony (id="p6" 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 pseudoklasy :matches(). Można przetestować podobne polecenie: :-moz-any() dla Firefoksa lub :-webkit-any() dla Chrome, jak w powyższym przykładzie, chociaż wydaje się, że wyliczanie specyficzności dla tego wariantu przebiega na innych zasadach.

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

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