Selektory#
Pseudokalsa korzenia#
:root { /* deklaracje */ }Pseudoklasa :root reprezentuje element, który jest korzeniem dokumentu. W przypadku dokumentów (X)HTML korzeniem dokumentu jest zawsze element HTML, z kolei w aplikacjach XML korzeniem może być dowolny element.
Pseudoklasa :root ma identyczne działanie, jak selektor typu html, ale o wyższej specyficzności, co można wykorzystać do "awaryjnego podbicia" całkowitej specyficzności selektora.
Warto podkreślić, że pseudoklasa :root może dopasować jedynie korzeń dokumentu; zawężające elementy style będą pomijane (można je wybrać za pomocą pseudoklasy :scoped). Nie mam pewności, czy pseudoklasa korzenia umieszczona w zawężającym stylu (poza elementem head) powinna wybierać czy też pomijać (jak w przypadku Firefoksa) aktualny korzeń dokumentu.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
li {color: blue;}
html {
border: 5px solid green; /* brak zastosowania - słabsza specyficzność niż :root */
}
:root {
border: 5px solid blue; /* dotyczy elementu HTML */
}
</style>
</head>
<body>
<ul>
<style scoped>
li {color: red;}
:root {
border: 5px solid red; /* brak zastosowania (Firefox) */
}
</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>