New Blog Post

Okay, okay, I can’t actually guarantee that statement, but there is a very good chance you haven’t come across or used the following…

Root Selector

:root { }

Using root allows you to select the highest level parent element in the DOM. If you are writing HTML, then the html element will always be the highest.

Because Pseudo-class selectors have a higher specificity than that of targeting an element, you can overwrite <html> element styling with :root.

Using :root to change the background colour

Browser Support

The following specifies the first browser version that fully supports the selector.

Chrome: 4.0

Internet Explorer: 9.0

Firefox: 3.5

Safari: 3.2

Opera: 9.6