Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 1082784 of Specificity

  • Revision slug: Web/CSS/Specificity
  • Revision title: Specificity
  • Revision id: 1082784
  • Created:
  • Creator: fcard
  • Is current revision? No
  • Comment Fix first live sample

Revision Content

{{cssref}}

The concept

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 CSS selectors of different sorts.

How is it calculated?

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 specificity is equal to any of the multiple declarations, 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 element will always take precedence over rules that an element inherits from an ancestor.

Note: Proximity of elements in the document tree has no effect on the specificity.

Selector Types

The following list of selector types is by increasing specificity:

  1. Type selectors (e.g., h1) and pseudo-elements (e.g., :before).
  2. Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).
  3. ID selectors (e.g., #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.

The !important exception

When 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 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 greater specificity will be applied.

Some rules of thumb:

  • Always look for a way to use specificity before even considering !important
  • Only use !important on page-specific CSS that overrides site-wide or foreign CSS (from external libraries, like Bootstrap or normalize.css).
  • Never use !important when you're writing a plugin/mashup.
  • Never use !important on site-wide CSS.

Instead of using !important, you can:

  1. Make better use of CSS cascading properties
  2. Use 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 what the order, the 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)

You should use it when:

A) Scenario one:

  1. You have a global CSS file that sets visual aspects of your site globally
  2. You (or others) use inline styles on elements themselves which is a very bad practice

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 that 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.

How to override !important

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. (In a 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:

https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css

https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean

https://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css

https://stackoverflow.com/questions/11178673/how-to-override-important

https://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css

 

The :not exception

The 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.

Here is a CSS chunk:

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>

Shall appear on the screen as:

{{EmbedLiveSample('The_not_exception')}}

Form-based specificity

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 style declarations:

*#foo {
  color: green;
}
*[id="foo"] {
  color: purple;
}

when used with this markup:

<p id="foo">I am a sample text.</p>

Will end up looking like:

{{EmbedLiveSample('Form-based_specificity')}}

Because it matches the same element but the ID selector has a higher specificity.

Tree proximity ignorance

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:

{{EmbedLiveSample('Tree_proximity_ignorance')}}

Because the two declarations have equal selector type counts, but the html h1 selector is declared last.

Directly targeted elements versus inherited styles

Styles for a directly targeted element will always take precedence over inherited styles, regardless of the specificity of the inherited rule.

#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:

{{EmbedLiveSample('Directly_targeted_elements_versus_inherited_styles')}}

Because the h1 selector targets the element specifically, but the green selector is only inherited from the parent.

See also

Revision Source

<p>{{cssref}}</p>

<h2 id="The_concept">The concept</h2>

<p><span class="seoSummary">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 <a href="/en/CSS/CSS_Reference#Selectors" title="en/CSS/CSS_Reference#Selectors">CSS selectors</a> of different sorts.</span></p>

<h2 id="How_is_it_calculated">How is it calculated?</h2>

<p>Specificity is a weight that is applied to a given CSS declaration, determined by the number of each <a href="#Selector_Types">selector type</a> in the matching selector. When specificity is equal to any of the&nbsp;multiple declarations, 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 <a href="#directly-targeted-elements">directly targeted element</a> will always take precedence over rules that an element inherits from an ancestor.</p>

<div class="note">Note: <a href="#tree-proximity-ignorance">Proximity of elements</a> in the document tree has no effect on the specificity.</div>

<h3 id="Selector_Types">Selector Types</h3>

<p>The following list of selector types is by increasing specificity:</p>

<ol start="0">
 <li>Type selectors (e.g., <code>h1</code>) and pseudo-elements (e.g., <code>:before</code>).</li>
 <li>Class selectors (e.g., <code>.example</code>), attributes selectors (e.g., <code>[type="radio"]</code>) and pseudo-classes (e.g., <code>:hover</code>).</li>
 <li>ID selectors (e.g., <code>#example</code>).</li>
</ol>

<p>Universal selector (<code>*</code>), combinators (<code>+</code>, <code>&gt;</code>, <code>~</code>, '<code> </code>') and negation pseudo-class (<code>:not()</code>) have no effect on specificity. (The selectors declared <em>inside</em> <code>:not()</code> do, however.)</p>

<p>Inline styles added to an element (e.g., <code>style="font-weight:bold"</code>) always overwrite any styles in external stylesheets and thus can be thought of as having the highest specificity.</p>

<h3 id="The_!important_exception">The !<code>important</code> exception</h3>

<p>When an <code>important</code> rule is used on a style declaration, this declaration overrides any other declarations. Although technically <code>!important</code> has nothing to do with specificity, it interacts directly with it. Using <code>!important</code> is <strong>bad practice</strong> and should be avoided because it makes debugging more difficult by breaking the natural <a href="/en-US/docs/Web/CSS/Cascade">cascading</a> in your stylesheets. When two conflicting declarations with the <code>!important</code> rule are applied to the same element, the declaration with greater specificity will be applied.</p>

<p><strong>Some rules of thumb:</strong></p>

<ul>
 <li><strong>Always</strong> look for a way to use specificity before even considering !important</li>
 <li><strong>Only</strong> use <code>!important</code> on page-specific CSS that overrides site-wide or foreign CSS (from external libraries, like Bootstrap or normalize.css).</li>
 <li><strong>Never</strong> use <code>!important</code> when you're writing a plugin/mashup.</li>
 <li><strong>Never</strong> use <code>!important</code> on site-wide CSS.</li>
</ul>

<p><strong>Instead of using <code>!important</code>, you can:</strong></p>

<ol>
 <li>Make better use of CSS cascading properties</li>
 <li>
  <p>Use more specific rules. By indicating one or more elements before the element you're selecting the rule becomes more specific and gets higher priority:</p>

  <pre class="lang-html prettyprint prettyprinted">
<code><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"test"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;span&gt;</span><span class="pln">Text</span><span class="tag">&lt;/span&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre>

  <pre class="lang-css prettyprint prettyprinted">
<code><span class="pln">div</span><span class="pun">#</span><span class="pln">test span </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">color</span><span class="pun">:</span><span class="pln"> green </span><span class="pun">}</span><span class="pln">
div span { color: blue }
span </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">color</span><span class="pun">:</span><span class="pln"> red </span><span class="pun">}</span><span class="pln">
</span></code></pre>
 </li>
</ol>

<p>No matter what the order, the 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)</p>

<p><strong>You should use it when:</strong></p>

<p>A) Scenario one:</p>

<ol>
 <li>You have a global CSS file that sets visual aspects of your site globally</li>
 <li>You (or others) use inline styles on elements themselves which is a very bad practice</li>
</ol>

<p>In this case, you could set certain styles in your global CSS file as important thus overriding inline styles set directly on elements.</p>

<p>Real world example: Some badly written <strong>jQuery plugins</strong> that use inline styles.</p>

<p>B) Another scenario</p>

<pre class="default prettyprint prettyprinted">
<code><span class="com">#someElement p {</span><span class="pln">
    color</span><span class="pun">:</span><span class="pln"> blue</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

p</span><span class="pun">.</span><span class="pln">awesome </span><span class="pun">{</span><span class="pln">
    color</span><span class="pun">:</span><span class="pln"> red</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></code></pre>

<p>How do you make <code>awesome</code> paragraphs always turn red, even ones inside <code>#someElement</code>? Without <code>!important</code>, the first rule will have more specificity and will win over the second rule.</p>

<p><strong>How to override !important</strong></p>

<p>A)&nbsp;Simply add another CSS rule with <code>!important</code>, and either give the selector a higher specificity (adding&nbsp;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. (In a tie, the last rule defined wins).</p>

<p>Some examples with a higher specificity:</p>

<pre class="default prettyprint prettyprinted">
<code><span class="pln">table td    </span><span class="pun">{</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pln"> </span><span class="pun">!</span><span class="pln">important</span><span class="pun">;}</span><span class="pln">
</span><span class="pun">.</span><span class="pln">myTable td </span><span class="pun">{</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pln"> </span><span class="pun">!</span><span class="pln">important</span><span class="pun">;}</span><span class="pln">
</span><span class="com">#myTable td {height: 50px !important;}</span></code></pre>

<p>B) Or add the same selector after the existing one:</p>

<pre class="default prettyprint prettyprinted">
<code><span class="pln">td </span><span class="pun">{</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pln"> </span><span class="pun">!</span><span class="pln">important</span><span class="pun">;}</span></code></pre>

<p>C) Or rewrite the original rule to avoid the use of <code>!important</code> altogether.</p>

<p><strong>For more information, visit: </strong></p>

<p><a href="https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css">https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css</a></p>

<p><a href="https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean">https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean</a></p>

<p><a href="https://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css">https://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css</a></p>

<p><a href="https://stackoverflow.com/questions/11178673/how-to-override-important">https://stackoverflow.com/questions/11178673/how-to-override-important</a></p>

<p><a href="https://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css">https://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css</a></p>

<p>&nbsp;</p>

<h3 id="The_not_exception">The <code>:not</code> exception</h3>

<p>The negation pseudo-class <code>:not</code> is <em>not</em> 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 <a href="#selector-type">selector types</a>.</p>

<p>Here is a CSS chunk:</p>

<pre class="brush: css">
div.outer p {
  color:orange;
}
div:not(.outer) p {
  color: lime;
}
</pre>

<p>when used with the following HTML:</p>

<pre class="brush: html">
&lt;div class="outer"&gt;
  &lt;p&gt;This is in the outer div.&lt;/p&gt;
  &lt;div class="inner"&gt;
    &lt;p&gt;This text is in the inner div.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>

<p>Shall appear on the screen as:</p>

<p>{{EmbedLiveSample('The_not_exception')}}</p>

<h3 id="Form-based_specificity">Form-based specificity</h3>

<p>Specificity is based on the form of a selector. In the following case, the selector <code>*[id="foo"]</code>&nbsp;counts as an attribute selector for the purpose of determining the selector's&nbsp;specificity, even though&nbsp;it selects an ID.</p>

<p>The following style declarations:</p>

<pre class="brush: css">
*#foo {
  color: green;
}
*[id="foo"] {
  color: purple;
}
</pre>

<p>when used with this markup:</p>

<pre class="brush: html">
&lt;p id="foo"&gt;I am a sample text.&lt;/p&gt;
</pre>

<p>Will end up looking like:</p>

<p>{{EmbedLiveSample('Form-based_specificity')}}</p>

<p>Because it matches the same element but the ID selector has a&nbsp;higher specificity.</p>

<h3 id="Tree_proximity_ignorance"><a id="tree-proximity-ignorance" name="tree-proximity-ignorance">Tree proximity ignorance</a></h3>

<p>The proximity of an element to other elements that are referenced in a given selector has&nbsp;no impact on specificity.&nbsp;The following style declaration:</p>

<pre class="brush: css">
body h1 {
  color: green;
}
html h1 {
  color: purple;
}
</pre>

<p>With the following HTML:</p>

<pre class="brush: html">
&lt;html&gt;
&lt;body&gt;
  &lt;h1&gt;Here is a title!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

<p>Will render as:</p>

<p>{{EmbedLiveSample('Tree_proximity_ignorance')}}</p>

<p>Because the two declarations have equal <a href="#selector-type">selector type</a> counts, but the <code>html h1</code> selector is declared last.</p>

<h3 id="Directly_targeted_elements_versus_inherited_styles"><a id="directly-targeted-elements" name="directly-targeted-elements">Directly targeted elements versus inherited styles</a></h3>

<p>Styles for a directly targeted element will always take precedence over inherited styles, regardless of the specificity of the inherited rule.</p>

<pre class="brush: css" style="font-size: 14px;">
#parent {
  color: green;
}
h1 {
  color: purple;
}</pre>

<p>With the following HTML:</p>

<pre class="brush: html" style="font-size: 14px;">
&lt;html&gt;
&lt;body id="parent"&gt;
  &lt;h1&gt;Here is a title!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>

<p>Will also render as:</p>

<p>{{EmbedLiveSample('Directly_targeted_elements_versus_inherited_styles')}}</p>

<p>Because the <code>h1</code> selector targets the element specifically, but the green selector is only inherited from the parent.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>CSS3 Selectors Specificity - <a class="external" href="https://www.w3.org/TR/selectors/#specificity" rel="freelink">https://www.w3.org/TR/selectors/#specificity</a></li>
 <li>{{ CSS_key_concepts() }}</li>
</ul>
Revert to this revision