08. :root - CSS3

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>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

Interpretacja selektora `:root`

Previous07. :empty - CSS3 Next09. :first-child

Last updated 1 month ago

hashtagPrzeznaczenie selektora :root

hashtagInformacje techniczne o selektorze :root

hashtagPrzykładowa reguła CSS, selektor :root

hashtagWyjaśnienie przykładowej reguły CSS

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

hashtagRezultat

hashtagInterpretacja selektora :root