CSS * Selector

Posted in CSS Tutorial

Updated on Oct 27, 2024

By Mari Selvan

👁️ 12 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The CSS universal selector (*) is a powerful tool that allows you to select all elements on a page. It's commonly used to apply global styles or reset default browser styling.

The * selector can target every single element in a document or be combined with other selectors to refine its scope.

💡 Syntax

The signature of the * Selector is as follows:

Syntax

Copied

* {
    /* CSS properties */
}

The * selector matches all elements within the document. You can also combine it with other selectors for more specific targeting.

📝 Example

Here is an example of how to use the * selector in CSS:

☠️ HTML

HTML

Copied

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS * Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a sample paragraph.</p>
    <a href="#">Click here</a>
</body>
</html>

🎨 CSS

CSS

Copied

/* Apply a margin of 0 to all elements */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

In this example:

The * selector is used to remove all default margins and padding from every element on the page.
The box-sizing: border-box ensures that padding and borders are included within the width and height of an element, making layout calculations more predictable.

💬 Usage Tips

Global Resets: The * selector is often used in CSS reset stylesheets to eliminate default margins and padding set by browsers. This helps ensure consistency across different browsers.
Performance Consideration: While the * selector is useful, using it excessively can have performance implications, especially on large or complex pages. Avoid overusing it in scenarios where more specific selectors can be applied.
Combining with Other Selectors: You can combine the * selector with other selectors to target more specific elements. For instance, div * will select all elements inside a <div>.

⚠️ Common Pitfalls

Overuse Can Slow Down Rendering: Since the * selector targets all elements, applying heavy styles to every element might slow down page rendering on complex pages. Be cautious when using it extensively in production environments.
Specificity Issues: The * selector has very low specificity, meaning it can easily be overridden by more specific selectors. If you find your styles not being applied, check for specificity conflicts.

🎉 Conclusion

The CSS * selector is a versatile tool that allows developers to target all elements on a page with ease. It’s especially useful for resetting or applying global styles across the entire document.

However, it should be used with care due to potential performance impacts, especially on large websites. When used properly, the * selector can greatly simplify your CSS and ensure a uniform appearance across different elements.