Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Revision 495095 of Specificity

  • Revision slug: Web/CSS/Specificity
  • Revision title: Specificity
  • Revision id: 495095
  • Created:
  • Creator: kscarfone
  • Is current revision? No
  • Comment Updated tags

Revision Content

{{cssref}}

The concept

Specificity is the means by which a browser decides which property values are the most relevant to an element and gets to be applied. Specificity is only based on the matching rules which are composed of selectors of different sorts.

How is it calculated?

The specificity is calculated on the concatenation of the count of each selectors type. It is not a weight that is applied to the corresponding matching expression.

In case of specificity equality, the latest declaration found in the CSS is applied to the element.

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

Crescent order of specificity

The following list of selectors is by increasing specificity:

  • Universal selectors
  • Type selectors
  • Class selectors
  • Attributes selectors
  • Pseudo-classes
  • ID selectors
  • Inline style

The !important exception

When an !important rule is used on a style declaration, this declaration overrides any other declaration made in the CSS, wherever it is in the declaration list. Although, !important has nothing to do with specificity.  Using !important is bad practice because it makes debugging hard since you break the natural cascading in your stylesheets.

Some rules of thumb

  • Never use !important on site-wide css.
  • Only use !important on page-specific css that overrides site-wide or foreign css (from ExtJs or YUI for example).
  • Never use !important when you're writing a plugin/mashup.
  • Always look for a way to use specificity before even considering !important

 

 

Instead of using it, 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 is more specific and gets higher priority:

    <div id="test">
      <span>Text</span>
    </div>
    div#test span { color: green }
    span { color: red }
    div span { color: blue }

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, no matter the order of the rules)

You should use it when:

A) One scenario

  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 usually 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

Simply add another CSS rule with !important, and either give the selector a higher specificity (adding an additional 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 one defined wins).

Some examples with a higher specificity:

table td    {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}

Or add the same selector after the existing one:

td {height: 50px !important;}

 

For more information, visit:

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

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

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

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

http://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 as a pseudo-class in the specificity calculation. Although, selectors placed into the negation pseudo-class count as normal selectors.

Here is a CSS chunk:

div.outer p {
  color:orange;
}
div:not(.outer) p {
  color: lime;
}

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>

Will appear on the screen as:

This is in the outer div.

This text is in the inner div.

Form-based specificity

Specificity is based on the form of a selector. In the following case, the selector counts as an attribute in the specificity determination algorithm although it selects an ID.

The following style declarations:

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

Used with this markup:

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

Will end up looking like:

I am a sample text.

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

Tree proximity ignorance

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:

Here is a title!

See also

Revision Source

<div>
 {{cssref}}</div>
<h2 id="The_concept">The concept</h2>
<p>Specificity is the means by which a browser decides which property values are the most relevant to an element and gets to be applied. Specificity is only based on the matching rules which are composed of <a href="/en/CSS/CSS_Reference#Selectors" title="en/CSS/CSS_Reference#Selectors">selectors</a> of different sorts.</p>
<h2 id="How_is_it_calculated.3F">How is it calculated?</h2>
<p>The specificity is calculated on the concatenation of the count of each selectors type. It is not a weight that is applied to the corresponding matching expression.</p>
<p>In case of specificity equality, the latest declaration found in the CSS is applied to the element.</p>
<div class="note">
 Note: Proximity of elements in the document tree has no effect on the specificity.</div>
<h3 id="Crescent_order_of_specificity">Crescent order of specificity</h3>
<p>The following list of selectors is by increasing specificity:</p>
<ul>
 <li>Universal selectors</li>
 <li>Type selectors</li>
 <li>Class selectors</li>
 <li>Attributes selectors</li>
 <li>Pseudo-classes</li>
 <li>ID selectors</li>
 <li>Inline style</li>
</ul>
<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 declaration made in the CSS, wherever it is in the declaration list. Although, <code>!important</code> has nothing to do with specificity.&nbsp; Using <code>!important </code>is <strong>bad practice</strong> because it makes debugging hard since you break the natural <em>cascading</em> in your stylesheets.</p>
<p><strong>Some rules of thumb</strong></p>
<ul>
 <li><strong>Never</strong> use !important on site-wide css.</li>
 <li><strong>Only</strong> use !important on page-specific css that overrides site-wide or foreign css (from ExtJs or YUI for example).</li>
 <li><strong>Never</strong> use !important when you're writing a plugin/mashup.</li>
 <li><strong>Always</strong> look for a way to use specificity before even considering !important</li>
</ul>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><strong>Instead of using it, 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 is more specific and gets higher priority:</p>
  <pre class="lang-html prettyprint prettyprinted" style="">
<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" style="">
<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">
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">
div span </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">color</span><span class="pun">:</span><span class="pln"> blue </span><span class="pun">}</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, no matter the order of the rules)</p>
<p><strong>You should use it when:</strong></p>
<p>A) One scenario</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 <strike>usually</strike> 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" style="">
<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>&nbsp;</p>
<p><strong>How to override !important</strong></p>
<p>Simply add another CSS rule with <code>!important</code>, and either give the selector a higher specificity (adding an additional 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 one defined wins).</p>
<p>Some examples with a higher specificity:</p>
<pre class="default prettyprint prettyprinted" style="">
<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>Or add the same selector after the existing one:</p>
<pre class="default prettyprint prettyprinted" style="">
<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>&nbsp;</p>
<p><strong>For more information, visit: </strong></p>
<p><a href="http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css">http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css</a></p>
<p><a href="http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean">http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean</a></p>
<p><a href="http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css">http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css</a></p>
<p><a href="http://stackoverflow.com/questions/11178673/how-to-override-important">http://stackoverflow.com/questions/11178673/how-to-override-important</a></p>
<p><a href="http://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css">http://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css</a></p>
<p>&nbsp;</p>
<h3 id="The_.3Anot_exception">The <code>:not</code> exception</h3>
<p>The negation pseudo-class <code>:not</code> is not considered as a pseudo-class in the specificity calculation. Although, selectors placed into the negation pseudo-class count as normal selectors.</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>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>Will appear on the screen as:</p>
<p><span style="color:#ffa500;">This is in the outer div.</span></p>
<p><span style="color:#00ff00;">This text is in the inner div.</span></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 counts as an attribute in the specificity determination algorithm although it selects an ID.</p>
<p>The following style declarations:</p>
<pre class="brush: css">
* #foo {
  color: green;
}
*[id="foo"] {
  color: purple;
}
</pre>
<p>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><span style="color:#008000;">I am a sample text.</span></p>
<p>Because it matches the same element but the ID selector has a superior specificity.</p>
<h3 id="Tree_proximity_ignorance">Tree proximity ignorance</h3>
<p>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><span style="color:#800080;">Here is a title!</span></p>
<h2 id="See_also">See also</h2>
<ul>
 <li>CSS3 Selectors Specificity - <a class="external" href="http://www.w3.org/TR/selectors/#specificity" rel="freelink">http://www.w3.org/TR/selectors/#specificity</a></li>
 <li>{{ CSS_key_concepts() }}</li>
</ul>
Revert to this revision