mozilla

Revision 12225 of Specificity

  • Revision slug: CSS/Specificity
  • Revision title: Specificity
  • Revision id: 12225
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 8 words added, 5 words removed

Revision Content

Specificity is the means by which a browser decides which of the matching CSS rules for a given property is the most relevant.

Broadly speaking the rules are chosen in the following order:

  • rules marked !important
  • those attached to the element itself (i.e. <div style="color:red;">)
  • the rules with more ids in the selector (e.g. "#foo #bar" beats "#baz")
  • rules with more classes (e.g. ".x .y .z" beats ".a .b", but they are both beaten by "#a" from the previous rule)
  • rules with more tags (e.g. "body div span" beats "p strong")
  • rules that don't apply to the element in question but are further up its inheritance chain

See also

Revision Source

<p><strong>Specificity</strong> is the means by which a browser decides which of the matching CSS rules for a given property is the most relevant.</p>
<p>Broadly speaking the rules are chosen in the following order:</p>
<ul> <li>rules marked !important</li> <li>those attached to the element itself (i.e. &lt;div style="color:red;"&gt;)</li> <li>the rules with more ids in the selector (e.g. "#foo #bar" beats "#baz")</li> <li>rules with more classes (e.g. ".x .y .z" beats ".a .b", but they are both beaten by "#a" from the previous rule)</li> <li>rules with more tags (e.g. "body div span" beats "p strong")</li> <li>rules that don't apply to the element in question but are further up its inheritance chain</li>
</ul>
<h2>See also</h2>
<ul> <li>CSS selectors spec: <a class=" external" href="http://www.w3.org/TR/css3-selectors/#specificity" rel="freelink">http://www.w3.org/TR/css3-selectors/#specificity</a></li> <li><a href="/en/CSS_Reference" title="CSS Reference">CSS Reference</a></li> <li>{{ CSS_key_concepts() }}</li>
</ul>
Revert to this revision