What is a Universal Selector in CSS?
FREE
Overview
CSS selectors form the basis of Cascading Style Sheets, allowing us to target specific elements within an HTML document and apply a style. Selectors are part of the CSS rule set. CSS selectors select HTML elements according to their id, class, type, attribute, etc. There are several different types of selectors in CSS-
- CSS Element Selector
- CSS Id Selector
- CSS Class Selector
- CSS Universal Selector
- CSS Group Selector
Introduction
As the name suggests, Universal Selector in CSS is used to select all the elements on the HTML page, such as <p>, <h1>, <img> etc. Therefore, CSS styles applied to the universal selector affect every element on the web page (including <html> and <body>).
Asterisk (*): symbol denotes the universal selector in CSS.
In the example below, the universal selector(*) applies the same styles to every element on the page. Check it out to see how it works :
The above code example selects all HTML elements on the page and changes their color to blue (as long as there isn't a more specific rule applied to the element).
Universal selector (*) does not affect specificity. It can be easily overwritten by a single id, class, or element selector.
What is the Use of Universal Selector (*) in CSS?
Maintaining consistent styles across browsers is tricky because each browser provides default styles for HTML elements. You want to reset all HTML element's padding and margin value to 0. Doing this work manually by selecting each element is too much work. That's where the universal selector comes in to save us as it selects all the elements and applies the defined styles to all the elements.
Take a look at the below code. It resets all HTML elements' margin and padding values.
The universal selector becomes helpful when you want to put a particular style in all the HTML elements within your web page, but that's not all you can do with it.
There are plenty of scenarios when you want to apply the same style to all the children of a particular parent. For example, selecting all the elements inside the div element.
Syntax
The basic syntax of Universal Sector is as follows:
Example:
In the above example. All HTML elements will have a 0px margin, which will overwrite all HTML elements' default margin.
You can also use a combination of Universal selector (*) with the namespace. It is generally only useful when dealing with documents containing multiple namespaces, such as HTML5 with inline SVG, MathML, or XML that mix multiple vocabularies.
- ns|* - This will allow you to match all elements within the namespace ns.
- *|* - It matches all the elements.
- |* - This will allow you to match all elements without any declared namespace.
Example of Universal Selector
The most common use of universal selector is with CSS reset rule :
Using CSS reset, CSS authors can force each browser to reset all of their styles to null, thus avoiding cross-browser differences as much as possible.
In the above example, We want all elements to include padding and borders in the box model calculation instead of adding those widths to any defined dimensions.
The box-sizing property ensures that padding and border do not increase the element's size. It takes two values, content-box and border-box.
Context-box is the default value of the box-sizing property . If you add padding or border, it increases the width and height of the element. At the same time, the border-box value guarantees that the element size includes borders and padding without increasing the size of an element.
For example, in the following rule, the .box will be wide, not from the padding :
The absolute width of the .box element will be because of the value applied by the universal selector.
Fun/Useful Ways to Use Universal Selector in CSS
You can do plenty of fun or useful things with the universal selector. Let's explore some of the most common uses of the universal selector.
Transitions
With a universal selector, We can make all the transitions on the web page with equal time . Hence When everything on the page has a quick and similar transition, it gives the users a nice, softened, calming feel, but it's just for fun because it causes performance issues.
Non-Repeating Backgrounds
Whenever we add a background image via the CSS Style, we specify another property that says Don't repeat the background image.
That feels like an unnecessary task because we don't want to repeat the background image most of the time, and we can do that with the universal selector.
Now that you are done, there will be no need to add this property every time you add a background image. Just add a background image, and you are good to go.
Relative Positioning
Most of us are generally addicted to using relative positioning in CSS because we use it too often. It might be an excellent decision to use the universal selector to apply it to all elements and then overwrite it with our requirement, and it saves a few lines of CSS.
It is highly suggested that you apply it to the new project or codebase rather than trying to change the old code.
Middle Alignment
This value is helpful, especially on projects that use icons. It doesn’t affect most layouts, as it only comes up when inline or inline-block elements line up on the same line. Practically, this is easier than resetting a default, making it an excellent candidate for a universal setting.
Debugging with Universal Selector
Sometimes things are behaving strangely, and you have no idea why. This is where a universal selector with the outline property comes in handy to visualize the flow of the page.
The !important rule in CSS override all previous styling rules for that specific property on that element!
Outline property does not affect the intrinsic size of the boxes and the flow of the boxes.
Example :
- Visit the website and open the developer tools.
- Inspect the Body element and add a new style with a universal selector like this :
- And hit the enter button, then it creates the outline around all the elements, and you can visualize all aspects and debug them easily.
Browser Compatibility
You don't have to worry about universal selectors in CSS because it supports all modern browsers, such as Google Chrome, Internet Explorer , Firefox, Opera, and Safari.
Conclusion
- Universal Selector in CSS is used to select all the elements on the HTML page.
- It is denoted by an asterisk (*).
- You can also combine the universal selector with a namespace.
- You can even use the universal selector to combine it with other fun/useful things.