Skip to main content Link Search Menu Expand Document (external link)

Universal Selector

On this page

Summary

The universal selector matches all elements in the document. It is denoted by an asterisk (*) and has a specificity of 1 point (same as an element selector).

Usage 

* {
    property: value;
}

The universal selector can be used to apply styles globally to all elements.

Syntax Examples 

/* Match all elements */
* {
    margin: 0;
    padding: 0;
}

/* Match all elements with namespace */
*|* {
    box-sizing: border-box;
}

/* Universal with descendant combinator */
div * {
    color: inherit;
}

Specificity

The universal selector has a specificity value of 1 point (equivalent to an element selector).

Notes

  • Matches every element in the document
  • Often used for CSS resets to normalize default browser styles
  • Can impact performance if overused, as it matches everything
  • Useful for setting baseline styles that can be overridden
  • Both * and *|* syntax are supported and equivalent

Examples

Example 1: CSS reset 

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
</style>
<body>
    <h1>Heading</h1>
    <p>All elements have their margin and padding reset.</p>
</body>

Example 2: Global font family 

<style>
    * {
        font-family: Arial, Helvetica, sans-serif;
    }
</style>
<body>
    <h1>Heading</h1>
    <p>Paragraph text</p>
    <div>All text uses Arial.</div>
</body>

Example 3: Border box model 

<style>
    * {
        box-sizing: border-box;
    }

    div {
        width: 200pt;
        padding: 20pt;
        border: 2pt solid black;
    }
</style>
<body>
    <div>
        Width includes padding and border.
    </div>
</body>

Example 4: All descendants of a container 

<style>
    .container * {
        color: blue;
        font-size: 12pt;
    }
</style>
<body>
    <div class="container">
        <h1>Heading</h1>
        <p>Paragraph</p>
        <span>Span</span>
        <div>All children are styled blue.</div>
    </div>
</body>

Example 5: Global color inheritance 

<style>
    * {
        color: inherit;
    }

    body {
        color: #333;
    }
</style>
<body>
    <h1>Heading inherits color</h1>
    <p>Paragraph also inherits</p>
</body>

Example 6: Debug borders 

<style>
    * {
        border: 1pt solid red;
    }
</style>
<body>
    <div>
        <p>Every element has a red border.</p>
        <span>Useful for debugging layout.</span>
    </div>
</body>

Example 7: Line height baseline 

<style>
    * {
        line-height: 1.6;
    }
</style>
<body>
    <p>All text elements have improved readability with consistent line height.</p>
    <div>This applies to all elements.</div>
</body>

Example 8: Smooth property transitions 

<style>
    * {
        transition: all 0.3s ease;
    }

    .box {
        width: 100pt;
        background-color: blue;
    }

    .box:hover {
        background-color: red;
    }
</style>
<body>
    <div class="box">Hover me</div>
</body>

Example 9: Print styles 

<style>
    @media print {
        * {
            color: black;
            background: white;
        }
    }
</style>
<body>
    <p>When printed, all elements use black text on white background.</p>
</body>

Example 10: Remove default outline 

<style>
    * {
        outline: none;
    }

    *:focus {
        outline: 2pt solid blue;
    }
</style>
<body>
    <input type="text" placeholder="Custom focus outline" />
</body>

See Also