Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>How</strong></p> <p><a href="http://www.w3.org/TR/CSS2/cascade.html#specificity" rel="nofollow noreferrer">W3C rules for calculating specificity</a>:</p> <blockquote> <ul> <li>count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)</li> <li>count the number of ID attributes in the selector (= b)</li> <li>count the number of other attributes and pseudo-classes in the selector (= c)</li> <li>count the number of element names and pseudo-elements in the selector (= d) </li> </ul> <p>The specificity is based only on the form of the selector. In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD.</p> <p>Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity. Also, when rules have the same specificity, the last one wins.</p> </blockquote> <p><strong>Example</strong></p> <ul> <li><h1>outer span: a=0, b=1, c=0, d=1 --> 101</h1></li> <li>span#inner: a=0, b=1, c=0, d=1 --> 101</li> <li>div#outer span#inner: a=0, b=2, c=0, d=2 --> 202</li> </ul> <p>Try rearranging rules 1 and 3: <a href="http://jsfiddle.net/Wz96w/" rel="nofollow noreferrer">http://jsfiddle.net/Wz96w/</a></p> <p><strong>Why</strong></p> <p>My thought is that #inner does not specify a unique element. While it is only 1 element per page, that ID could be a completely different element on another page.</p> <p>One page:</p> <pre><code>&lt;div id="outer"&gt; &lt;div id="inner"&gt; ... &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Another page:</p> <pre><code>&lt;ul id="outer"&gt; &lt;li&gt;main1 &lt;ul id="inner"&gt; &lt;li&gt;sub1&lt;/li&gt; &lt;li&gt;sub2&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;main2&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>Although, I would not code it this way. I think it explains why adding the element (<code>ul#outer</code> vs. <code>#outer</code>) is worthy of extra specificity.</p> <p>For the point on descendants, I'm visualizing the DOM for your markup. The rule <code>#outer span</code> has a path length longer than that of <code>#inner</code>. Therefore, in the case, it specifies a more specific subtree, so it should be awarded more specificity (and <code>#outer #inner li</code> should be [is] worth more than <code>#inner li</code>).</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload