All the Different Ways to Select the <html> Element in CSS
The <html> element sits at the root of every web page, yet in many projects it is barely touched in CSS. Most developers simply use the plain html selector and move on. However, there are several other, lesser-known ways to target this root element—some practical, some mostly academic, but all useful to understand if you care about robust CSS architecture.
This article walks through the various ways to select the <html> element in CSS, explains when they may be appropriate, and highlights the implications for modern, standards-based web design.
Key Takeaways
- The html element can be targeted via simple element selectors, pseudo-classes, and attribute-based selectors.
- Some methods are more explicit than others, but they typically end up matching the same root element.
- Choosing the right selector impacts maintainability, readability, and cross-browser behavior.
- Consistent use of root-level selectors is important for typography, layout scaling, theming, and accessibility.
Why Target the <html> Element at All?
Before reviewing the different selection techniques, it is useful to clarify why you would target the <html> element in the first place. For many teams, root-level styling controls global behavior and provides a foundation for the entire design system.
Common use cases include:
- Setting a base font-size to drive rem-based typography.
- Defining default scroll-behavior or background for the page.
- Applying color-scheme or theme variables used throughout the site.
- Managing box-sizing strategies (often in combination with the * universal selector).
The way you style the <html> element often defines how predictable and scalable the rest of your CSS will be.
1. The Classic Element Selector
Direct Element Selector: html
The most familiar and straightforward way to target the root element is simply:
Example:
html { font-size: 16px; }
This selector directly matches the <html> tag in the DOM. It is universally supported, instantly readable, and should be your default for most use cases.
Use this approach when you need global defaults, such as:
- Typography: html { font-size: 100%; }
- Smooth scrolling: html { scroll-behavior: smooth; }
- Base theme colors: html { color-scheme: light dark; }
2. Using Pseudo-Classes on the <html> Element
Pseudo-classes let you refine when and how the <html> element is styled based on states or environmental conditions. These techniques are especially useful for accessibility and user-preference-driven design.
:root Pseudo-Class
The :root pseudo-class selects the root element of the document. In HTML documents, :root and html match the same node, but :root is conceptually more aligned with using CSS custom properties and design tokens.
Example:
:root { --brand-color: #0052cc; --font-base: 1rem; }
Reasons to use :root instead of html:
- Improved semantics when defining CSS variables.
- Consistency across different document types (e.g., SVG, XML) where the actual root element name may vary.
- Clear intent that you are working at the topmost level of the cascade.
:lang() on the Root
The :lang() pseudo-class lets you conditionally style the root based on the page language, typically defined on <html lang="...">. This is particularly valuable for internationalization and typography.
Example:
:root:lang(en) { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
:root:lang(ja) { font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; }
While you can write html:lang(en), many developers prefer :root:lang(en) to emphasize that they are styling the entire document context.
Preference and State Pseudo-Classes
Modern CSS also enables environment-aware styling via pseudo-classes such as :has() (where supported) and media queries that affect root-level rules. While not direct selectors like html, they often end up being applied to the root.
Example with prefers-reduced-motion:
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
This combination ensures that your site respects user preferences across the entire page, starting at the root.
3. Attribute Selectors Targeting the <html> Element
Attribute selectors can target <html> based on its attributes, such as lang, dir, or custom data attributes used for theming or application state.
Language-Based Attribute Selectors
You can match the document language directly using attribute selectors on the html element:
Example:
html[lang="en"] { font-size: 100%; }
html[lang^="fr"] { font-family: "Helvetica Neue", Arial, sans-serif; }
This approach is similar to :lang() but uses pure attribute matching. It can be useful when you need more complex patterns, such as partial matches for language codes (e.g., fr-CA, fr-FR).
Directionality: [dir] and [dir="rtl"]
For right-to-left (RTL) languages, styling the root based on text direction is essential:
Example:
html[dir="rtl"] { direction: rtl; }
html[dir="rtl"] body { text-align: right; }
This allows layout and typography adjustments to cascade from the root element based on the document direction.
Data Attributes for Theme or Mode
Many modern applications toggle themes by setting a data-* attribute on the html element. Attribute selectors then drive global theming:
Example:
html[data-theme="dark"] { color-scheme: dark; background-color: #0b0c10; }
html[data-theme="light"] { color-scheme: light; background-color: #ffffff; }
This pattern is common in design systems and SPAs where JavaScript updates the root attribute to change modes without reloading the page.
4. Structural Relationships Involving <html>
Because <html> is the root, it has no parent element in the document tree. This limits some structural selectors (like parent or ancestor selectors). However, you can still reference html in certain relational ways that clarify your intent.
Descendant Context: html body
While this does not select <html> itself, it is frequently used alongside root styling to define a clear hierarchy:
Example:
html { font-size: 100%; }
html body { margin: 0; min-height: 100vh; }
Using html body communicates that these rules apply to the body in the context of the document root, which can improve readability in larger codebases.
Universal Selector with :root
When normalizing box-sizing, a common pattern starts at :root and then extends to all elements:
Example:
:root { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
Here, :root is effectively selecting <html> and establishing a baseline that all other elements inherit. This is more explicit than styling html alone and reflects best practices for consistent layout behavior.
5. Browser and Standards Considerations
In modern browsers, html and :root are functionally equivalent in HTML documents. However, there are subtle considerations to keep in mind for long-term maintainability and cross-technology compatibility.
Consistency Across Document Types
If your stack includes technologies like inline SVG or custom document formats, the actual root element name may differ. In such cases, :root remains consistent, while html does not exist.
For organizations with design systems shared between web apps, documentation sites, and embedded content, standardizing on :root for variables and core configuration can simplify CSS reuse.
Readability and Intent
Choosing between html, :root, and attribute selectors is often less about capability and more about intent:
- Use html for straightforward, global page styles.
- Use :root when defining system-level variables or behaviors.
- Use html[...] or :root:lang(...) when the styling is conditional on document attributes.
Clear patterns help your team and future developers understand why a particular selector was used and what scope of impact it has.
Conclusion
There are multiple ways to select the <html> element in CSS, ranging from the simple html selector to more expressive options like :root and attribute-based selectors. While many of these approaches ultimately target the same node, the choice of selector communicates how you intend to use the root element in your design system.
For most projects, a blend of html for core global rules, :root for CSS variables, and attribute selectors for theming or localization strikes the right balance between clarity, flexibility, and maintainability. Understanding these options gives both business owners and developers greater control over how their sites behave at the most fundamental level.
Need Professional Help?
Our team specializes in delivering enterprise-grade solutions for businesses of all sizes.
Explore Our Services →Share this article:
Need Help With Your Website?
Whether you need web design, hosting, SEO, or digital marketing services, we're here to help your St. Louis business succeed online.
Get a Free Quote