StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Because both of them are at an equal specificity (only referencing class), the one at the end of the file has precedent. If you were to make <code>.text_left</code> be <code>div.text_left</code>, then it is more specific and it will override <code>.form_container_header</code> no matter where it is in the file. </p> <p>From <a href="http://www.w3.org/TR/CSS2/cascade.html" rel="nofollow noreferrer">W3C</a>:</p> <p><b>6.4.3 Calculating a selector's specificity</b></p> <p>A selector's specificity is calculated as follows:</p> <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.</p> <p>Some examples:</p> <pre><code> * {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */ li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */ h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */ li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */ #x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */ style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */ <HEAD> <STYLE type="text/css"> #x97z { color: red } </STYLE> </HEAD> <BODY> <P ID=x97z style="color: green"> </BODY> </code></pre> <p>In the above example, the color of the P element would be green. The declaration in the "style" attribute will override the one in the STYLE element because of cascading rule 3, since it has a higher specificity.</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