CSS specificity is a crucial concept to grasp if you want to improve your CSS skills. It is the collection of rules that define which style is applied to an element using CSS selectors. To fully comprehend this, we must first comprehend a similar issue — CSS cascading.
CSS specificity is a term that describes how significant a selector is. The greater the selector's number, the more specific it is, and the more likely that block of CSS will win the stylistic wars.
To fix this, we need to increase the CSS selectors' specificity values in the media query. The browser will follow the source order rule if the CSS selectors that target the same HTML elements have the same specificity.
Different kinds of specificity are:
Generic: The word or phrase applies to all elements on the page;
Class Specific: The word or phrase applies only to one class;
ID Specific: The word or phrase applies only to one element with an ID;
Attribute Specific: The word or phrase applies only to one attribute on an element.
The first selector is the universal selector (*). This selector is used to target any element on a given web page and can also be used as a pseudo-class. The universal selector can also be used in conjunction with other selectors by adding it in front of them. For example, you could add * before an element’s ID to target only that particular element or class rather than all of the elements with that class.