Menu
CSS

Universal Selector in css

The universal selector in CSS is denoted by an asterisk (*) and is used to select all elements within a document. This selector is powerful because it applies styles to every element in the HTML, making it useful for applying global styles such as resetting margins and padding or setting a default box-sizing for all elements.

 

Example of the Universal Selector

CSS File (styles.css)

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

/* Other styles */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

h1 {
    color: blue;
    text-align: center;
    margin-top: 20px;
}

p {
    font-size: 16px;
    color: green;
    padding: 10px;
}

button {
    background-color: yellow;
    border: 2px solid black;
    padding: 10px 20px;
    cursor: pointer;
    margin: 10px 0;
}

 

HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Universal Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph with universal selector applied.</p>
    <button>Click Me!</button>
</body>
</html>

 

Explanation:

Universal Selector (*):

  • margin: 0;: Removes the default margin from all elements.
  • padding: 0;: Removes the default padding from all elements.
  • box-sizing: border-box;: Ensures that the width and height properties include the content, padding, and border of the element, making sizing more predictable.

Other CSS Rules:

  • Specific styles are applied to body, h1, p, and button elements after the global styles set by the universal selector.

 

Pros and Cons of the Universal Selector:

Pros:

  • Global Resets: Useful for applying global resets or default styles to ensure consistency across different browsers and user agents.
  • Simplicity: Quickly applies a style to all elements, reducing the need for repetitive declarations.

Cons:

  • Performance: Applying styles to all elements can be computationally expensive, especially for large documents, potentially impacting performance.
  • Overuse: Overusing the universal selector can lead to unintended side effects, making it harder to manage and override styles for specific elements.

 

When to Use the Universal Selector:

  • CSS Resets: When you want to reset the default styling of all elements to ensure a consistent starting point across different browsers.
  • Global Defaults: When setting global defaults like box-sizing: border-box that should apply to all elements.

 

When to Avoid the Universal Selector:

  • Performance Concerns: On very large pages or complex applications where the performance impact might be noticeable.
  • Specificity Management: When more granular control and specificity over element styling is required, as it might interfere with other styles and require more overrides.

 

Best Practices:

  • Use Sparingly: Apply the universal selector thoughtfully and avoid using it for all styling needs.
  • Combine with Other Selectors: Combine the universal selector with other selectors to limit its scope, such as * + * { margin-top: 1em; }, which applies a margin only to elements that follow another element.
  • Reset Stylesheets: Consider using well-established reset or normalize stylesheets that use the universal selector appropriately to standardize default styles across browsers.
CSS