CSS * (Universal) Selector
Last Updated :
11 Jul, 2025
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.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
* {
margin: 0;
padding: 0;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>Hello World</h1>
<p>This is a demonstration of the universal selector.</p>
</body>
</html>
<!--Driver Code Ends-->
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.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
* {
box-sizing: border-box;
font-family: Arial, sans-serif;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>Welcome</h1>
<p>This is styled with a global font and box-sizing property.</p>
</body>
</html>
<!--Driver Code Ends-->
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.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
:root {
outline: none;
}
* {
outline: 1px solid red;
}
div {
display: flex;
gap: 30px;
justify-content: center;
align-items: center;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div>
<h1>Debug Mode</h1>
<p>All elements are outlined for debugging purposes.</p>
</div>
</body>
</html>
<!--Driver Code Ends-->
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.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
*[title] {
border: 2px dashed blue;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1 title="Heading">Hello</h1>
<p>This paragraph has no title.</p>
<p title="Paragraph">This paragraph has a title.</p>
</body>
</html>
<!--Driver Code Ends-->
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.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.container * {
color: green;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="container">
<h2>Inside Container</h2>
<p>All text here is green.</p>
</div>
<p>This text is not green.</p>
</body>
</html>
<!--Driver Code Ends-->
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.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
*:not(h1) {
color: gray;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>Main Heading</h1>
<p>This paragraph is styled in gray.</p>
</body>
</html>
<!--Driver Code Ends-->
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.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
* {
font-size: 18px;
}
@media (max-width: 600px) {
* {
font-size: 14px;
}
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>Responsive Design</h1>
<p>Resize the browser to see the text size change.</p>
</body>
</html>
<!--Driver Code Ends-->