Selektory#
Pseudokalsa elementu referencyjnego#
:scope { /* deklaracje */ }Pseudoklasa :scope reprezentuje każdy element, który znajduje się w zestawie elementów referencyjnych # (reference element set). Jest to (potencjalnie pusty) zestaw elementów, które stanowią punkt odniesienia dla selektorów w czasie porównywania, jak w przypadku wywołania metody querySelector() lub elementu rodzica w zawężonym stylu wewnętrznym.
Jeśli zestaw elementów referencyjnych nie został wyraźnie określony, to domyślnie jest nim zawężający korzeń (jeśli istnieje), w przeciwnym wypadku jest nim korzeń dokumentu (tj. element pasujący do pseudoklasy :root). Specyfikacje używające tej pseudoklasy do dopasowania specyficznych elementów, innych niż element korzenia dokumentu, muszą definiować zawężający korzeń (jeśli używają zawężonych selektorów) lub wyraźny zestaw elementów referencyjnych.
Należy pamiętać, że pseudoklasa :scope reprezentuje wyłącznie prawdziwe elementy, dlatego też wirtualny korzeń zawężający nie może być tematem selektora; taki selektor efektywnie niczego sobą nie reprezentuje.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
li {color: blue;}
:scope {
border: 5px solid blue; /* dotyczy elementu HTML */
}
</style>
</head>
<body>
<ul>
<style scoped>
li {color: red;}
:scope {
border: 5px solid red; /* dotyczy tej listy UL */
}
</style>
<li>Jawnie zawężone style (kolor czerwony)</li>
<li>Jawnie zawężone style (kolor czerwony)</li>
<li>Jawnie zawężone style (kolor czerwony)</li>
</ul>
<ul>
<li>Domyślnie zawężone style (kolor niebieski)</li>
<li>Domyślnie zawężone style (kolor niebieski)</li>
<li>Domyślnie zawężone style (kolor niebieski)</li>
</ul>
</body>
</html>Na chwilę obecną jedynie nocne wydanie przeglądarki Firefox obsługuje pseudoklasę :scope.