Specificity

  • Revision slug: CSS/Specificity
  • Revision title: Specificity
  • Revision id: 12224
  • Created:
  • Creator: fryn
  • Is current revision? No
  • Comment 1 words added, 4 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

For more information see:

Revision Source

<p>Specificity 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>
<p>For more information see:</p>
<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>
</ul>
Revert to this revision