8000 csswg-drafts/css2/cascade.html at b1bfbb0886c4f18769f5165cab8330d93bfc58a2 · w3c/csswg-drafts · GitHub
Skip to content

cascade.html

Latest commit

 

History

History
537 lines (428 loc) · 21.9 KB

cascade.html

File metadata and controls

537 lines (428 loc) · 21.9 KB
<H3>6.4.3 <a name="specificity">Calculating a selector's specificity</a></H3>
<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>count the number of ID attributes in the selector (= b)
<li>count the number of other attributes and pseudo-classes
in the selector (= c)
<li>count the number of element names and pseudo-elements in the selector (= d)
</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>Concatenating the four numbers a-b-c-d (in a number system with a large
base) gives the specificity.
<div class="example"><P style="display:none">Example(s):</P><P>
Some examples:
<PRE>
* {} /* a=0 b=0 c=0 d=0 -&gt; specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -&gt; specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -&gt; specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -&gt; specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -&gt; specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -&gt; specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -&gt; specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -&gt; specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -&gt; specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -&gt; specificity = 1,0,0,0 */
</PRE>
</div>
<div class="html-example">
<pre>
&lt;HEAD&gt;
&lt;STYLE type="text/css"&gt;
#x97z { color: red }
&lt;/STYLE&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;P ID=x97z style="color: green"&gt;
&lt;/BODY&gt;
</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.
</div>
<H3>6.4.4 <a name="preshint">Precedence of non-CSS presentational hints</a></H3>
<P>The UA may choose to honor presentational attributes in an HTML source
document. If so, these attributes are translated to the corresponding
CSS rules with specificity equal to 0, and are treated as if they were
inserted at the start of the author style sheet. They may therefore be
overridden by subsequent style sheet rules. In a transition phase,
this policy will make it easier for stylistic attributes to coexist
with style sheets.
<P>For HTML, any attribute that is not in the following list should be
considered presentational: abbr, accept-charset, accept, accesskey,
action, alt, archive, axis, charset, checked, cite, class, classid,
code, codebase, codetype, colspan, coords, data, datetime, declare,
defer, dir, disabled, enctype, for, headers, href, hreflang,
http-equiv, id, ismap, label, lang, language, longdesc, maxlength,
media, method, multiple, name, nohref, object, onblur, onchange,
onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload,
onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onreset, onselect, onsubmit, onunload, onunload, profile, prompt,
readonly, rel, rev, rowspan, scheme, scope, selected, shape, span,
src, standby, start, style, summary, title, type (except on LI, OL and
UL elements), usemap, value, valuetype, version.
<P>For other languages, all document language-based styling should be
handled in the user agent style sheet.
<div class="example"><P style="display:none">Example(s):</P>
<p>The following user style sheet would override the font weight of
'b' elements in all documents, and the color of 'font'
elements with color attributes in XML documents. It would not affect
the color of any 'font' elements with color attributes in HTML
documents:
<pre>
b { font-weight: normal; }
font[color] { color: orange; }
</pre>
<P>The following, however, would override the color of font elements in all documents:
<pre>
font[color] { color: orange ! important; }
</pre>
</div>
<hr class="navbar">
<div class="navbar">
<p><a href="selector.html">previous</a> &nbsp;
<a href="media.html">next</a> &nbsp;
<a href="cover.html#minitoc">contents</a> &nbsp;
<a href="propidx.html">properties</a> &nbsp;
<a href="indexlist.html">index</a> &nbsp;
</div>
</BODY>
</html>