Sure, we can select the <html> element in CSS with, you know, a simple element selector, html. But what other (trivial and perhaps useless) ways can we do it?

CSS-Tricks is a go-to destination for web designers and front-end developers seeking insights into CSS techniques, web design trends, and best practices. Through a rich collection of articles, tutorials, and code snippets, CSS-Tricks equips developers with the knowledge and tools needed to create visually stunning and user-friendly websites. Whether you're looking to master CSS layout techniques, explore responsive design principles, or stay updated with the latest CSS features and browser compatibility issues, CSS-Tricks offers practical guidance and inspiration for elevating your web design skills.

CSS-Tricks

A fun exploration of the various ways to select the HTML root element in CSS beyond the obvious `html` selector. Covers `:root`, `:scope`, the `&` nesting selector, `:has(head)` / `:has(body)`, and the quirky `:not(* *)` pattern. Each approach is explained with its specificity implications, practical use cases, and notable edge cases — including when `:scope` differs from `:root` inside `@scope` blocks and how `&` behaves outside of nested contexts.

The Different Ways to Select <html> in CSS

<p>Thanks, I’ve already tried root and found it very practical.</p>
