Temani Afif recently did this exercise and I thought I’d build off of it. Some of these are useful. Many of them are not. There’s a bird at the end!

### html

html { /* I mean, duh */ }

### :root

:root { /* Sarsaparilla, anyone? */ }

:root is a CSS pseudo-class that matches the root element of the current (XML) document. If the current document is a HTML document, then it matches . The XML documents that you’ll most likely encounter as a web developer (besides HTML) are:

- SVG documents: :root matches

- RSS documents: :root matches

- Atom documents: :root matches

- MathML documents: :root matches

- Other XML documents: :root matches the outermost element (e.g., )

But what’s the practicality of :root? Well, the specificity of pseudo-classes (0-1-0) is higher than that of elements (0-0-1), so you’re less likely to run into conflicts with :root.

It’s conventional to declare global custom properties on :root, but I actually prefer :scope because it semantically matches the global scope.…