StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Good question.</p> <p>I can't tell for sure - all the articles I manage to find avoid the example of multiple classes, e.g. <a href="http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/" rel="noreferrer">here</a> - but I assume that when it comes to comparing the specifity <em>between a class selector and an ID</em>, the class gets calculated with a value of <code>15</code> only, no matter how detailed it is.</p> <p>That matches my experience in how specificity behaves.</p> <p>However, there <em>must</em> be some stacking of classes because</p> <pre><code>.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o </code></pre> <p>is more specific than</p> <pre><code>.o </code></pre> <p>the only explanation I have is that the specificity of stacked classes is calculated only against each other but not against IDs.</p> <p><strong>Update</strong>: I half-way get it now. It is not a points system, and the information about classes weighing 15 points is incorrect. It is a 4-part numbering system very well explained <a href="http://css-tricks.com/specifics-on-css-specificity/" rel="noreferrer">here</a>. </p> <p>The starting point is 4 figures:</p> <pre><code>style id class element 0, 0, 0, 0 </code></pre> <p>According to the <a href="http://www.w3.org/TR/CSS21/cascade.html#specificity" rel="noreferrer">W3C explanation on specificity</a>, the specificty values for the abovementioned rules are:</p> <pre><code>#a 0,1,0,0 = 100 classes 0,0,15,0 = ... see the comments </code></pre> <p>this is a numbering system with a very large (undefined?) base.</p> <p>My understanding is that because the base is very large, no number in column 4 can beat a number > 0 in column 3, the same for column 2, column 1 .... Is this correct?</p> <p>I'd be interested whether somebody with a better grasp at Math than me could explain th numbering system and how to convert it to decimal when the individual elements are larger than 9. </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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