CSS Specificity
The CSS specificity is a method that is applied when two or more sets of CSS properties are applied to a particular element. This method helps the browser in deciding which set of CSS properties are more relevant among all.
Sometimes it happens that some elements are unable to acquire the CSS property this is because of CSS specificity.
Specificity Hierarchy in CSS
In the specificity, there is a hierarchy for selectors that the browser follows while applying the CSS properties to the elements. Generally, the specificity hierarchy is divided into four parts which are used to describe the level of a selector:
Inline styles - The inline styles are directly attached to the elements as a value of the style attribute value.
IDs- The IDs act as a unique identifier for a particular element.
Classes, attributes, and pseudo-classes - This category consists of classes, attributes, and pseudo-element such as .class, hover,
:focus, etc.
Elements and pseudo-elements - This category consists of an element name and pseudo-elements such as div, p, ::before, ::after, etc.
Specificity Rules
Rule 1: Equal specificity: the latest rule counts
If the same CSS properties with different values are specified for more than one time in the CSS file then the properties that are declared later are considered closer to the element and will be applied.
Example : Equal specificity: the latest rule counts
In the given example, we have specified the CSS property background-color for the <h1> element two times with different values. First, we have specified the value of the background-color property to red and then pink.
<!DOCTYPE html>
<html>
<head>
<title>CSS Specificity</title>
<style>
h1 { background-color: red; }
h1 { background-color: pink; }
</style>
</head>
<body>
<h1>This is a heading.</h1>
</body>
</html>
Output:
As we can see in the output image, the background color of the heading s pink which we have specified later.
Rule 2: The ID selectors have a higher specificity value than attribute selectors.
In the given example, we have set the CSS property for the same element in three different ways. So, according to this rule, the element accept the properties that are declared for the id selectors.
<!DOCTYPE html>
<html>
<head>
<title>CSS Specificity</title>
<style>
h1#head {background-color: pink;}
#head {background-color: yellow;}
h1[id=head] {background-color: blue;}
</style>
</head>
<body>
<h1 id="head">This is a heading.</h1>
</body>
</html>
Output:
Rule 3: The contextual selectors have higher specificity than a single element selector.
Rule 4: The class selectors have a much higher specificity value than element selectors.
Rule 5: The specificity value of the universal selector and inherited selectors is 0.
The body and the * consist of a specificity value zero (0).
Live Example
In the given example, we have set the CSS property for the same element in two different ways one with the element name and another one with the class name. So according to this rule, the class selectors are more prior than the element selectors and the element acquires the properties that are set in the class selector.
Conclusion:
In this lesson, we have learned about CSS specificity and the hierarchy for selectors that the browser follows while applying the CSS properties to the elements. We have also learned the specificity rules which are given below:
- Equal specificity: the latest rule counts.
- The ID selectors have a higher specificity value than attribute selectors.
- The contextual selectors have higher specificity than a single element selector.
- The class selectors have a much higher specificity value than element selectors.
- The specificity value of the universal selector and inherited selectors is 0.
