---
title: ':root'
slug: 'Web/CSS/:root'
tags:
  - CSS
  - CSS Pseudoklasse
  - Layout
  - NeedsExample
  - NeedsMobileBrowserCompatibility
  - Referenz
  - Web
translation_of: 'Web/CSS/:root'
---
<div>{{CSSRef}}</div>

<h2 id="Übersicht">Übersicht</h2>

<p>Mit dem <kbd>:root</kbd>-Selektor kannst Du das oberste "Elternelement" im DOM oder die Dokumentstruktur als Ziel festlegen. Es ist in der Spezifikation der CSS Selectors Level 3 als „strukturelle Pseudoklasse“ definiert, was bedeutet, dass Inhalt basierend auf seiner Beziehung zu übergeordneten und gleichgeordneten Inhalten gestaltet wird.</p>

<p>In der überwiegenden Mehrheit der Fälle, auf die Du wahrscheinlich stößt, gilt Folgendes: <kbd>:root</kbd> bezieht sich auf das <kbd>&lt;html&gt;</kbd> -Element einer Webseite. In einem HTML-Dokument ist das HTML-Element immer das übergeordnete Element der höchsten Ebene, sodass das Verhalten von <kbd>:root</kbd> vorhersehbar ist. Da CSS jedoch eine Stilsprache ist, die mit anderen Dokumentformaten wie SVG und XML verwendet werden kann, kann die <kbd>:root</kbd>-Pseudoklasse in diesen Fällen auf andere Elemente verweisen. Unabhängig von der Auszeichnungssprache wählt <kbd>:root</kbd> immer das oberste Element des Dokuments in der Dokumentstruktur aus.</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}</td>
   <td>{{Spec2('CSS4 Selectors')}}</td>
   <td>Keine Änderung</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}</td>
   <td>{{Spec2('CSS3 Selectors')}}</td>
   <td>Ursprüngliche Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

<p>{{Compat("css.selectors.root")}}</p>