CSS * (Universal) Selector
Last Updated :
15 Apr, 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-->
Similar Reads
CSS [attribute*=value] Selector The [attribute*="str"] selector targets the elements whose attribute values contain a specified substring. This substring can appear anywhere within the attribute's value — beginning, end, or middle.Syntax:element [attribute*="str"] { // CSS Property} Example: In the following example, the <p>
2 min read
CSS [attribute=value] Selector The [attribute=value] selector in CSS is used to select those elements whose attribute value is equal to "value".Syntax: element [attribute = "value"] { // CSS Property}Note: <!DOCTYPE> must be declared for IE8 and earlier versions.Example 1: In this example, The selector h1[id="geeks"] target
2 min read
CSS [attribute$=value] Selector The [attribute$=â€valueâ€] selector is used to select those elements whose attribute value ends with a specified value "value". The value need not to be present as separate word. It may be a part of another word or expression but it needs to be present at the end. Syntax:[attribute$="value"] { // CSS
2 min read
CSS [attribute|=value] Selector The [attribute|=value] selector is used to select those elements whose attribute value is equal to "value" or whose attribute value started with "value" immediately followed by a hyphen (-).Note: Use <!DOCTYPE> to run [attribute|=value] selector in IE8 or earlier versions.Syntax:[attributeType
2 min read
CSS [attribute~=value] Selector The [attribute~="value"] selector is used to select those elements whose attribute value contains a specified word. The "value" must be present in the attribute as a separate word and not as part of the other word i.e. if [title~=Geeks] is specified then all elements with Geeks title get selected.Sy
2 min read
CSS [attribute^=value] Selector The [attribute^=value] selector selects elements whose attribute value begins with a given attribute.Syntax:[attribute^=value] { // CSS Property}Example: In this example, The CSS selector p[class^="for"] targets <p> elements with a class attribute that starts with "for" and applies a green bac
2 min read
CSS #id Selector The ID selector in CSS is used to select a single element on a page by referencing its id attribute. This attribute must be unique within a page, meaning no two elements can have the same id. The ID selector is prefixed with a hash (#) symbol in CSS.Basic ID SelectorThe ID selector allows you to sty
7 min read
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 selectorThe universal selector applies styles to all e
4 min read
CSS :active Selector The: active selector is used in styling an active link of the web page. Style display when the user clicks on the link. This selector is different from :link, :visited and: hover selectors. The main use of : active selector is on the links but it can be used on all elements.Syntax: :active{ //CSS pr
2 min read
CSS ::after Selector ::after selector is used to add the same content multiple times after the content of other elements. This selector is the same as ::before selector. Syntax:::after{ content:}Below HTMl/CSS code shows the functionality of ::after selector : HTML <!DOCTYPE html> <html> <head> <sty
2 min read