Selector API - Root

Chrome Devtool Selector


The :root tree pseudo-element selects the Root of all blocks in the page

If the document is an HTML document, the root is the HTML element


 :root {    
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;

Get all property of the HTML root element

HTML root element

var element = document.querySelector("html");
var style = window.getComputedStyle(element);
for (var prop in style) {
    let value=style.getPropertyValue(prop);
    if (value!=""){

Discover More
CSS - Function

A css function is a function that can be used in a CSS property value to calculate complex styling requirement. Css function are mostly used with CSS Variable. Below we define the space unit variable...
CSS - Rem (Root Emphemeral Unit)

rem is a length unit that is based in the the font-size of the root element of the document. To write style rules that is constant throughout the document, use the rem rem stands for root em (ie root...
CSS - Responsive typography

Responsive typography refers to scaling text and components by simply adjusting the root element’s font-size within a series of media queries See also: ...
CSS - font-size property

CSS font-size in CSS is a property that defines the length (size) of a font. font-size by himself is an element of typography. responsive typography The font-size uses generally a relative sizing...
Chrome Devtool Selector
Selector - Tree Selectors (Pseudo Class)

Tree Pseudo Class are pseudo class that permits to select element of the tree :root, :empty, :blank, …child, of-type
What is a css variable (also known as custom property or cascading variable)

CSS variables are variable that can be used in a css property value. They are also known as: * custom properties * cascading variables (in reference to the cascading processing of CSS They...
Card Puncher Data Processing
XML - Root element

The root in XML and other derived language defines the root element of the tree See

Share this page:
Follow us:
Task Runner