What is a universal selector in CSS?
HTML, CSS, & JavaScript are the three primary pillars of websites. HTML is used to build the skeleton structures of our website while CSS is used to add styling to your websites or web apps by adding colors, changing layouts, alignments, and much more crazy stuff. To style our HTML elements we first need to select them in our CSS. This is achieved by using CSS selectors. There are various CSS selectors like class selectors, id selectors, attribute selectors, and many more. In this article, we’ll discuss the universal selector in CSS in detail.
Universal Selector in CSS
There are different selectors in CSS that allow us to select one or more than one HTML element at a time but what makes universal selectors different from all other selectors is their ability to select all the HTML elements of our page altogether. This means that any CSS style given to the universal selector will apply to all the elements of the web page. Sounds interesting right? So now let’s explore the syntax of the universal selector in CSS.
Syntax:
*{
property: value;
}Code language: CSS (css)This selector is represented by using an asterisk symbol (*). The syntax of the universal selector in CSS is like every other selector in CSS i.e. by specifying the property name with its value and enclosed inside curly brackets ({}).
Code Demonstration:
*{
color: green;
}Code language: CSS (css)The code above selects all the elements present in the HTML file and changes its font color to green.
Specificity of Universal Selector in CSS
Specificity is an algorithm used to select the most specific CSS declaration that should be applied to an element out of all the other declarations present for that particular element.
The specificity of a universal selector is zero i.e. it has no specificity, therefore, the style given inside the universal selector can easily be overwritten by other selectors in CSS. Let us understand this better through a code demonstration.
Code Demonstration:
<!DOCTYPE html>
<html>
<head>
<title>Codedamn</title>
<style>
*{
color: white;
background-color: #1a1919;
}
.secondary_heading{
color: aqua;
}
</style>
</head>
<body>
<h1>Codedamn: Become the best full stack web developer</h1>
<h2 class="secondary_heading">Practical Projects</h2>
<p>Projects offer a practical and hands-on approach to reinforce all you've learnt. Your profile will be automatically updated with your best projects.</p>
<h2 class="secondary_heading">Learning Paths</h2>
<p>Learning paths are content + job-backed roadmaps curated by developers to accelerate your learning. Following these paths will get you started immediately with the developer skills you need.</p>
</body>
</html>
Code language: HTML, XML (xml)Code Output:
As we can see from the above code we changed the font color to white through the universal selector so all the text was displayed in white color but all the <h2> elements with class secondary_heading are displayed in an aqua color as the class selector has higher specificity than the universal selector so the white color given through the universal selector got overwritten by the aqua color given by the class selector.
Use of Universal Selector in CSS
Consistency is the key to a good and eye-catching design. Universal selector helps us to easily maintain consistency throughout our web page by giving the same style to all the elements by a single line of code. Let us see an example to understand better.
Code Demonstration:
*{
font-family: "Times New Roman", Times, serif;
}Code language: CSS (css)The above code sets the font family of all the HTML elements to “Times New Roman” by a single line of code because of the use of the universal selector instead of selecting all the HTML elements individually and then changing their font-family.
Also, it is very helpful to easily reset the default style of the HTML elements provided by the browsers. As we know that the browser applies a default margin and padding to all the HTML elements. If we want to remove all the default margins and padding from all the HTML elements we can simply do it with a single line of code. Let us see an example to understand better.
Code Demonstration:
*{
margin: 0;
padding: 0;
}Code language: CSS (css)The above code demonstration removes all the default margins and padding of all the HTML elements and sets it to zero because we have used the universal selector (*) that selects all the HTML elements present in the web page altogether.
Most Used Template of Universal Selector in CSS
As discussed above universal selectors are most commonly used to reset the default CSS styles let us now see the most common CSS reset styles that you would be including while using the universal selector in your CSS file.
*,
*::before,
*::after {
margin:0;
padding:0;
box-sizing: border-box;
}Code language: CSS (css)The code demonstration above changes the margin and padding of all the HTML elements on our web page to zero and also sets the box-sizing property of the elements to border-box i.e. all the padding and border width will be added to the box model calculation itself instead of increasing the specified dimensions of all the elements.
Universal Selector for Debugging
When I started my journey with CSS, it seemed very weird to me because many times the CSS properties used to behave in a very different manner than I expected them to behave and I had no clue why that was happening.
So some of my favorite ways to overcome this unexpected behavior of CSS properties was by giving a border around all the elements through the universal selector in CSS. With this method, it becomes extremely easy for me to visualize how the elements are laid out on the web page and why they were behaving differently. Let us see understand this better through a code demonstration.
Code Demonstration:
*{
border: 1px solid purple;
}Code language: CSS (css)On applying the same line of CSS code as mentioned above inside the universal selector code block on the Codedamn blog page using the developer’s tool we would get the following result as shown in the image below.
Code Output:
Now, you can easily visualize how all these elements are laid out on this web page.
Browser Compatibility of Universal Selector in CSS
Now, after reading such a long article you might be wondering whether the universal selector in CSS is even supported by your browser or not! Well, you don’t need to worry about this because the universal selector in CSS is supported by all modern browsers like Google Chrome, Microsoft Edge, Opera, Firefox, and Safari.
Conclusion
In this article, we discussed what is the universal selector in CSS along with its use cases. We also discussed the specificity of the universal selector along with a code demonstration. Also if you get stuck somewhere or feel that your CSS is behaving strangely, then now you know how to debug your CSS like a pro by giving a border around all your HTML elements through the universal selector.
So now go ahead and use the universal selector in your code. Hope you found this article helpful.
Sharing is caring
Did you like what Simran Gangwani wrote? Thank them for their work by sharing it on social media.
No comments so far
Curious about this topic? Continue your journey with these coding courses:
