Universal Selector in CSS
This article is about what is a universal selector in CSS and how to use it.
What is universal selector
The “*” star symbol indicates a universal selector in CSS. It is used to target any HTML element on the page and apply styles to it.
Syntax of the universal selector
*{
declaration list;
}It helps us to target any HTML element on the page.
Main Usage of the universal selector
CSS:
*{
margin: 0;
padding: 0;}HTML:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>Result: 
In the above HTML code have <h1> to <h6> heading element. To remove default spaces on all elements.
Actually, a universal selector is used most of the time for normalization purposes which means removing the default margin and padding of the HTML element.
How to use the universal selector
It selects every HTML element on the page and applies a 2px solid red border.
<html>
<head>
<title> Universal Selector </title>
<style type="text/css">
div{
margin : 5px;
}
p,div,body,html{
border:2px solid red;
}
</style>
</head>
<body>
<div><p>Paragraph Text 1</p>
<p>Paragraph Text 2</p>
<p>Paragraph Text 3</p>
<p>Paragraph Text 4</p></div>
</body>
</html>In the above code, there are some <p> tags inside the div tag in the Body element, and some text is written inside it. In CSS style, I select div using element selector and apply margin 5px. And I want to apply borders around all the paragraphs, div, body, and HTML elements. So, I will select (p, div, body, HTML) using group selector in CSS, because then all elements are selected and apply the border of 2px solid red.
*{
border:2px solid red;
}Result:
Suppose you have several HTML elements, instead of using a group selector we can simply write (*) star i.e universal selector. Star indicates universal selector, in the above code I have written here star in flower bracket border:2px solid red. The * selector selects every HTML element on the page. So, here I use a star or universal selector I am telling to the browser locate any HTML element and apply the 2px border solid red. See the above output same as all the HTML elements have a red border.
Style particular elements using the universal selector
CSS:
*.firsttwo{
border:2px solid green;
}HTML:
<div>
<p class="firsttwo">Paragraph Text 1</p>
<p class="firsttwo">Paragraph Text 2</p>
<p>Paragraph Text 2</p>
</div>Result:
In the above code, the div element inside the body contains three <p> elements. But, firsttwo p elements are have the classname “firsttwo”. In CSS, we write star (universal selector) then use the dot operator to select the class and set 2px green border. I am telling to the browser locate any HTML element on this page if it has the class attribute value set to firsttwo then apply the border 2px solid green. Even if you write without a star (or) a universal selector it will work in the same sense as you would prefer.
Style every paragraph using a universal selector
CSS:
* > p{
border:2px solid blue;
}<div><p>Paragraph Text 1</p>
<p>Paragraph Text 2</p>
<p>Paragraph Text 3</p>
<p>Paragraph Text 4</p></div>Result:
If you want to style every paragraph on this page. We know that greater than sign indicates direct children. You can write the “star (universal selector) direct child <p>” element as in the above code, then apply the border. I tell the browser, if it has a direct child <p>, to find any HTML element on this page, use the border. You can see the above output, all paragraphs which are the direct children of universal select are having the border. Even if you can write (div > p) it will work in the same sense, because directed the child of the <div> element.
Conclusion
I hope you guys are understanding the universal selector, how it is used, and its purpose of it in CSS.
