CSS * (Universal) Selector

The universal selector (*) applies styles to all elements on a page or within a specified context, regardless of their type, class, or ID. It's commonly used for global resets or universal styling.

* {
 /* styles */
}

1. Basic Use case of universal selector

The universal selector applies styles to all elements in the document, making it perfect for resets or global rules. The margin: 0; and padding: 0; reset the default browser margins and paddings for all elements.

2. Applying Default Styles to All Elements

You can use the universal selector to set consistent styles like box-sizing or font across all elements .The box-sizing: border-box; makes element dimensions include padding and borders, while font-family ensures consistent typography.

3. Highlighting Elements with Universal Selector

The universal selector is useful for debugging layouts by adding borders or outlines. The outline: 1px solid red; highlights the boundaries of every element.

4. Targeting Elements with Attributes

Combine the universal selector with attribute selectors to style all elements with a specific attribute .The *[title] targets all elements with a title attribute, adding a dashed blue border.

5. Scoped Styling with Descendant Selector

The universal selector can style all children of a specific parent element .The .container * applies styles to all elements inside the .container class.

6. Excluding Specific Elements

Use the universal selector with the :not() pseudo-class to exclude elements .The *:not(h1) targets all elements except h1, changing their text color to gray.

7. Responsive Styling with Universal Selector

Apply global changes using media queries and the universal selector. The universal selector applies a smaller font size when the viewport is narrower than 600px.