The Universal Selector

The universal selector * matches every element on the page. It has the lowest specificity (0-0-0).

Basic Usage

/* Apply to every single element */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

The box-sizing Reset

The most common use of * is the box-sizing reset. By default, CSS width/height doesn't include padding and border. This fixes that:

*, *::before, *::after {
    box-sizing: border-box;
}

This is considered a best practice and is used in virtually every modern project.

With Descendant Selectors

/* Target every element inside .container */
.container * {
    font-family: 'Segoe UI', sans-serif;
}

/* Every direct child of .grid */
.grid > * {
    padding: 1rem;
}

Performance Note

The universal selector by itself is not slow in modern browsers. However, avoid using it in complex selectors like div * span as this forces the browser to check many elements.

Common Reset Pattern

/* Modern minimal reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: system-ui, sans-serif;
    line-height: 1.6;
    color: #333;
}