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.…