Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.
Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted by multiple declarations. As per CSS rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor.
The following list of selector types increases by specificity:
h1
) and pseudo-elements (e.g., ::before
)..example
), attributes selectors (e.g., [type="radio"]
) and pseudo-classes (e.g., :hover
).#example
).Universal selector (*
), combinators (+
, >
, ~
, '') and negation pseudo-class (:not()
) have no effect on specificity. (The selectors declared inside :not()
do, however.)
Inline styles added to an element (e.g., style="font-weight:bold"
) always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.
!important
exceptionWhen an important
rule is used on a style declaration, this declaration overrides any other declarations. Although technically !important
has nothing to do with specificity, it interacts directly with it. Using !important,
however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets. When two conflicting declarations with the !important
rule are applied to the same element, the declaration with a greater specificity will be applied.
Some rules of thumb:
!important
on page-specific CSS that overrides foreign CSS (from external libraries, like Bootstrap or normalize.css).!important
when you're writing a plugin/mashup.!important
on site-wide CSS.!important
Using more specific rules. By indicating one or more elements before the element you're selecting the rule becomes more specific and gets higher priority:
<div id="test"> <span>Text</span> </div>
div#test span { color: green; } div span { color: blue; } span { color: red; }
No matter the order, text will be green because that rule is most specific. (Also, the rule for blue overwrites the rule for red, notwithstanding the order of the rules)
A) Scenario one:
In this case, you could set certain styles in your global CSS file as important, thus overriding inline styles set directly on elements.
Real world example: Some badly written jQuery plugins which use inline styles.
B) Another scenario
#someElement p { color: blue; } p.awesome { color: red; }
How do you make awesome
paragraphs always turn red, even ones inside #someElement
? Without !important
, the first rule will have more specificity and will win over the second rule.
A) Simply add another CSS rule with !important
, and either give the selector a higher specificity (adding a tag, id or class to the selector), or add a CSS rule with the same selector at a later point than the existing one. This works because in a specificity tie, the last rule defined wins.
Some examples with a higher specificity:
table td { height: 50px !important; } .myTable td { height: 50px !important; } #myTable td { height: 50px !important; }
B) Or add the same selector after the existing one:
td { height: 50px !important; }
C) Or rewrite the original rule to avoid the use of !important
altogether.
For more information, visit:
:not
exceptionThe negation pseudo-class :not
is not considered a pseudo-class in the specificity calculation. But selectors placed into the negation pseudo-class count as normal selectors when determining the count of selector types.
This chunk of CSS ...
div.outer p { color:orange; } div:not(.outer) p { color: lime; }
... when used with the following HTML ...
<div class="outer"> <p>This is in the outer div.</p> <div class="inner"> <p>This text is in the inner div.</p> </div> </div>
... appears on the screen like this:
Specificity is based on the form of a selector. In the following case, the selector *[id="foo"]
counts as an attribute selector for the purpose of determining the selector's specificity, even though it selects an ID.
The following CSS styles ...
*#foo { color: green; } *[id="foo"] { color: purple; }
... when used with this markup ...
<p id="foo">I am a sample text.</p>
... end up looking like this:
This is because it matches the same element but the ID selector has a higher specificity.
The proximity of an element to other elements that are referenced in a given selector has no impact on specificity. The following style declaration ...
body h1 { color: green; } html h1 { color: purple; }
... with the following HTML ...
<html> <body> <h1>Here is a title!</h1> </body> </html>
... will render as:
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. This CSS ...
#parent { color: green; } h1 { color: purple; }
... with the following HTML ...
<html> <body id="parent"> <h1>Here is a title!</h1> </body> </html>
... will also render as:
This is because the h1
selector targets the element specifically, but the green selector is only inherited from its parent.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity