Codestin Search App

:root CSS Pseudo Class

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The :root pseudo-class in CSS represents the highest-level parent of the document, typically the <html> element in an HTML document. It provides a convenient way to define global CSS variables, set default values, and apply styles that can cascade throughout the entire page. Because it has a very high specificity, styles declared on :root can override normal declarations on standard elements unless more specific selectors are used. This pseudo-class does not require any additional attributes or classes and is recognized by all modern browsers.

One of the primary uses of :root is to define CSS custom properties (variables). For example, you might define a color palette or font sizes that can be reused across multiple elements, making your stylesheet more maintainable and scalable:

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --base-font-size: 16px;
}

body {
    font-size: var(--base-font-size);
    color: var(--primary-color);
}

a {
    color: var(--secondary-color);
}

In this example, the color and font-size of multiple elements are controlled via variables defined on :root. This makes it easier to implement themes or switch values dynamically using JavaScript.

Another important aspect of :root is its role in the context of media queries or global style overrides. Since it targets the top-level element, you can define base measurements, responsive breakpoints, or high-level settings that other selectors inherit naturally. For instance:

:root {
    --spacing-unit: 8px;
}

.container {
    padding: calc(var(--spacing-unit) * 2);
}

This ensures consistent spacing across all elements, as all values are derived from a single source.

Additionally, while :root commonly mirrors the <html> element, using it instead of directly styling <html> can enhance specificity management, especially when combining with other pseudo-classes like :hover or :focus. This helps prevent unintended overrides and ensures your global variables and base styles remain reliable throughout your CSS architecture.

Syntax

:root {
  /* ... */
}

Example

HTML

<body>



    <div class="container">

        <h1>Welcome to My Site</h1>

        <p>This page uses CSS variables defined in the :root selector.</p>

        <button class="btn-primary">Click Me</button>

    </div>



</body>

CSS

/* 1. Define global variables here */

:root {

    --primary-color: #3498db;

    --secondary-color: #2ecc71;

    --text-color: #2c3e50;

    --bg-color: #f4f4f4;

    --padding-standard: 20px;

    --border-radius: 8px;

}



/* 2. Use variables throughout the stylesheet */

body {

    background-color: var(--bg-color);

    color: var(--text-color);

    font-family: sans-serif;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    margin: 0;

}



.container {

    background: white;

    padding: var(--padding-standard);

    border-radius: var(--border-radius);

    box-shadow: 0 4px 6px rgba(0,0,0,0.1);

    text-align: center;

}



.btn-primary {

    background-color: var(--primary-color);

    color: white;

    border: none;

    padding: 10px 20px;

    border-radius: var(--border-radius);

    cursor: pointer;

    transition: background 0.3s ease;

}



.btn-primary:hover {

    background-color: var(--secondary-color);

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS :root pseudo class. Hover over a browser icon to see the version that first introduced support for this CSS psuedo class.