: kořen - Triky CSS | Almanach CSS 2025

:rootVolič vám umožní zaměřit se na nejvyšší úrovni, „mateřská“ element v DOM, nebo strom dokumentu. Ve specifikaci CSS Selectors Level 3 je definována jako „strukturní pseudotřída“, což znamená, že se používá ke stylování obsahu na základě jeho vztahu s nadřazeným a sourozeneckým obsahem.

V drtivé většině případů, se kterými se pravděpodobně setkáte, :rootodkazuje na prvek na webové stránce. V dokumentu HTML bude htmlprvek vždy rodičem na nejvyšší úrovni, takže jeho chování :rootje předvídatelné. Jelikož však CSS je stylovací jazyk, který lze použít s jinými formáty dokumentů, jako jsou SVG a XML, může :rootpseudotřída v těchto případech odkazovat na různé prvky. Bez ohledu na značkovací jazyk :rootvždy ve stromu dokumentu vybere nejvyšší prvek dokumentu.

V níže uvedeném příkladu se :rootselektor pseudotřídy používá k vytvoření barvy pozadí za prvkem. V takovém případě lze stejného efektu dosáhnout použitím htmlvoliče prvků v našem CSS.

Podívejte se na toto pero!

Body zájmu

Zatímco :rootselektor i htmlselektor cílí na stejné prvky HTML, může být užitečné vědět, že :rootmá ve skutečnosti vyšší specificitu. Selektory pseudo-tříd (ale ne pseudoelementy) mají specificitu rovnou specifičnosti třídy, která je vyšší než selektor základních elementů.