Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>To me, and I base this entirely on opinion, it's the expected "natural" behaviour.</p> <p>Consider this:</p> <p>You know how CSS specificity is calculated, and from that formula we know that <code>#outer span</code> is more specific than <code>#outer</code>, which is necessary for CSS on the whole to work correctly, and it makes sense. <code>#outer span</code> is also more specific than <code>#inner</code>, which is also logical within the domain of the stylesheet (<code>#inner</code> is only an ID, and <code>#outer span</code> is an ID plus an element, so in order to rank them if we are <em>just</em> looking at the stylesheet, the more qualified one must be more specific).</p> <p>What's happening here is that you're applying the context of the HTML markup, and saying "Well, that doesn't make sense." To make things work the way that you're expecting, the browser would have to consier the following:</p> <ul> <li>This <code>&lt;span id="inner"&gt;</code> is inside <code>&lt;div id="outer"&gt;</code></li> <li>The stylesheet rules for <code>#outer span</code> and <code>#inner</code> apply</li> <li>The rule <code>#outer span</code> is more specific than <code>#inner</code></li> <li>But wait! <code>&lt;span id="inner"&gt;</code> is inside <code>&lt;div id="outer"&gt;</code>, so ignore the calculations based on the stylesheet and claim that <code>#inner</code> is more specific</li> </ul> <p>That last step makes the determination process entirely based on the structure of the HTML, which makes it impossible to define the specificity in terms of the CSS alone. I personally believe that this would make the entire process more convoluted and hard to define, but you may disagree.</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. 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