Selector API - Root

Chrome Devtool Selector

About

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

Example

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

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!=""){
        console.log(prop+":"+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...
Boxdim
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 - 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 are...
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