The CSS Universal Selector, denoted by an asterisk (*), is a powerful tool that targets all elements within a webpage. It allows you to apply global styles, reset default browser styles, and ensure consistency across your entire website.

1. Introduction to CSS Universal Selector

The CSS Universal Selector (*) targets every element in the DOM, providing a way to apply styles universally. It's particularly useful for resetting styles, setting base styles, and ensuring a consistent look across different browsers.

2. Basic Usage of CSS Universal Selector

Using the universal selector is straightforward. By placing an asterisk (*) in your CSS, you can apply styles to all elements within the scope of the selector.

a. Applying Global Styles

One of the most common uses of the universal selector is to set global styles, such as box-sizing, font properties, or margin and padding resets.

/* Apply box-sizing to all elements */
* {
    box-sizing: border-box;
}

/* Set a global font family and size */
* {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
}
    

<!-- Sample HTML Elements -->
<div>Div Element</div>
<p>Paragraph Element</p>
<button>Button Element</button>
    

In this example, the universal selector ensures that all elements use the specified box-sizing model and inherit the global font settings, promoting consistency across different elements.

b. Resetting Default Styles

Browsers apply default styles to various HTML elements. The universal selector can be used to reset these styles, providing a clean slate for your custom styles.

/* Reset margin and padding for all elements */
* {
    margin: 0;
    padding: 0;
}

/* Remove default list styles */
ul, ol {
    list-style: none;
}

/* Remove default link styles */
a {
    text-decoration: none;
    color: inherit;
}
    

<!-- Sample HTML Structure -->
<header>
    <h1>Website Title</h1>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>
<main>
    <p>Welcome to our website!</p>
</main>
    

By resetting default styles, you eliminate inconsistencies caused by different browsers, allowing your custom styles to take precedence.

3. Advanced Usage of CSS Universal Selector

The universal selector can be combined with other selectors, pseudo-classes, and pseudo-elements to create more complex and specific styling rules.

a. Combining Universal Selector with Element Type

You can combine the universal selector with an element type to target all instances of that element more specifically.

/* Style all paragraphs within a specific section */
section * p {
    color: #20b2aa;
}
    

<!-- Sample HTML Structure -->
<section>
    <div>
        <p>This paragraph is styled using the universal selector combined with element type.</p>
    </div>
</section>

<div>
    <p>This paragraph is not styled by the above selector.</p>
</div>
    

Only paragraphs within the section element are targeted and styled, demonstrating how combining selectors can refine your targeting strategy.

b. Using Universal Selector with Pseudo-Classes

Combining the universal selector with pseudo-classes like :hover or :focus allows you to apply interactive styles to all elements.

/* Change background color on hover for all elements */
*:hover {
    background-color: #e0f7fa;
}
    

<!-- Sample HTML Elements -->
<button>Hover Me</button>
<input type="text" placeholder="Hover over me">
<div>Hover over this div</div>
    

When any of these elements are hovered over, their background color changes to a light teal, providing a consistent interactive experience across all elements.

c. Applying Styles to All Children Elements

Use the universal selector to target all child elements within a specific parent, ensuring consistent styling across nested elements.

/* Apply a consistent font size to all elements within the article */
article * {
    font-size: 18px;
}

/* Apply margin to all headings within the article */
article * h1, article * h2, article * h3 {
    margin-bottom: 10px;
}
    

<!-- Sample Article Structure -->
<article>
    <h1>Article Title</h1>
    <p>This is a paragraph within the article.</p>
    <h2>Subheading</h2>
    <p>Another paragraph with <strong>bold text</strong> and <a href="#">links</a>.</p>
</article>
    

All elements within the article tag inherit the specified font size, and all headings within the article receive consistent bottom margins, ensuring uniformity in the content layout.

4. Practical Examples

Applying the universal selector in real-world scenarios can enhance the maintainability and consistency of your stylesheets. Below are several practical examples demonstrating various applications of the CSS Universal Selector.

a. Resetting Default Browser Styles

Browsers apply default styles to HTML elements, which can vary between browsers. Using the universal selector to reset these styles ensures a consistent starting point.

/* Reset margin and padding for all elements */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
    

<!-- Sample HTML Structure -->
<header>
    <h1>Site Title</h1>
</header>
<main>
    <p>Welcome to our website!</p>
</main>
<footer>
    <p>© 2024 Company Name</p>
</footer>
    

By resetting margins, padding, and box-sizing, you eliminate browser inconsistencies, providing a clean foundation for your custom styles.

b. Setting Global Box Sizing

Using the universal selector to set box-sizing: border-box; ensures that padding and borders are included within the element's total width and height, simplifying layout calculations.

/* Apply border-box sizing to all elements */
* {
    box-sizing: border-box;
}

/* Style containers */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Style boxes within the container */
.box {
    width: 30%;
    background-color: #20b2aa;
    color: #fff;
    padding: 15px;
    margin: 10px;
    float: left;
    border-radius: 5px;
}

/* Clear floats */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
    

<!-- Container with multiple boxes -->
<div class="container clearfix">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
</div>
    

With box-sizing: border-box;, each box calculates its width to include padding and borders, ensuring that the three boxes fit neatly within the container without overflowing.

c. Applying Global Font Styles

Set global font styles to ensure consistency across all text elements in your webpage.

/* Set global font family and base font size */
* {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
}

/* Style headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Georgia', serif;
    margin-bottom: 10px;
}

/* Style links */
a {
    color: #20b2aa;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}
    

<!-- Sample Content -->
<h1>Main Heading</h1>
<p>This is a paragraph with a <a href="#">link</a>.</p>
<h2>Subheading</h2>
<p>Another paragraph under a subheading.</p>
    

By setting global font styles, all text elements inherit these styles, ensuring uniform typography throughout your website.

d. Theming with Universal Selector

Create a cohesive theme by applying background colors, text colors, and other styles to all elements using the universal selector.

/* Apply a light theme to all elements */
* {
    background-color: #f9f9f9;
    color: #333;
    transition: background-color 0.3s, color 0.3s;
}

/* Dark mode toggle */
body.dark-mode * {
    background-color: #333;
    color: #f9f9f9;
}
    

<!-- Theme Toggle Button -->
<button id="theme-toggle">Toggle Dark Mode</button>

<!-- Sample Content -->
<h1>Themed Heading</h1>
<p>This paragraph adapts to the selected theme.</p>

<script>
    const toggleButton = document.getElementById('theme-toggle');
    toggleButton.addEventListener('click', () => {
        document.body.classList.toggle('dark-mode');
    });
</script>
    

By toggling the dark-mode class on the body element, the universal selector applies dark theme styles to all elements, providing a seamless theme switch across the entire webpage.

e. Adding Global Transitions

Enhance user interactions by applying transition effects to all elements, creating smooth animations for state changes like hover effects or theme toggles.

/* Apply smooth transitions to all elements */
* {
    transition: all 0.3s ease;
}

/* Example hover effect */
button:hover {
    transform: scale(1.1);
}
    

<!-- Sample Button -->
<button>Hover to Grow</button>
    

All elements now have smooth transitions. When the button is hovered over, it scales up by 10%, creating an engaging interactive effect.

5. Best Practices

Using the universal selector effectively requires adherence to best practices to ensure maintainable and efficient CSS.

a. Use Sparingly

The universal selector can impact performance, especially on large documents. Use it judiciously to apply only necessary global styles.

/* Apply only essential global styles */
* {
    box-sizing: border-box;
}
    

<!-- Sample Content -->
<div>Content goes here.</div>
    

By limiting the universal selector to essential styles like box-sizing, you minimize its impact on performance and prevent unnecessary styling of elements.

b. Combine with Specific Selectors

To prevent the universal selector from overriding more specific styles, combine it with other selectors to increase specificity where needed.

/* Universal selector for base styles */
* {
    font-family: 'Arial', sans-serif;
    color: #333;
}

/* Specific selector to override universal styles */
.highlight {
    color: #20b2aa;
    font-weight: bold;
}
    

<!-- Sample Elements -->
<p>This paragraph uses the universal font and color.</p>
<p class="highlight">This paragraph is highlighted.</p>
    

Specific selectors like .highlight can override universal styles, allowing for targeted styling without unintended side effects.

c. Reset Styles Wisely

While resetting styles using the universal selector can be beneficial, ensure that you retain essential styles for elements that require default behaviors for accessibility and usability.

/* Reset margin and padding */
* {
    margin: 0;
    padding: 0;
}

/* Retain display properties for form elements */
input, button, select, textarea {
    display: inline-block;
}
    

<!-- Sample Form -->
<form>
    <input type="text" placeholder="Name">
    <button type="submit">Submit</button>
</form>
    

By selectively retaining display properties for form elements, you maintain their usability while benefiting from global style resets.

d. Optimize Performance

To minimize performance impacts, limit the use of the universal selector to essential styles and avoid applying unnecessary styles that affect layout or rendering.

/* Minimal use of universal selector */
* {
    box-sizing: border-box;
}

/* Avoid heavy styles on all elements */
* {
    /* Avoid properties like box-shadow, transitions, etc., unless necessary */
}
    

<!-- Sample Content -->
<div>Content without heavy universal styles.</div>
    

By avoiding resource-intensive styles on all elements, you ensure that your website remains performant and responsive.

e. Maintain Readability

Organize your CSS and use comments to clearly indicate the purpose of styles applied via the universal selector. This enhances maintainability and makes your stylesheets easier to navigate.

/* Universal Styles */
* {
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
    color: #333;
}

/* Specific Component Styles */
.card {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
}
    

<!-- Sample Card Component -->
<div class="card">
    <h2>Card Title</h2>
    <p>This is a card component.</p>
</div>
    

Clear organization and commenting make it easier to understand the role of each style, especially when using global selectors like the universal selector.

6. Common Pitfalls

While the universal selector is a powerful tool, misuse can lead to performance issues, unintended styling, and maintenance challenges. Being aware of these common pitfalls can help you avoid them.

a. Overusing the Universal Selector

Applying too many styles globally can lead to a cluttered and hard-to-maintain stylesheet. Use the universal selector only for essential global styles.

/* Overuse of universal selector - Not Recommended */
* {
    background-color: #f0f0f0;
    color: #333;
    font-size: 18px;
    padding: 10px;
    margin: 10px;
    border: 1px solid #ccc;
}
    

<!-- Sample Content -->
<div>Div Element</div>
<p>Paragraph Element</p>
<button>Button Element</button>
    

In this example, the universal selector applies multiple styles to all elements, which can lead to an inconsistent and unmanageable design. It's better to apply styles selectively.

b. Performance Impacts

Because the universal selector targets every element, excessive use can slow down rendering, especially on pages with a large number of elements.

/* Heavy universal styles - Potential Performance Issue */
* {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.5s ease;
}
    

<!-- Numerous Elements -->
<div>Element 1</div>
<div>Element 2</div>
<div>Element 3</div>
<!-- ...and so on -->
    

Applying styles like box-shadow and transition to all elements can be taxing on the browser, leading to slower page load times and reduced performance.

c. Specificity Conflicts

Overly broad universal selectors can override more specific styles, making it difficult to manage and maintain your CSS.

/* Universal selector */
* {
    color: #333;
}

/* Specific selector */
.highlight {
    color: #20b2aa;
}
    

<!-- Sample Elements -->
<p>Normal Paragraph</p>
<p class="highlight">Highlighted Paragraph</p>
    

While the universal selector sets a default color for all paragraphs, the .highlight class successfully overrides it due to its higher specificity. However, excessive use can complicate the specificity hierarchy.

d. Unintended Inheritance

Applying styles universally can lead to unintended inheritance, affecting elements that should remain unstyled or differently styled.

/* Apply background color to all elements */
* {
    background-color: #f0f0f0;
}

/* Override for specific elements */
.no-bg {
    background-color: transparent;
}
    

<!-- Sample Elements -->
<div>This div has a background color.</div>
<p class="no-bg">This paragraph has no background color.</p>
    

While the universal selector applies a background color to all elements, the .no-bg class effectively removes it for specific elements. However, this approach requires careful management to avoid inconsistencies.

e. Ignoring Browser Defaults

Resetting all styles can inadvertently remove essential default styles that aid in accessibility and usability, such as focus outlines or default form styles.

/* Overly aggressive reset */
* {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    outline: none;
}
    

<!-- Sample Form -->
<form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
    
    <button type="submit">Submit</button>
</form>
    

By removing outlines and borders, especially those essential for keyboard navigation, you can hinder accessibility. It's crucial to balance style resets with the preservation of important default styles.

7. Conclusion

The CSS Universal Selector is a versatile tool that can significantly enhance the consistency and maintainability of your web designs. By applying global styles, resetting default browser styles, and ensuring uniform typography, the universal selector lays a solid foundation for your stylesheets.

However, it's essential to use the universal selector judiciously. Overuse can lead to performance issues, specificity conflicts, and unintended inheritance, which can complicate your CSS management and hinder accessibility.

Adhering to best practices, such as limiting the universal selector to essential styles, combining it with more specific selectors, and maintaining organized and readable CSS, will help you harness its full potential without falling into common pitfalls.

Continue experimenting with the universal selector in your projects, applying its strengths while being mindful of its limitations, to create clean, efficient, and responsive web designs.

Back to Table of Contents