Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

CSS Selectors

CSS Universal Selector

Written by Updated

Use the universal selector deliberately for box-sizing resets, scoped defaults, and namespace-aware matching without applying unnecessary rules everywhere.

The CSS Universal Selector is used to select all elements on a webpage.
It is represented by an asterisk (*) and applies styles to every HTML element, unless overridden by more specific selectors.

This selector is often used for:

  • Resetting default browser styles
  • Applying global styling

Syntax for Global Selector

css

* {
    property: value;
}

Example of Global Selector

css

* {
    margin: 0;
    padding: 0;
}

👉 This removes default spacing from all elements.

Attributes

PropertyDescriptionExample
marginControls outer spacingmargin: 0;
paddingControls inner spacingpadding: 0;
box-sizingDefines box model calculationbox-sizing: border-box;
font-familySets font for all elementsfont-family: Arial;
colorSets default text colorcolor: black;

Scope broad matches

The universal selector has zero type specificity, but it can still match a large number of elements. A scoped reset such as .component, .component *, .component *::before, .component *::after is often safer than changing every node on the page. Remember that * matches elements, not pseudo-elements, so pseudo-elements must be listed explicitly when they need the same box-sizing rule. The supporting concepts are explained in Box Sizing and CSS Specificity.

Example

Global Selector Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Universal Selector</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        h1 {
            color: blue;
        }

        p {
            color: green;
            padding: 10px;
        }
    </style>
</head>
<body>

    <h1>Universal Selector Example</h1>

    <p>This paragraph has no default margin.</p>
    <p>Spacing is controlled using CSS.</p>

</body>
</html>

Browser Support

Feature
Chrome
Edge
Firefox
Safari
Universal selector11211

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.

Notes

  • The universal selector targets every element
  • Useful for creating a CSS reset
  • Can impact performance if overused in large projects
  • Often combined with other selectors for better control
  • Lower specificity compared to class and ID selectors

Conclusion

The CSS Universal Selector is a powerful tool for applying global styles across a webpage. It is especially useful for resetting default browser styles and ensuring consistent layout behavior.

PreviousCSS ID SelectorNextCSS Group Selector