Demystifying Universal and Wildcard Selectors in CSS: An In-Depth Exploration

Universal or Wildcard Selector (*)

The Universal Selector, represented by the asterisk *, is a special CSS selector that targets all elements on a web page. It is sometimes referred to as the "wildcard" selector because it doesn't discriminate or filter any HTML elements; it selects every element in the document.

Here's how the Universal Selector works:

Source Code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Universal or Wildcard Selector</title>
    <style>
      * {
        color: green;
      }
    </style>
  </head>
  <body>
    <h1>Universal or Wildcard Selector</h1>
    <p>
      HTML elements or tags represent different parts of a web page's structure and content, such as headings, paragraphs, lists, images, links, and more. XML tags serve a similar purpose but can be customized to define the structure of data within an XML document according to a specific schema.
    </p>

    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </body>
</html>

Live Preview

The CSS code * { color: green; } applies a style rule to all HTML elements within a web page.

*: The asterisk * is the Universal Selector. As previously explained, it selects all HTML elements on the page.

{ color: green; }: This declaration sets the text color of all selected elements to green. In other words, it changes the foreground color of text within those elements to green.

So, when you apply the CSS rule * { color: green; } to your HTML document, it means that all text within all HTML elements (e.g., headings, paragraphs, links, lists, etc.) will appear in green. This rule has a global effect on text color throughout the entire web page because it targets all elements with the Universal Selector.

However, it's important to note that using the Universal Selector for such a global style change should be done sparingly and with caution, as it can affect the readability and aesthetics of your webpage. It's typically better to apply styles more selectively to specific elements or classes to achieve a desired look and feel while maintaining readability and design consistency.