Autor publikacji
Virtual Patriot - Administrator

:root

Data publikacji
Ostatnio edytowano

Przeznaczenie selektora :root

      :root { ... }

Selektor :root odwołuje się do elementu HTML, którego cechy w danym momencie spełniają zasadę pseudoklasy :root.

Cechy elementu HTML spełniają zasadę pseudoklasy :root, gdy w danym momencie dany element HTML jest głównym korzeniem dokumentu HTML (elementem HTML najwyższego rzędu). W kontekście języka HTML5 mowa tu najczęściej o elemencie html.

Informacje techniczne o selektorze :root

ograniczenie - elementy HTML

brak

ograniczenie - właściwości CSS

brak

Przykładowa reguła CSS, selektor :root

:root {
  background-color:red;
}

Wyjaśnienie przykładowej reguły CSS

      :root { background-color:red; }
:root

do elementu HTML, który jest głównym korzeniem danego dokumentu HTML

background-color

dodaj właściwość CSS, która zmieni kolor tła elementu HTML

red

na barwę czerwoną

Kod źródłowy przykładowego dokumentu HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      :root {
        background-color:red;
      }
    </style>
  </head>

  <body>

    kolor tła elementu "html" w tym dokumencie HTML jest czerwony, ponieważ w tym dokumencie HTML to element "html" pełni rolę głównego korzenia dokumentu HTML

  </body>
</html>

Rezultat

kolor tła elementu "html" w tym dokumencie HTML jest czerwony, ponieważ w tym dokumencie HTML to element "html" pełni rolę głównego korzenia dokumentu HTML

Interpretacja selektora :root

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Edge

tak

Zobacz więcej informacji o interpretacji selektora .