How does css specificity work

So consider the first CSS rule. Inline styles: There are no inline styles so the count is 0 3. Classes, Pseudo classes and attributes: There are two classes here,. Elements and pseudo-elements: There are 2 elements, div and p so the count is 2. So if we write them in one line, it becomes. Now consider, next CSS rule. Classes, Pseudo classes and attributes: There are 2 classes. Elements and pseudo elements: There are 2 elements div and p so the count is 2.

To identify which one gets applied, we need to compare each column value. First column is 0. Second Column is 0. Third Column is 0 Fourth Column is 2 for the first rule and 3 for the second rule so the second rule is the winner and the color is black. So now you got the idea…. What will happen if all the columns have the same values as shown below:. In this case, the rule written last will take priority and that CSS will be applied.

So if you import multiple stylesheets, the last one imported will have its styles applied when specificity is equal. You now have two selectors targeting the same HTML element. To avoid this and ensure that the style properties of the. Originally published Jul 8, AM, updated July 08 Logo - Full Color. Contact Sales. Overview of all products. Marketing Hub Marketing automation software.

Service Hub Customer service software. CMS Hub Content management system software. Operations Hub Operations software. App Marketplace Connect your favorite apps to HubSpot. Why HubSpot? Marketing Sales Service Website.

Subscribe to Our Blog Stay up to date with the latest marketing, sales, and service tips and news. C Or, preferably, rewrite the original rule to avoid the use of!

Including an id as part of an attribute selector instead of as an id selector gives it the same specificity as a class. Both selectors above now have the same weight. In a specificity tie, the last rule defined wins. The matches-any pseudo-class :is and the negation pseudo-class :not are not considered a pseudo-class in the specificity calculation. But selectors placed into the pseudo-class count as normal selectors when determining the count of selector types.

The specificity-adjustment pseudo-class :where always has its specificity replaced with zero. Specificity is based on the form of a selector. The proximity of an element to other elements that are referenced in a given selector has no impact on specificity. The following style declaration This is because the two declarations have equal selector type counts, but the html h1 selector is declared last. Styles for a directly targeted element will always take precedence over inherited styles, regardless of the specificity of the inherited rule.

We use element selectors like a , p , and div to style a selected element, while pseudo-elements like ::after and ::before are used to style specific parts of an element. Element and pseudo-element selectors have the lowest specificity. In the specificity weight system, they have a value of 1. They have a higher specificity than element and pseudo-element selectors. In our specificity weight system, they have a value of ID selectors have higher specificity than classes and elements. Inline styles have the highest specificity.

The property values of selectors with a higher weight will always be applied over a selector with a lower weight. Inline styles have the highest weight and their property value overrides every other selector's value applied to an element. For example, if we have an element and for the same property color , there's an inline style.

If the class and id selectors also have values for the same property, the inline style wins. The same thing happens when an ID selector and class selector have values for the same property. The property value of the ID selector will apply. Note that the weights only apply when different selectors have values for the same property.

There are times when more than one selector is used to target an element. For example, for a list like this:. In a case where both selectors are used on the same stylesheet, which style will be applied to the list items?

Combined their sum is There are two element selectors used, so their sum is 2. If you said the color of the.