How CSS specificity works in a browser
- Transfer
Many consider CSS complex. They come up with various excuses: lacking the ability to understand CSS or CSS is bad in itself. But the reality is that people simply did not take the time to really explore it. If you are reading this article, it means you are interested in learning CSS and this is great!
Have you ever written a style, but it doesn't work, then you add ! Important (or not), and yet it doesn't work? Then you look at Devtools and realize that a different style somewhere overlaps yours?
This is the specificity of CSS! This is how the browser chooses which of the competing selectors to apply to the element. When the browser sees that two or more selectors match the same element, and the selectors have conflicting rules, they need a way to figure out which rule to apply to this element. The way this happens is called the “CSS specificity value”.
Before we dive into CSS specificity, remember these things:
Now we can go on to how the browser determines the specificity values of the selector.
The specificity of the selector can be represented as a three-digit string separated by a hyphen (or whatever): “2–4–1”. The first digit is the number of ID selectors present, the second is the number of class selectors, attribute selectors and pseudo-classes, and the third is the number of available type selectors and pseudo-elements. For example:
To determine which selector has greater specificity, you can compare each of the three values.
Let's say you have 1-1-1 and 0-3-0 , as in the last two examples, and you need to determine which of them has greater specificity. At first you compare the last values 1 and 0 , and in this case wins 1 . This means that at the moment there
Next, compare values 1 and 3 , 3 wins. Currently, .red.blue.yellow has a greater specificity value.
Finally, we compare the first values, 1 and 0 , and wins 1 , so it
The CSS specificity of the selector provides a good explanation for why no amount of class selectors can override the ID selector.
3 “pitfalls” you need to know about:
I hope that this article is easy to understand and helped to understand what CSS specificity is. Now you can look at the style and easily determine how “specific” it is.
What is CSS specificity?
Have you ever written a style, but it doesn't work, then you add ! Important (or not), and yet it doesn't work? Then you look at Devtools and realize that a different style somewhere overlaps yours?
This is the specificity of CSS! This is how the browser chooses which of the competing selectors to apply to the element. When the browser sees that two or more selectors match the same element, and the selectors have conflicting rules, they need a way to figure out which rule to apply to this element. The way this happens is called the “CSS specificity value”.
Before we dive into CSS specificity, remember these things:
- CSS specificity is important only when multiple selectors affect the same element. The browser needs a way to figure out which style to apply to the corresponding element when there are conflicting property values.
- When two or more matching selectors have the same specificity value (weight), the browser selects the “most recent” matching selector, which appears closer to the bottom of the list of matching selectors. The next paragraph explains what a “list of suitable selectors is.”
- The browser generates a “list of suitable selectors” by combining all the styles on a web page and filtering out those that do not correspond to the “currently-being-styled” element . The first selectors in the style sheet are at the top of the list, and the last selectors are at the bottom.
- The style property of an element has a greater specificity value than selectors in style sheets, except when there is ! Important in the style sheet selector.
- Using ! Important (which in some cases is considered bad practice) changes the specificity of the selector. When two selectors have the same specificity, the selector with ! Important wins . And when they both have ! Important , the “very last” selector wins.
Specificity value
Now we can go on to how the browser determines the specificity values of the selector.
The specificity of the selector can be represented as a three-digit string separated by a hyphen (or whatever): “2–4–1”. The first digit is the number of ID selectors present, the second is the number of class selectors, attribute selectors and pseudo-classes, and the third is the number of available type selectors and pseudo-elements. For example:
#red.blue // 1-1-0
#green // 1-0-0
div.yellow#red // 1-1-1
.red.blue.yellow // 0-3-0The definition of the “specific”
To determine which selector has greater specificity, you can compare each of the three values.
Let's say you have 1-1-1 and 0-3-0 , as in the last two examples, and you need to determine which of them has greater specificity. At first you compare the last values 1 and 0 , and in this case wins 1 . This means that at the moment there
div.yellow#redis a greater specificity value ... but we have not finished the comparison of values. Next, compare values 1 and 3 , 3 wins. Currently, .red.blue.yellow has a greater specificity value.
Finally, we compare the first values, 1 and 0 , and wins 1 , so it
div.yellow#redhas more specificity than .red.blue.yellow. The CSS specificity of the selector provides a good explanation for why no amount of class selectors can override the ID selector.
Small warnings
3 “pitfalls” you need to know about:
- I wrote above that the second number in a sequence of numbers consisting of three is "the number of class selectors, attribute selectors, and pseudo-classes." This is true in all cases, except when it is: a
:not()pseudo-class. When this is a:not()pseudo-class, we do not consider it, but simply ignore it. But selectors inside it are not ignored, they are considered normal. - CSS specificity understands the “form” of the selector. This means that when you have
*[id="yellow"], and#yellowthe first is regarded as the attribute selector. - A universal selector
*itself does not count towards the specificity of a selector. In the paragraph above, the[id="yellow"]selector part is what really matters.
I hope that this article is easy to understand and helped to understand what CSS specificity is. Now you can look at the style and easily determine how “specific” it is.