CSS * (Universal) Selector

Q: What is the purpose of the universal selector in CSS?

Applying global styles like resets or box-sizing.Debugging layouts by adding borders or outlines to all elements.Ensuring consistency in styling across the entire webpage.

Last Updated : 04 Jan, 2025

The universal selector (*) applies styles to all elements on a page or within a specified context, regardless of their type, class, or ID. It’s commonly used for global resets or universal styling.

* {
    /* styles */
}

1. Basic Use case of universal selector

The universal selector applies styles to all elements in the document, making it perfect for resets or global rules. The margin: 0; and padding: 0; reset the default browser margins and paddings for all elements.

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <h1>Hello World</h1>
    <p>This is a demonstration of the universal selector.</p>
</body>
</html>
<!--Driver Code Ends }-->

2. Applying Default Styles to All Elements

You can use the universal selector to set consistent styles like box-sizing or font across all elements .The box-sizing: border-box; makes element dimensions include padding and borders, while font-family ensures consistent typography.

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        * {
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <h1>Welcome</h1>
    <p>This is styled with a global font and box-sizing property.</p>
</body>
</html>
<!--Driver Code Ends }-->

3. Highlighting Elements with Universal Selector

The universal selector is useful for debugging layouts by adding borders or outlines. The outline: 1px solid red; highlights the boundaries of every element.

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        :root {
            outline: none;
        }
        * {
            outline: 1px solid red;
        }
        div {
            display: flex;
            gap: 30px;
            justify-content: center;
            align-items: center;
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div>
        <h1>Debug Mode</h1>
        <p>All elements are outlined for debugging purposes.</p>
    </div>
</body>
</html>
<!--Driver Code Ends }-->

4. Targeting Elements with Attributes

Combine the universal selector with attribute selectors to style all elements with a specific attribute .The *[title] targets all elements with a title attribute, adding a dashed blue border.

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        *[title] {
            border: 2px dashed blue;
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <h1 title="Heading">Hello</h1>
    <p>This paragraph has no title.</p>
    <p title="Paragraph">This paragraph has a title.</p>
</body>
</html>
<!--Driver Code Ends }-->

5. Scoped Styling with Descendant Selector

The universal selector can style all children of a specific parent element .The .container * applies styles to all elements inside the .container class.

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        .container * {
            color: green;
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="container">
        <h2>Inside Container</h2>
        <p>All text here is green.</p>
    </div>
    <p>This text is not green.</p>
</body>
</html>
<!--Driver Code Ends }-->

6. Excluding Specific Elements

Use the universal selector with the :not() pseudo-class to exclude elements .The *:not(h1) targets all elements except h1, changing their text color to gray.

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        *:not(h1) {
            color: gray;
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <h1>Main Heading</h1>
    <p>This paragraph is styled in gray.</p>
</body>
</html>
<!--Driver Code Ends }-->

7. Responsive Styling with Universal Selector

Apply global changes using media queries and the universal selector. The universal selector applies a smaller font size when the viewport is narrower than 600px.

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        * {
            font-size: 18px;
        }
        @media (max-width: 600px) {
            * {
                font-size: 14px;
            }
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <h1>Responsive Design</h1>
    <p>Resize the browser to see the text size change.</p>
</body>
</html>
<!--Driver Code Ends }-->

CSS * (Universal)Selector – FAQ’s

What is the purpose of the universal selector in CSS?

Applying global styles like resets or box-sizing.
Debugging layouts by adding borders or outlines to all elements.
Ensuring consistency in styling across the entire webpage.

How does the universal selector affect performance?

Using the universal selector indiscriminately can negatively impact performance, especially on large webpages.

Can the universal selector be combined with other selectors?

Yes, the universal selector can be combined with other selectors to create more specific styles.

Does the Universal Selector Apply to Pseudo-Elements?

Yes, the universal selector (*) applies to pseudo-elements because they are part of the rendered DOM structure.

Is the universal selector a good alternative to CSS reset libraries?

While the universal selector can reset styles (e.g., setting margins and paddings to 0), it is not a full replacement for CSS reset libraries like Normalize.css. Reset libraries also address browser inconsistencies, default styles, and edge cases that the universal selector alone cannot handle effectively.