CSS * Selector

CSS * (Universal Selector)

The * selector in CSS is called the Universal Selector. It applies styles to all elements on a page unless otherwise specified.

1. Basic Usage

✅ Applying Styles to All Elements

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

✅ This resets default margins and paddings for all elements.

2. Combining with Other Selectors

✅ Targeting All Elements Inside a Specific Container

.container * {
  color: blue;
}

✅ Makes all elements inside .container blue.

✅ Targeting All Elements Except a Specific One

Using the :not() selector to exclude certain elements:

*:not(h1) {
  font-family: Arial, sans-serif;
}

✅ Applies Arial font to everything except <h1>.

3. Performance Considerations ⚠️

• The * selector targets every element, which can slow down performance on large pages.
• Use it wisely and avoid overuse in complex layouts.

4. When to Use It?

✔ Resetting default styles
✔ Applying a global theme
✔ Ensuring consistent box-sizing

5. When NOT to Use It?

❌ Inside deep nested elements (may slow down rendering)
❌ For large projects with many elements

6. Example – Global Styling with *

* {
  font-family: "Poppins", sans-serif;
  color: #333;
}

✅ Applies Poppins font and dark text color to all elements.