path: root/files/fa/web/css/specificity/index.html

---
title: Specificity
slug: Web/CSS/Specificity
translation_of: Web/CSS/Specificity
---
<p> </p>

<div>{{CSSRef}}</div>

<p class="summary"><strong>Specificity</strong> 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 <a href="/en-US/docs/Web/CSS/CSS_Reference#Selectors">CSS selectors</a>.</p>

<h2 id="How_is_specificity_calculated">How is specificity 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 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, <a href="#directly-targeted-elements">directly targeted elements</a> will always take precedence over rules which an element inherits from its ancestor.</p>

<div class="blockIndicator note">
<p><strong>Note:</strong> <a href="#Tree_proximity_ignorance">Proximity of elements</a> in the document tree has no effect on the specificity.</p>
</div>

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

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

<ol>
 <li><a href="/en-US/docs/Web/CSS/Type_selectors">Type selectors</a> (e.g., <code>h1</code>) and pseudo-elements (e.g., <code>::before</code>).</li>
 <li><a href="/en-US/docs/Web/CSS/Class_selectors">Class selectors</a> (e.g., <code>.example</code>), attributes selectors (e.g., <code>[type="radio"]</code>) and pseudo-classes (e.g., <code>:hover</code>).</li>
 <li><a href="/en-US/docs/Web/CSS/ID_selectors">ID selectors</a> (e.g., <code>#example</code>).</li>
</ol>

<p>Universal selector ({{CSSxRef("Universal_selectors", "*")}}), combinators ({{CSSxRef("Adjacent_sibling_combinator", "+")}}, {{CSSxRef("Child_combinator", "&gt;")}}, {{CSSxRef("General_sibling_combinator", "~")}}, <a href="/en-US/docs/Web/CSS/Descendant_combinator" style="white-space: nowrap;">'<code> </code>'</a>, {{CSSxRef("Column_combinator", "||")}}) and negation pseudo-class ({{CSSxRef(":not", ":not()")}}) have no effect on specificity. (The selectors declared <em>inside</em> <code>:not()</code> do, however.)</p>

<p>For more information, visit: <a href="https://specifishity.com">https://specifishity.com</a></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> however, 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 a 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 <code>!important</code></li>
 <li><strong>Only</strong> use <code>!important</code> on page-specific CSS that overrides 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>, consider:</strong></p>

<ol>
 <li>Make better use of the CSS cascade</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="brush: html">&lt;div id="test"&gt;
  &lt;span&gt;Text&lt;/span&gt;
&lt;/div&gt;
</pre>

  <pre class="brush: css">div#test span { color: green; }
div span { color: blue; }
span { color: red; }</pre>

  <p>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)</p>
 </li>
 <li>As a nonsense special case for (2), duplicate simple selectors to increase specificity when you have nothing more to specify.
  <pre class="brush: css">#myId#myId span { color: yellow; }
.myClass.myClass span { color: orange; }</pre>
 </li>
</ol>

<h4 id="How_!important_can_be_used">How !important can be used:</h4>

<h5 id="A)_Overriding_inline_styles">A) Overriding inline styles</h5>

<p>Your global CSS file that sets visual aspects of your site globally may be overwritten by inline styles defined directly on individual elements. Both inline styles and !important are considered very bad practice, but sometimes you need the latter to override the former.</p>

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

<pre class="brush: html">&lt;div class="foo" style="color: red;"&gt;What color am I?&lt;/div&gt;
</pre>

<pre class="brush: css">.foo[style*="color: red"] {
  color: firebrick !important;
}
</pre>

<p>Many JavaScript frameworks and libraries add inline styles. Using <code>!important</code> with a very targeted selector is one way to override these inline styles.</p>

<h5 id="B)_Overriding_high_specificity">B) Overriding high specificity</h5>

<pre class="brush: css">#someElement p {
  color: blue;
}

p.awesome {
  color: red;
}</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>

<h4 id="How_to_override_!important">How to override <code>!important</code></h4>

<p>A) Add another CSS rule with <code>!important</code>, 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.</p>

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

<pre class="brush: css">table td    { height: 50px !important; }
.myTable td { height: 50px !important; }
#myTable td { height: 50px !important; }
</pre>

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

<pre class="brush: css">td { height: 50px !important; }</pre>

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

<pre class="brush: css">[id="someElement"] p {
  color: blue;
}

p.awesome {
  color: red;
}</pre>

<p>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.</p>

<h4 id="For_more_information_visit">For more information, visit:</h4>

<ul>
 <li><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></li>
 <li><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></li>
 <li><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></li>
 <li><a href="https://stackoverflow.com/questions/11178673/how-to-override-important">https://stackoverflow.com/questions/11178673/how-to-override-important</a></li>
 <li><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></li>
</ul>

<h3 id="The_is_and_not_exceptions" name="The_is_and_not_exceptions"><a id="The_not_exception" name="The_not_exception">The <code>:is()</code> and <code>:not()</code> exceptions</a></h3>

<p>The matches-any pseudo-class {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} and the negation pseudo-class {{CSSxRef(":not", ":not()")}} are <em>not</em> considered a pseudo-class in the specificity calculation. But selectors placed into the pseudo-class count as normal selectors when determining the count of <a href="#Selector_Types">selector types</a>.</p>

<div id="The_not_exception-example">
<p>This chunk of CSS ...</p>

<pre class="brush: css">div.outer p {
  color: orange;
}

div:not(.outer) p {
  color: blueviolet;
}
</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>... appears on the screen like this:</p>

<p>{{EmbedLiveSample("The_not_exception-example")}}</p>
</div>

<h3 id="The_where_exception" name="The_where_exception">The <code>:where()</code> exception {{Experimental_Inline}}</h3>

<p>{{SeeCompatTable}}</p>

<p>The specificity-adjustment pseudo-class {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} always has its specificity replaced with zero.</p>

<p>This chunk of CSS ...</p>

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

div p {
  color: blueviolet;
}
</pre>

<div class="hidden">
<pre class="brush: css;">#no-where-support {
  margin: 0.5em;
  border: 1px solid red;
}

#no-where-support:where(*) {
  display: none !important;
}
</pre>
</div>

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

<div class="hidden">
<pre class="brush: html;">&lt;div id=no-where-support&gt;
⚠️ Your browser doesn't support the &lt;code&gt;&lt;a href="https://developer.mozilla.org/docs/Web/CSS/:where"&gt;:where()&lt;/a&gt;&lt;/code&gt; pseudo-class.
&lt;/div&gt;
</pre>
</div>

<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>... appears on the screen like this:</p>

<p>{{EmbedLiveSample("The_where_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> counts as an attribute selector for the purpose of determining the selector's specificity, even though it selects an ID.</p>

<p>The following CSS styles ...</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>... end up looking like this:</p>

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

<p>This is because it matches the same element but the ID selector has a higher specificity.</p>

<h3 id="Tree_proximity_ignorance">Tree proximity ignorance</h3>

<p>The proximity of an element to other elements that are referenced in a given selector has no impact on specificity. 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>This is because the two declarations have equal <a href="#Selector_Types">selector type</a> counts, but the <code>html h1</code> selector is declared last.</p>

<h3 id="Directly_targeted_elements_vs._inherited_styles">Directly targeted elements vs. inherited styles</h3>

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

<pre class="brush: css">#parent {
  color: green;
}

h1 {
  color: purple;
}</pre>

<p>... with the following HTML ...</p>

<pre class="brush: html">&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_vs._inherited_styles")}}</p>

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

<h2 id="Specifications">Specifications</h2>

<div style="overflow: auto;">
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS4 Selectors", "#specificity-rules", "Calculating a selector's specificity")}}</td>
   <td>{{Spec2("CSS4 Selectors")}}</td>
   <td>Add the specificity adjustment selector {{CSSxRef(":where", ":where()")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Selectors", "#specificity", "Calculating a selector's specificity")}}</td>
   <td>{{Spec2("CSS3 Selectors")}}</td>
   <td>Add <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS2.1", "cascade.html#specificity", "Calculating a selector's specificity")}}</td>
   <td>{{Spec2("CSS2.1")}}</td>
   <td>Add <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a>.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS1", "#cascading-order", "Cascading order")}}</td>
   <td>{{Spec2("CSS1")}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>
</div>

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

<ul>
 <li>Specificity Calculator: An interactive website to test and understand your own CSS rules - <a href="https://specificity.keegan.st/">https://specificity.keegan.st/</a></li>
 <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>