chrome/test/data/dromaeo/tests/cssquery-ext.html - Issue 269054: Importing dromaeo performance tests to src/chrome/test/data....

Side by Side Diff: chrome/test/data/dromaeo/tests/cssquery-ext.html

Issue 269054: Importing dromaeo performance tests to src/chrome/test/data.... (Closed) Base URL: svn://chrome-svn/chrome/trunk/src/

Patch Set: Created 11 years, 2 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch | Annotate | Revision Log

OLD	NEW
(Empty)
	1 <html>

	2 <head>

	3 <script src="../htmlrunner.js"></script>

	4 <script src="../lib/ext-base.js"></script>

	5 <script src="../lib/ext-core.js"></script>

	6 <script>

	7 window.onload = function(){

	8 startTest("cssquery-ext", '');

	9

	10 // Try to force real results

	11 var ret, tmp;

	12

	13 var html = document.body.innerHTML;

	14 var query = Ext.DomQuery.select;

	15

	16 prep(function(){

	17 var div = document.createElement("div");

	18 div.innerHTML = html;

	19 document.body.appendChild( div );

	20 });

	21

	22 test("Ext - *", function(){

	23 query("*");

	24 });

	25

	26 test("Ext - div:only-child", function(){

	27 query("div:only-child");

	28 });

	29

	30 test("Ext - div:first-child", function(){

	31 query("div:first-child");

	32 });

	33

	34 test("Ext - div:nth-child(even)", function(){

	35 query("div:nth-child(even)");

	36 });

	37

	38 test("Ext - div:nth-child(2n)", function(){

	39 query("div:nth-child(2n)");

	40 });

	41

	42 test("Ext - div:nth-child(odd)", function(){

	43 query("div:nth-child(odd)");

	44 });

	45

	46 test("Ext - div:nth-child(2n+1)", function(){

	47 query("div:nth-child(2n+1)");

	48 });

	49

	50 test("Ext - div:nth-child(n)", function(){

	51 query("div:nth-child(n)");

	52 });

	53

	54 test("Ext - div:last-child", function(){

	55 query("div:last-child");

	56 });

	57

	58 test("Ext - div > div", function(){

	59 query("div > div");

	60 });

	61

	62 test("Ext - div + div", function(){

	63 query("div + div");

	64 });

	65

	66 test("Ext - div ~ div", function(){

	67 query("div ~ div");

	68 });

	69

	70 test("Ext - body", function(){

	71 query("body");

	72 });

	73

	74 test("Ext - body div", function(){

	75 query("body div");

	76 });

	77

	78 test("Ext - div", function(){

	79 query("div");

	80 });

	81

	82 test("Ext - div div", function(){

	83 query("div div");

	84 });

	85

	86 test("Ext - div div div", function(){

	87 query("div div div");

	88 });

	89

	90 test("Ext - div, div, div", function(){

	91 query("div, div, div");

	92 });

	93

	94 test("Ext - div, a, span", function(){

	95 query("div, a, span");

	96 });

	97

	98 test("Ext - .dialog", function(){

	99 query(".dialog");

	100 });

	101

	102 test("Ext - div.dialog", function(){

	103 query("div.dialog");

	104 });

	105

	106 test("Ext - div .dialog", function(){

	107 query("div .dialog");

	108 });

	109

	110 test("Ext - div.character, div.dialog", function(){

	111 query("div.character, div.dialog");

	112 });

	113

	114 test("Ext - #speech5", function(){

	115 query("#speech5");

	116 });

	117

	118 test("Ext - div#speech5", function(){

	119 query("div#speech5");

	120 });

	121

	122 test("Ext - div #speech5", function(){

	123 query("div #speech5");

	124 });

	125

	126 test("Ext - div.scene div.dialog", function(){

	127 query("div.scene div.dialog");

	128 });

	129

	130 test("Ext - div#scene1 div.dialog div", function(){

	131 query("div#scene1 div.dialog div");

	132 });

	133

	134 test("Ext - #scene1 #speech1", function(){

	135 query("#scene1 #speech1");

	136 });

	137

	138 test("Ext - div[class]", function(){

	139 query("div[class]");

	140 });

	141

	142 test("Ext - div[class=dialog]", function(){

	143 query("div[class=dialog]");

	144 });

	145

	146 test("Ext - div[class^=dia]", function(){

	147 query("div[class^=dia]");

	148 });

	149

	150 test("Ext - div[class$=log]", function(){

	151 query("div[class$=log]");

	152 });

	153

	154 test("Ext - div[class*=sce]", function(){

	155 query("div[class*=sce]");

	156 });

	157

	158 test("Ext - div[class\|=dialog]", function(){

	159 query("div[class\|=dialog]");

	160 });

	161

	162 test("Ext - div[class~=dialog]", function(){

	163 query("div[class~=dialog]");

	164 });

	165

	166 endTest();

	167 };

	168 </script>

	169 </head>

	170 <body>

	171 <div class="head">

	172 <p><a href="http://www.w3.org/"><img height=48 alt=W3C src="http://www.w3.org /Icons/w3c_home" width=72></a>

	173

	174 <h1 id="title">Selectors</h1>

	175

	176 <h2>W3C Working Draft 15 December 2005</h2>

	177

	178 <dl>

	179

	180 <dt>This version:

	181

	182 <dd><a href="http://www.w3.org/TR/2005/WD-css3-selectors-20051215">

	183 http://www.w3.org/TR/2005/WD-css3-selectors-20051215</a>

	184

	185 <dt>Latest version:

	186

	187 <dd><a href="http://www.w3.org/TR/css3-selectors">

	188 http://www.w3.org/TR/css3-selectors</a>

	189

	190 <dt>Previous version:

	191

	192 <dd><a href="http://www.w3.org/TR/2001/CR-css3-selectors-20011113">

	193 http://www.w3.org/TR/2001/CR-css3-selectors-20011113</a>

	194

	195 <dt><a name=editors-list></a>Editors:

	196

	197 <dd class="vcard"><span class="fn">Daniel Glazman</span> (Invited Expert)</d d>

	198

	199 <dd class="vcard"><a lang="tr" class="url fn" href="http://www.tantek.com/"> Tantek Çelik</a> (Invited Expert)

	200

	201 <dd class="vcard"><a href="mailto:ian@hixie.ch" class="url fn">Ian Hickson</ a> (<span

	202 class="company"><a href="http://www.google.com/">Google</a></span>)

	203

	204 <dd class="vcard"><span class="fn">Peter Linss</span> (former editor, <span class="company"><a

	205 href="http://www.netscape.com/">Netscape/AOL</a></span>)

	206

	207 <dd class="vcard"><span class="fn">John Williams</span> (former editor, <spa n class="company"><a

	208 href="http://www.quark.com/">Quark, Inc.</a></span>)

	209

	210 </dl>

	211

	212 <p class="copyright"><a

	213 href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">

	214 Copyright</a> © 2005 <a href="http://www.w3.org/"><abbr

	215 title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup>

	216 (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts

	217 Institute of Technology">MIT</abbr></a>, <a

	218 href="http://www.ercim.org/"><acronym title="European Research

	219 Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a

	220 href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C

	221 <a

	222 href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liabili ty</a>,

	223 <a

	224 href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark </a>,

	225 <a

	226 href="http://www.w3.org/Consortium/Legal/copyright-documents">document

	227 use</a> rules apply.

	228

	229 <hr title="Separator for header">

	230

	231 </div>

	232

	233 <h2><a name=abstract></a>Abstract</h2>

	234

	235 <p><em>Selectors</em> are patterns that match against elements in a

	236 tree. Selectors have been optimized for use with HTML and XML, and

	237 are designed to be usable in performance-critical code.</p>

	238

	239 <p><acronym title="Cascading Style Sheets">CSS</acronym> (Cascading

	240 Style Sheets) is a language for describing the rendering of <acronym

	241 title="Hypertext Markup Language">HTML</acronym> and <acronym

	242 title="Extensible Markup Language">XML</acronym> documents on

	243 screen, on paper, in speech, etc. CSS uses Selectors for binding

	244 style properties to elements in the document. This document

	245 describes extensions to the selectors defined in CSS level 2. These

	246 extended selectors will be used by CSS level 3.

	247

	248 <p>Selectors define the following function:</p>

	249

	250 <pre>expression ∗ element → boolean</pre>

	251

	252 <p>That is, given an element and a selector, this specification

	253 defines whether that element matches the selector.</p>

	254

	255 <p>These expressions can also be used, for instance, to select a set

	256 of elements, or a single element from a set of elements, by

	257 evaluating the expression across all the elements in a

	258 subtree. <acronym title="Simple Tree Transformation

	259 Sheets">STTS</acronym> (Simple Tree Transformation Sheets), a

	260 language for transforming XML trees, uses this mechanism. <a href="#refsSTTS"> [STTS]</a></p>

	261

	262 <h2><a name=status></a>Status of this document</h2>

	263

	264 <p><em>This section describes the status of this document at the

	265 time of its publication. Other documents may supersede this

	266 document. A list of current W3C publications and the latest revision

	267 of this technical report can be found in the <a

	268 href="http://www.w3.org/TR/">W3C technical reports index at

	269 http://www.w3.org/TR/.</a></em></p>

	270

	271 <p>This document describes the selectors that already exist in <a

	272 href="#refsCSS1"><abbr title="CSS level 1">CSS1</abbr></a> and <a

	273 href="#refsCSS21"><abbr title="CSS level 2">CSS2</abbr></a>, and

	274 also proposes new selectors for <abbr title="CSS level

	275 3">CSS3</abbr> and other languages that may need them.</p>

	276

	277 <p>The CSS Working Group doesn't expect that all implementations of

	278 CSS3 will have to implement all selectors. Instead, there will

	279 probably be a small number of variants of CSS3, called profiles. For

	280 example, it may be that only a profile for interactive user agents

	281 will include all of the selectors.</p>

	282

	283 <p>This specification is a last call working draft for the the <a

	284 href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>

	285 (<a href="/Style/">Style Activity</a>). This

	286 document is a revision of the <a

	287 href="http://www.w3.org/TR/2001/CR-css3-selectors-20011113/">Candidate

	288 Recommendation dated 2001 November 13</a>, and has incorporated

	289 implementation feedback received in the past few years. It is

	290 expected that this last call will proceed straight to Proposed

	291 Recommendation stage since it is believed that interoperability will

	292 be demonstrable.</p>

	293

	294 <p>All persons are encouraged to review and implement this

	295 specification and return comments to the (<a

	296 href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)

	297 public mailing list <a

	298 href="http://www.w3.org/Mail/Lists.html#www-style">www-style</a>

	299 (see <a href="http://www.w3.org/Mail/Request">instructions</a>). W3C

	300 Members can also send comments directly to the CSS Working

	301 Group.

	302 The deadline for comments is 14 January 2006.</p>

	303

	304 <p>This is still a draft document and may be updated, replaced, or

	305 obsoleted by other documents at any time. It is inappropriate to

	306 cite a W3C Working Draft as other than "work in progress".

	307

	308 <p>This document may be available in <a

	309 href="http://www.w3.org/Style/css3-selectors-updates/translations">translation </a>.

	310 The English version of this specification is the only normative

	311 version.

	312

	313 <div class="subtoc">

	314

	315 <h2 id="test10"><a name=contents>Table of contents</a></h2>

	316

	317 <ul class="toc">

	318 <li class="tocline2"><a href="#context">1. Introduction</a>

	319 <ul>

	320 <li><a href="#dependencies">1.1. Dependencies</a> </li>

	321 <li><a href="#terminology">1.2. Terminology</a> </li>

	322 <li><a href="#changesFromCSS2">1.3. Changes from CSS2</a> </li>

	323 </ul>

	324 <li class="tocline2"><a href="#selectors">2. Selectors</a>

	325 <li class="tocline2"><a href="#casesens">3. Case sensitivity</a>

	326 <li class="tocline2"><a href="#selector-syntax">4. Selector syntax</a>

	327 <li class="tocline2"><a href="#grouping">5. Groups of selectors</a>

	328 <li class="tocline2"><a href="#simple-selectors">6. Simple selectors</a>

	329 <ul class="toc">

	330 <li class="tocline3"><a href="#type-selectors">6.1. Type selectors</a>

	331 <ul class="toc">

	332 <li class="tocline4"><a href="#typenmsp">6.1.1. Type selectors and names paces</a></li>

	333 </ul>

	334 <li class="tocline3"><a href="#universal-selector">6.2. Universal selector </a>

	335 <ul>

	336 <li><a href="#univnmsp">6.2.1. Universal selector and namespaces</a></li >

	337 </ul>

	338 <li class="tocline3"><a href="#attribute-selectors">6.3. Attribute selecto rs</a>

	339 <ul class="toc">

	340 <li class="tocline4"><a href="#attribute-representation">6.3.1. Represen tation of attributes and attributes values</a>

	341 <li><a href="#attribute-substrings">6.3.2. Substring matching attribute selectors</a>

	342 <li class="tocline4"><a href="#attrnmsp">6.3.3. Attribute selectors and namespaces</a>

	343 <li class="tocline4"><a href="#def-values">6.3.4. Default attribute valu es in DTDs</a></li>

	344 </ul>

	345 <li class="tocline3"><a href="#class-html">6.4. Class selectors</a>

	346 <li class="tocline3"><a href="#id-selectors">6.5. ID selectors</a>

	347 <li class="tocline3"><a href="#pseudo-classes">6.6. Pseudo-classes</a>

	348 <ul class="toc">

	349 <li class="tocline4"><a href="#dynamic-pseudos">6.6.1. Dynamic pseudo-cl asses</a>

	350 <li class="tocline4"><a href="#target-pseudo">6.6.2. The :target pseudo- class</a>

	351 <li class="tocline4"><a href="#lang-pseudo">6.6.3. The :lang() pseudo-cl ass</a>

	352 <li class="tocline4"><a href="#UIstates">6.6.4. UI element states pseudo -classes</a>

	353 <li class="tocline4"><a href="#structural-pseudos">6.6.5. Structural pse udo-classes</a>

	354 <ul>

	355 <li><a href="#root-pseudo">:root pseudo-class</a>

	356 <li><a href="#nth-child-pseudo">:nth-child() pseudo-class</a>

	357 <li><a href="#nth-last-child-pseudo">:nth-last-child()</a>

	358 <li><a href="#nth-of-type-pseudo">:nth-of-type() pseudo-class</a>

	359 <li><a href="#nth-last-of-type-pseudo">:nth-last-of-type()</a>

	360 <li><a href="#first-child-pseudo">:first-child pseudo-class</a>

	361 <li><a href="#last-child-pseudo">:last-child pseudo-class</a>

	362 <li><a href="#first-of-type-pseudo">:first-of-type pseudo-class</a>

	363 <li><a href="#last-of-type-pseudo">:last-of-type pseudo-class</a>

	364 <li><a href="#only-child-pseudo">:only-child pseudo-class</a>

	365 <li><a href="#only-of-type-pseudo">:only-of-type pseudo-class</a>

	366 <li><a href="#empty-pseudo">:empty pseudo-class</a></li>

	367 </ul>

	368 <li class="tocline4"><a href="#negation">6.6.7. The negation pseudo-clas s</a></li>

	369 </ul>

	370 </li>

	371 </ul>

	372 <li><a href="#pseudo-elements">7. Pseudo-elements</a>

	373 <ul>

	374 <li><a href="#first-line">7.1. The ::first-line pseudo-element</a>

	375 <li><a href="#first-letter">7.2. The ::first-letter pseudo-element</a>

	376 <li><a href="#UIfragments">7.3. The ::selection pseudo-element</a>

	377 <li><a href="#gen-content">7.4. The ::before and ::after pseudo-elements</ a></li>

	378 </ul>

	379 <li class="tocline2"><a href="#combinators">8. Combinators</a>

	380 <ul class="toc">

	381 <li class="tocline3"><a href="#descendant-combinators">8.1. Descendant com binators</a>

	382 <li class="tocline3"><a href="#child-combinators">8.2. Child combinators</ a>

	383 <li class="tocline3"><a href="#sibling-combinators">8.3. Sibling combinato rs</a>

	384 <ul class="toc">

	385 <li class="tocline4"><a href="#adjacent-sibling-combinators">8.3.1. Adja cent sibling combinator</a>

	386 <li class="tocline4"><a href="#general-sibling-combinators">8.3.2. Gener al sibling combinator</a></li>

	387 </ul>

	388 </li>

	389 </ul>

	390 <li class="tocline2"><a href="#specificity">9. Calculating a selector's spec ificity</a>

	391 <li class="tocline2"><a href="#w3cselgrammar">10. The grammar of Selectors</ a>

	392 <ul class="toc">

	393 <li class="tocline3"><a href="#grammar">10.1. Grammar</a>

	394 <li class="tocline3"><a href="#lex">10.2. Lexical scanner</a></li>

	395 </ul>

	396 <li class="tocline2"><a href="#downlevel">11. Namespaces and down-level clie nts</a>

	397 <li class="tocline2"><a href="#profiling">12. Profiles</a>

	398 <li><a href="#Conformance">13. Conformance and requirements</a>

	399 <li><a href="#Tests">14. Tests</a>

	400 <li><a href="#ACKS">15. Acknowledgements</a>

	401 <li class="tocline2"><a href="#references">16. References</a>

	402 </ul>

	403

	404 </div>

	405

	406 <h2><a name=context>1. Introduction</a></h2>

	407

	408 <h3><a name=dependencies></a>1.1. Dependencies</h3>

	409

	410 <p>Some features of this specification are specific to CSS, or have

	411 particular limitations or rules specific to CSS. In this

	412 specification, these have been described in terms of CSS2.1. <a

	413 href="#refsCSS21">[CSS21]</a></p>

	414

	415 <h3><a name=terminology></a>1.2. Terminology</h3>

	416

	417 <p>All of the text of this specification is normative except

	418 examples, notes, and sections explicitly marked as

	419 non-normative.</p>

	420

	421 <h3><a name=changesFromCSS2></a>1.3. Changes from CSS2</h3>

	422

	423 <p><em>This section is non-normative.</em></p>

	424

	425 <p>The main differences between the selectors in CSS2 and those in

	426 Selectors are:

	427

	428 <ul>

	429

	430 <li>the list of basic definitions (selector, group of selectors,

	431 simple selector, etc.) has been changed; in particular, what was

	432 referred to in CSS2 as a simple selector is now called a sequence

	433 of simple selectors, and the term "simple selector" is now used for

	434 the components of this sequence</li>

	435

	436 <li>an optional namespace component is now allowed in type element

	437 selectors, the universal selector and attribute selectors</li>

	438

	439 <li>a <a href="#general-sibling-combinators">new combinator</a> has been intr oduced</li>

	440

	441 <li>new simple selectors including substring matching attribute

	442 selectors, and new pseudo-classes</li>

	443

	444 <li>new pseudo-elements, and introduction of the "::" convention

	445 for pseudo-elements</li>

	446

	447 <li>the grammar has been rewritten</li>

	448

	449 <li>profiles to be added to specifications integrating Selectors

	450 and defining the set of selectors which is actually supported by

	451 each specification</li>

	452

	453 <li>Selectors are now a CSS3 Module and an independent

	454 specification; other specifications can now refer to this document

	455 independently of CSS</li>

	456

	457 <li>the specification now has its own test suite</li>

	458

	459 </ul>

	460

	461 <h2><a name=selectors></a>2. Selectors</h2>

	462

	463 <p><em>This section is non-normative, as it merely summarizes the

	464 following sections.</em></p>

	465

	466 <p>A Selector represents a structure. This structure can be used as a

	467 condition (e.g. in a CSS rule) that determines which elements a

	468 selector matches in the document tree, or as a flat description of the

	469 HTML or XML fragment corresponding to that structure.</p>

	470

	471 <p>Selectors may range from simple element names to rich contextual

	472 representations.</p>

	473

	474 <p>The following table summarizes the Selector syntax:</p>

	475

	476 <table class="selectorsReview">

	477 <thead>

	478 <tr>

	479 <th class="pattern">Pattern</th>

	480 <th class="meaning">Meaning</th>

	481 <th class="described">Described in section</th>

	482 <th class="origin">First defined in CSS level</th></tr>

	483 <tbody>

	484 <tr>

	485 <td class="pattern">*</td>

	486 <td class="meaning">any element</td>

	487 <td class="described"><a

	488 href="#universal-selector">Universal

	489 selector</a></td>

	490 <td class="origin">2</td></tr>

	491 <tr>

	492 <td class="pattern">E</td>

	493 <td class="meaning">an element of type E</td>

	494 <td class="described"><a

	495 href="#type-selectors">Type selector</a></td>

	496 <td class="origin">1</td></tr>

	497 <tr>

	498 <td class="pattern">E[foo]</td>

	499 <td class="meaning">an E element with a "foo" attribute</td>

	500 <td class="described"><a

	501 href="#attribute-selectors">Attribute

	502 selectors</a></td>

	503 <td class="origin">2</td></tr>

	504 <tr>

	505 <td class="pattern">E[foo="bar"]</td>

	506 <td class="meaning">an E element whose "foo" attribute value is exactly

	507 equal to "bar"</td>

	508 <td class="described"><a

	509 href="#attribute-selectors">Attribute

	510 selectors</a></td>

	511 <td class="origin">2</td></tr>

	512 <tr>

	513 <td class="pattern">E[foo~="bar"]</td>

	514 <td class="meaning">an E element whose "foo" attribute value is a list of

	515 space-separated values, one of which is exactly equal to "bar"</td>

	516 <td class="described"><a

	517 href="#attribute-selectors">Attribute

	518 selectors</a></td>

	519 <td class="origin">2</td></tr>

	520 <tr>

	521 <td class="pattern">E[foo^="bar"]</td>

	522 <td class="meaning">an E element whose "foo" attribute value begins exactly

	523 with the string "bar"</td>

	524 <td class="described"><a

	525 href="#attribute-selectors">Attribute

	526 selectors</a></td>

	527 <td class="origin">3</td></tr>

	528 <tr>

	529 <td class="pattern">E[foo$="bar"]</td>

	530 <td class="meaning">an E element whose "foo" attribute value ends exactly

	531 with the string "bar"</td>

	532 <td class="described"><a

	533 href="#attribute-selectors">Attribute

	534 selectors</a></td>

	535 <td class="origin">3</td></tr>

	536 <tr>

	537 <td class="pattern">E[foo*="bar"]</td>

	538 <td class="meaning">an E element whose "foo" attribute value contains the

	539 substring "bar"</td>

	540 <td class="described"><a

	541 href="#attribute-selectors">Attribute

	542 selectors</a></td>

	543 <td class="origin">3</td></tr>

	544 <tr>

	545 <td class="pattern">E[hreflang\|="en"]</td>

	546 <td class="meaning">an E element whose "hreflang" attribute has a hyphen-sep arated

	547 list of values beginning (from the left) with "en"</td>

	548 <td class="described"><a

	549 href="#attribute-selectors">Attribute

	550 selectors</a></td>

	551 <td class="origin">2</td></tr>

	552 <tr>

	553 <td class="pattern">E:root</td>

	554 <td class="meaning">an E element, root of the document</td>

	555 <td class="described"><a

	556 href="#structural-pseudos">Structural

	557 pseudo-classes</a></td>

	558 <td class="origin">3</td></tr>

	559 <tr>

	560 <td class="pattern">E:nth-child(n)</td>

	561 <td class="meaning">an E element, the n-th child of its parent</td>

	562 <td class="described"><a

	563 href="#structural-pseudos">Structural

	564 pseudo-classes</a></td>

	565 <td class="origin">3</td></tr>

	566 <tr>

	567 <td class="pattern">E:nth-last-child(n)</td>

	568 <td class="meaning">an E element, the n-th child of its parent, counting

	569 from the last one</td>

	570 <td class="described"><a

	571 href="#structural-pseudos">Structural

	572 pseudo-classes</a></td>

	573 <td class="origin">3</td></tr>

	574 <tr>

	575 <td class="pattern">E:nth-of-type(n)</td>

	576 <td class="meaning">an E element, the n-th sibling of its type</td>

	577 <td class="described"><a

	578 href="#structural-pseudos">Structural

	579 pseudo-classes</a></td>

	580 <td class="origin">3</td></tr>

	581 <tr>

	582 <td class="pattern">E:nth-last-of-type(n)</td>

	583 <td class="meaning">an E element, the n-th sibling of its type, counting

	584 from the last one</td>

	585 <td class="described"><a

	586 href="#structural-pseudos">Structural

	587 pseudo-classes</a></td>

	588 <td class="origin">3</td></tr>

	589 <tr>

	590 <td class="pattern">E:first-child</td>

	591 <td class="meaning">an E element, first child of its parent</td>

	592 <td class="described"><a

	593 href="#structural-pseudos">Structural

	594 pseudo-classes</a></td>

	595 <td class="origin">2</td></tr>

	596 <tr>

	597 <td class="pattern">E:last-child</td>

	598 <td class="meaning">an E element, last child of its parent</td>

	599 <td class="described"><a

	600 href="#structural-pseudos">Structural

	601 pseudo-classes</a></td>

	602 <td class="origin">3</td></tr>

	603 <tr>

	604 <td class="pattern">E:first-of-type</td>

	605 <td class="meaning">an E element, first sibling of its type</td>

	606 <td class="described"><a

	607 href="#structural-pseudos">Structural

	608 pseudo-classes</a></td>

	609 <td class="origin">3</td></tr>

	610 <tr>

	611 <td class="pattern">E:last-of-type</td>

	612 <td class="meaning">an E element, last sibling of its type</td>

	613 <td class="described"><a

	614 href="#structural-pseudos">Structural

	615 pseudo-classes</a></td>

	616 <td class="origin">3</td></tr>

	617 <tr>

	618 <td class="pattern">E:only-child</td>

	619 <td class="meaning">an E element, only child of its parent</td>

	620 <td class="described"><a

	621 href="#structural-pseudos">Structural

	622 pseudo-classes</a></td>

	623 <td class="origin">3</td></tr>

	624 <tr>

	625 <td class="pattern">E:only-of-type</td>

	626 <td class="meaning">an E element, only sibling of its type</td>

	627 <td class="described"><a

	628 href="#structural-pseudos">Structural

	629 pseudo-classes</a></td>

	630 <td class="origin">3</td></tr>

	631 <tr>

	632 <td class="pattern">E:empty</td>

	633 <td class="meaning">an E element that has no children (including text

	634 nodes)</td>

	635 <td class="described"><a

	636 href="#structural-pseudos">Structural

	637 pseudo-classes</a></td>

	638 <td class="origin">3</td></tr>

	639 <tr>

	640 <td class="pattern">E:link<br>E:visited</td>

	641 <td class="meaning">an E element being the source anchor of a hyperlink of

	642 which the target is not yet visited (:link) or already visited

	643 (:visited)</td>

	644 <td class="described"><a

	645 href="#link">The link

	646 pseudo-classes</a></td>

	647 <td class="origin">1</td></tr>

	648 <tr>

	649 <td class="pattern">E:active<br>E:hover<br>E:focus</td>

	650 <td class="meaning">an E element during certain user actions</td>

	651 <td class="described"><a

	652 href="#useraction-pseudos">The user

	653 action pseudo-classes</a></td>

	654 <td class="origin">1 and 2</td></tr>

	655 <tr>

	656 <td class="pattern">E:target</td>

	657 <td class="meaning">an E element being the target of the referring URI</td>

	658 <td class="described"><a

	659 href="#target-pseudo">The target

	660 pseudo-class</a></td>

	661 <td class="origin">3</td></tr>

	662 <tr>

	663 <td class="pattern">E:lang(fr)</td>

	664 <td class="meaning">an element of type E in language "fr" (the document

	665 language specifies how language is determined)</td>

	666 <td class="described"><a

	667 href="#lang-pseudo">The :lang()

	668 pseudo-class</a></td>

	669 <td class="origin">2</td></tr>

	670 <tr>

	671 <td class="pattern">E:enabled<br>E:disabled</td>

	672 <td class="meaning">a user interface element E which is enabled or

	673 disabled</td>

	674 <td class="described"><a

	675 href="#UIstates">The UI element states

	676 pseudo-classes</a></td>

	677 <td class="origin">3</td></tr>

	678 <tr>

	679 <td class="pattern">E:checked<!--<br>E:indeterminate--></td>

	680 <td class="meaning">a user interface element E which is checked<!-- or in an

	681 indeterminate state--> (for instance a radio-button or checkbox)</td>

	682 <td class="described"><a

	683 href="#UIstates">The UI element states

	684 pseudo-classes</a></td>

	685 <td class="origin">3</td></tr>

	686 <tr>

	687 <td class="pattern">E::first-line</td>

	688 <td class="meaning">the first formatted line of an E element</td>

	689 <td class="described"><a

	690 href="#first-line">The ::first-line

	691 pseudo-element</a></td>

	692 <td class="origin">1</td></tr>

	693 <tr>

	694 <td class="pattern">E::first-letter</td>

	695 <td class="meaning">the first formatted letter of an E element</td>

	696 <td class="described"><a

	697 href="#first-letter">The ::first-letter

	698 pseudo-element</a></td>

	699 <td class="origin">1</td></tr>

	700 <tr>

	701 <td class="pattern">E::selection</td>

	702 <td class="meaning">the portion of an E element that is currently

	703 selected/highlighted by the user</td>

	704 <td class="described"><a

	705 href="#UIfragments">The UI element

	706 fragments pseudo-elements</a></td>

	707 <td class="origin">3</td></tr>

	708 <tr>

	709 <td class="pattern">E::before</td>

	710 <td class="meaning">generated content before an E element</td>

	711 <td class="described"><a

	712 href="#gen-content">The ::before

	713 pseudo-element</a></td>

	714 <td class="origin">2</td></tr>

	715 <tr>

	716 <td class="pattern">E::after</td>

	717 <td class="meaning">generated content after an E element</td>

	718 <td class="described"><a

	719 href="#gen-content">The ::after

	720 pseudo-element</a></td>

	721 <td class="origin">2</td></tr>

	722 <tr>

	723 <td class="pattern">E.warning</td>

	724 <td class="meaning">an E element whose class is

	725 "warning" (the document language specifies how class is determined).</td>

	726 <td class="described"><a

	727 href="#class-html">Class

	728 selectors</a></td>

	729 <td class="origin">1</td></tr>

	730 <tr>

	731 <td class="pattern">E#myid</td>

	732 <td class="meaning">an E element with ID equal to "myid".</td>

	733 <td class="described"><a

	734 href="#id-selectors">ID

	735 selectors</a></td>

	736 <td class="origin">1</td></tr>

	737 <tr>

	738 <td class="pattern">E:not(s)</td>

	739 <td class="meaning">an E element that does not match simple selector s</td>

	740 <td class="described"><a

	741 href="#negation">Negation

	742 pseudo-class</a></td>

	743 <td class="origin">3</td></tr>

	744 <tr>

	745 <td class="pattern">E F</td>

	746 <td class="meaning">an F element descendant of an E element</td>

	747 <td class="described"><a

	748 href="#descendant-combinators">Descendant

	749 combinator</a></td>

	750 <td class="origin">1</td></tr>

	751 <tr>

	752 <td class="pattern">E > F</td>

	753 <td class="meaning">an F element child of an E element</td>

	754 <td class="described"><a

	755 href="#child-combinators">Child

	756 combinator</a></td>

	757 <td class="origin">2</td></tr>

	758 <tr>

	759 <td class="pattern">E + F</td>

	760 <td class="meaning">an F element immediately preceded by an E element</td>

	761 <td class="described"><a

	762 href="#adjacent-sibling-combinators">Adjacent sibling combinator</a></td>

	763 <td class="origin">2</td></tr>

	764 <tr>

	765 <td class="pattern">E ~ F</td>

	766 <td class="meaning">an F element preceded by an E element</td>

	767 <td class="described"><a

	768 href="#general-sibling-combinators">General sibling combinator</a></td>

	769 <td class="origin">3</td></tr></tbody></table>

	770

	771 <p>The meaning of each selector is derived from the table above by

	772 prepending "matches" to the contents of each cell in the "Meaning"

	773 column.</p>

	774

	775 <h2><a name=casesens>3. Case sensitivity</a></h2>

	776

	777 <p>The case sensitivity of document language element names, attribute

	778 names, and attribute values in selectors depends on the document

	779 language. For example, in HTML, element names are case-insensitive,

	780 but in XML, they are case-sensitive.</p>

	781

	782 <h2><a name=selector-syntax>4. Selector syntax</a></h2>

	783

	784 <p>A <dfn><a name=selector>selector</a></dfn> is a chain of one

	785 or more <a href="#sequence">sequences of simple selectors</a>

	786 separated by <a href="#combinators">combinators</a>.</p>

	787

	788 <p>A <dfn><a name=sequence>sequence of simple selectors</a></dfn>

	789 is a chain of <a href="#simple-selectors-dfn">simple selectors</a>

	790 that are not separated by a <a href="#combinators">combinator</a>. It

	791 always begins with a <a href="#type-selectors">type selector</a> or a

	792 <a href="#universal-selector">universal selector</a>. No other type

	793 selector or universal selector is allowed in the sequence.</p>

	794

	795 <p>A <dfn><a name=simple-selectors-dfn></a><a

	796 href="#simple-selectors">simple selector</a></dfn> is either a <a

	797 href="#type-selectors">type selector</a>, <a

	798 href="#universal-selector">universal selector</a>, <a

	799 href="#attribute-selectors">attribute selector</a>, <a

	800 href="#class-html">class selector</a>, <a

	801 href="#id-selectors">ID selector</a>, <a

	802 href="#content-selectors">content selector</a>, or <a

	803 href="#pseudo-classes">pseudo-class</a>. One <a

	804 href="#pseudo-elements">pseudo-element</a> may be appended to the last

	805 sequence of simple selectors.</p>

	806

	807 <p><dfn>Combinators</dfn> are: white space, "greater-than

	808 sign" (U+003E, <code>></code>), "plus sign" (U+002B,

	809 <code>+</code>) and "tilde" (U+007E, <code>~</code>). White

	810 space may appear between a combinator and the simple selectors around

	811 it. <a name=whitespace></a>Only the characters "space" (U+0020), "tab"

	812 (U+0009), "line feed" (U+000A), "carriage return" (U+000D), and "form

	813 feed" (U+000C) can occur in white space. Other space-like characters,

	814 such as "em-space" (U+2003) and "ideographic space" (U+3000), are

	815 never part of white space.</p>

	816

	817 <p>The elements of a document tree that are represented by a selector

	818 are the <dfn><a name=subject></a>subjects of the selector</dfn>. A

	819 selector consisting of a single sequence of simple selectors

	820 represents any element satisfying its requirements. Prepending another

	821 sequence of simple selectors and a combinator to a sequence imposes

	822 additional matching constraints, so the subjects of a selector are

	823 always a subset of the elements represented by the last sequence of

	824 simple selectors.</p>

	825

	826 <p>An empty selector, containing no sequence of simple selectors and

	827 no pseudo-element, is an <a href="#Conformance">invalid

	828 selector</a>.</p>

	829

	830 <h2><a name=grouping>5. Groups of selectors</a></h2>

	831

	832 <p>When several selectors share the same declarations, they may be

	833 grouped into a comma-separated list. (A comma is U+002C.)</p>

	834

	835 <div class="example">

	836 <p>CSS examples:</p>

	837 <p>In this example, we condense three rules with identical

	838 declarations into one. Thus,</p>

	839 <pre>h1 { font-family: sans-serif }

	840 h2 { font-family: sans-serif }

	841 h3 { font-family: sans-serif }</pre>

	842 <p>is equivalent to:</p>

	843 <pre>h1, h2, h3 { font-family: sans-serif }</pre>

	844 </div>

	845

	846 <p><strong>Warning</strong>: the equivalence is true in this example

	847 because all the selectors are valid selectors. If just one of these

	848 selectors were invalid, the entire group of selectors would be

	849 invalid. This would invalidate the rule for all three heading

	850 elements, whereas in the former case only one of the three individual

	851 heading rules would be invalidated.</p>

	852

	853

	854 <h2><a name=simple-selectors>6. Simple selectors</a></h2>

	855

	856 <h3><a name=type-selectors>6.1. Type selector</a></h3>

	857

	858 <p>A <dfn>type selector</dfn> is the name of a document language

	859 element type. A type selector represents an instance of the element

	860 type in the document tree.</p>

	861

	862 <div class="example">

	863 <p>Example:</p>

	864 <p>The following selector represents an <code>h1</code> element in the document tree:</p>

	865 <pre>h1</pre>

	866 </div>

	867

	868

	869 <h4><a name=typenmsp>6.1.1. Type selectors and namespaces</a></h4>

	870

	871 <p>Type selectors allow an optional namespace (<a

	872 href="#refsXMLNAMES">[XMLNAMES]</a>) component. A namespace prefix

	873 that has been previously declared may be prepended to the element name

	874 separated by the namespace separator "vertical bar"

	875 (U+007C, <code>\|</code>).</p>

	876

	877 <p>The namespace component may be left empty to indicate that the

	878 selector is only to represent elements with no declared namespace.</p>

	879

	880 <p>An asterisk may be used for the namespace prefix, indicating that

	881 the selector represents elements in any namespace (including elements

	882 with no namespace).</p>

	883

	884 <p>Element type selectors that have no namespace component (no

	885 namespace separator), represent elements without regard to the

	886 element's namespace (equivalent to "<code>*\|</code>") unless a default

	887 namespace has been declared. If a default namespace has been declared,

	888 the selector will represent only elements in the default

	889 namespace.</p>

	890

	891 <p>A type selector containing a namespace prefix that has not been

	892 previously declared is an <a href="#Conformance">invalid</a> selector.

	893 The mechanism for declaring a namespace prefix is left up to the

	894 language implementing Selectors. In CSS, such a mechanism is defined

	895 in the General Syntax module.</p>

	896

	897 <p>In a namespace-aware client, element type selectors will only match

	898 against the <a

	899 href="http://www.w3.org/TR/REC-xml-names/#NT-LocalPart">local part</a>

	900 of the element's <a

	901 href="http://www.w3.org/TR/REC-xml-names/#ns-qualnames">qualified

	902 name</a>. See <a href="#downlevel">below</a> for notes about matching

	903 behaviors in down-level clients.</p>

	904

	905 <p>In summary:</p>

	906

	907 <dl>

	908 <dt><code>ns\|E</code></dt>

	909 <dd>elements with name E in namespace ns</dd>

	910 <dt><code>*\|E</code></dt>

	911 <dd>elements with name E in any namespace, including those without any

	912 declared namespace</dd>

	913 <dt><code>\|E</code></dt>

	914 <dd>elements with name E without any declared namespace</dd>

	915 <dt><code>E</code></dt>

	916 <dd>if no default namespace has been specified, this is equivalent to *\|E.

	917 Otherwise it is equivalent to ns\|E where ns is the default namespace.</dd>

	918 </dl>

	919

	920 <div class="example">

	921 <p>CSS examples:</p>

	922

	923 <pre>@namespace foo url(http://www.example.com);

	924 foo\|h1 { color: blue }

	925 foo\|* { color: yellow }

	926 \|h1 { color: red }

	927 *\|h1 { color: green }

	928 h1 { color: green }</pre>

	929

	930 <p>The first rule will match only <code>h1</code> elements in the

	931 "http://www.example.com" namespace.</p>

	932

	933 <p>The second rule will match all elements in the

	934 "http://www.example.com" namespace.</p>

	935

	936 <p>The third rule will match only <code>h1</code> elements without

	937 any declared namespace.</p>

	938

	939 <p>The fourth rule will match <code>h1</code> elements in any

	940 namespace (including those without any declared namespace).</p>

	941

	942 <p>The last rule is equivalent to the fourth rule because no default

	943 namespace has been defined.</p>

	944

	945 </div>

	946

	947 <h3><a name=universal-selector>6.2. Universal selector</a> </h3>

	948

	949 <p>The <dfn>universal selector</dfn>, written "asterisk"

	950 (<code>*</code>), represents the qualified name of any element

	951 type. It represents any single element in the document tree in any

	952 namespace (including those without any declared namespace) if no

	953 default namespace has been specified. If a default namespace has been

	954 specified, see <a href="#univnmsp">Universal selector and

	955 Namespaces</a> below.</p>

	956

	957 <p>If the universal selector is not the only component of a sequence

	958 of simple selectors, the <code>*</code> may be omitted.</p>

	959

	960 <div class="example">

	961 <p>Examples:</p>

	962 <ul>

	963 <li><code>*[hreflang\|=en]</code> and <code>[hreflang\|=en]</code> are equivalen t,</li>

	964 <li><code>*.warning</code> and <code>.warning</code> are equivalent,</li>

	965 <li><code>*#myid</code> and <code>#myid</code> are equivalent.</li>

	966 </ul>

	967 </div>

	968

	969 <p class="note"><strong>Note:</strong> it is recommended that the

	970 <code>*</code>, representing the universal selector, not be

	971 omitted.</p>

	972

	973 <h4><a name=univnmsp>6.2.1. Universal selector and namespaces</a></h4>

	974

	975 <p>The universal selector allows an optional namespace component. It

	976 is used as follows:</p>

	977

	978 <dl>

	979 <dt><code>ns\|*</code></dt>

	980 <dd>all elements in namespace ns</dd>

	981 <dt><code>\|</code></dt>

	982 <dd>all elements</dd>

	983 <dt><code>\|*</code></dt>

	984 <dd>all elements without any declared namespace</dd>

	985 <dt><code>*</code></dt>

	986 <dd>if no default namespace has been specified, this is equivalent to \|.

	987 Otherwise it is equivalent to ns\|* where ns is the default namespace.</dd>

	988 </dl>

	989

	990 <p>A universal selector containing a namespace prefix that has not

	991 been previously declared is an <a href="#Conformance">invalid</a>

	992 selector. The mechanism for declaring a namespace prefix is left up

	993 to the language implementing Selectors. In CSS, such a mechanism is

	994 defined in the General Syntax module.</p>

	995

	996

	997 <h3><a name=attribute-selectors>6.3. Attribute selectors</a></h3>

	998

	999 <p>Selectors allow the representation of an element's attributes. When

	1000 a selector is used as an expression to match against an element,

	1001 attribute selectors must be considered to match an element if that

	1002 element has an attribute that matches the attribute represented by the

	1003 attribute selector.</p>

	1004

	1005 <h4><a name=attribute-representation>6.3.1. Attribute presence and values

	1006 selectors</a></h4>

	1007

	1008 <p>CSS2 introduced four attribute selectors:</p>

	1009

	1010 <dl>

	1011 <dt><code>[att]</code>

	1012 <dd>Represents an element with the <code>att</code> attribute, whatever the va lue of

	1013 the attribute.</dd>

	1014 <dt><code>[att=val]</code></dt>

	1015 <dd>Represents an element with the <code>att</code> attribute whose value is e xactly

	1016 "val".</dd>

	1017 <dt><code>[att~=val]</code></dt>

	1018 <dd>Represents an element with the <code>att</code> attribute whose value is a <a

	1019 href="#whitespace">whitespace</a>-separated list of words, one of

	1020 which is exactly "val". If "val" contains whitespace, it will never

	1021 represent anything (since the words are <em>separated</em> by

	1022 spaces).</dd>

	1023 <dt><code>[att\|=val]</code>

	1024 <dd>Represents an element with the <code>att</code> attribute, its value eithe r

	1025 being exactly "val" or beginning with "val" immediately followed by

	1026 "-" (U+002D). This is primarily intended to allow language subcode

	1027 matches (e.g., the <code>hreflang</code> attribute on the

	1028 <code>link</code> element in HTML) as described in RFC 3066 (<a

	1029 href="#refsRFC3066">[RFC3066]</a>). For <code>lang</code> (or

	1030 <code>xml:lang</code>) language subcode matching, please see <a

	1031 href="#lang-pseudo">the <code>:lang</code> pseudo-class</a>.</dd>

	1032 </dl>

	1033

	1034 <p>Attribute values must be identifiers or strings. The

	1035 case-sensitivity of attribute names and values in selectors depends on

	1036 the document language.</p>

	1037

	1038 <div class="example">

	1039

	1040 <p>Examples:</p>

	1041

	1042 <p>The following attribute selector represents an <code>h1</code>

	1043 element that carries the <code>title</code> attribute, whatever its

	1044 value:</p>

	1045

	1046 <pre>h1[title]</pre>

	1047

	1048 <p>In the following example, the selector represents a

	1049 <code>span</code> element whose <code>class</code> attribute has

	1050 exactly the value "example":</p>

	1051

	1052 <pre>span[class="example"]</pre>

	1053

	1054 <p>Multiple attribute selectors can be used to represent several

	1055 attributes of an element, or several conditions on the same

	1056 attribute. Here, the selector represents a <code>span</code> element

	1057 whose <code>hello</code> attribute has exactly the value "Cleveland"

	1058 and whose <code>goodbye</code> attribute has exactly the value

	1059 "Columbus":</p>

	1060

	1061 <pre>span[hello="Cleveland"][goodbye="Columbus"]</pre>

	1062

	1063 <p>The following selectors illustrate the differences between "="

	1064 and "~=". The first selector will represent, for example, the value

	1065 "copyright copyleft copyeditor" on a <code>rel</code> attribute. The

	1066 second selector will only represent an <code>a</code> element with

	1067 an <code>href</code> attribute having the exact value

	1068 "http://www.w3.org/".</p>

	1069

	1070 <pre>a[rel~="copyright"]

	1071 a[href="http://www.w3.org/"]</pre>

	1072

	1073 <p>The following selector represents a <code>link</code> element

	1074 whose <code>hreflang</code> attribute is exactly "fr".</p>

	1075

	1076 <pre>link[hreflang=fr]</pre>

	1077

	1078 <p>The following selector represents a <code>link</code> element for

	1079 which the values of the <code>hreflang</code> attribute begins with

	1080 "en", including "en", "en-US", and "en-cockney":</p>

	1081

	1082 <pre>link[hreflang\|="en"]</pre>

	1083

	1084 <p>Similarly, the following selectors represents a

	1085 <code>DIALOGUE</code> element whenever it has one of two different

	1086 values for an attribute <code>character</code>:</p>

	1087

	1088 <pre>DIALOGUE[character=romeo]

	1089 DIALOGUE[character=juliet]</pre>

	1090

	1091 </div>

	1092

	1093 <h4><a name=attribute-substrings></a>6.3.2. Substring matching attribute

	1094 selectors</h4>

	1095

	1096 <p>Three additional attribute selectors are provided for matching

	1097 substrings in the value of an attribute:</p>

	1098

	1099 <dl>

	1100 <dt><code>[att^=val]</code></dt>

	1101 <dd>Represents an element with the <code>att</code> attribute whose value begi ns

	1102 with the prefix "val".</dd>

	1103 <dt><code>[att$=val]</code>

	1104 <dd>Represents an element with the <code>att</code> attribute whose value ends with

	1105 the suffix "val".</dd>

	1106 <dt><code>[att*=val]</code>

	1107 <dd>Represents an element with the <code>att</code> attribute whose value cont ains

	1108 at least one instance of the substring "val".</dd>

	1109 </dl>

	1110

	1111 <p>Attribute values must be identifiers or strings. The

	1112 case-sensitivity of attribute names in selectors depends on the

	1113 document language.</p>

	1114

	1115 <div class="example">

	1116 <p>Examples:</p>

	1117 <p>The following selector represents an HTML <code>object</code>, referencing a n

	1118 image:</p>

	1119 <pre>object[type^="image/"]</pre>

	1120 <p>The following selector represents an HTML anchor <code>a</code> with an

	1121 <code>href</code> attribute whose value ends with ".html".</p>

	1122 <pre>a[href$=".html"]</pre>

	1123 <p>The following selector represents an HTML paragraph with a <code>title</code >

	1124 attribute whose value contains the substring "hello"</p>

	1125 <pre>p[title*="hello"]</pre>

	1126 </div>

	1127

	1128 <h4><a name=attrnmsp>6.3.3. Attribute selectors and namespaces</a></h4>

	1129

	1130 <p>Attribute selectors allow an optional namespace component to the

	1131 attribute name. A namespace prefix that has been previously declared

	1132 may be prepended to the attribute name separated by the namespace

	1133 separator "vertical bar" (<code>\|</code>). In keeping with

	1134 the Namespaces in the XML recommendation, default namespaces do not

	1135 apply to attributes, therefore attribute selectors without a namespace

	1136 component apply only to attributes that have no declared namespace

	1137 (equivalent to "<code>\|attr</code>"). An asterisk may be used for the

	1138 namespace prefix indicating that the selector is to match all

	1139 attribute names without regard to the attribute's namespace.

	1140

	1141 <p>An attribute selector with an attribute name containing a namespace

	1142 prefix that has not been previously declared is an <a

	1143 href="#Conformance">invalid</a> selector. The mechanism for declaring

	1144 a namespace prefix is left up to the language implementing Selectors.

	1145 In CSS, such a mechanism is defined in the General Syntax module.

	1146

	1147 <div class="example">

	1148 <p>CSS examples:</p>

	1149 <pre>@namespace foo "http://www.example.com";

	1150 [foo\|att=val] { color: blue }

	1151 [*\|att] { color: yellow }

	1152 [\|att] { color: green }

	1153 [att] { color: green }</pre>

	1154

	1155 <p>The first rule will match only elements with the attribute

	1156 <code>att</code> in the "http://www.example.com" namespace with the

	1157 value "val".</p>

	1158

	1159 <p>The second rule will match only elements with the attribute

	1160 <code>att</code> regardless of the namespace of the attribute

	1161 (including no declared namespace).</p>

	1162

	1163 <p>The last two rules are equivalent and will match only elements

	1164 with the attribute <code>att</code> where the attribute is not

	1165 declared to be in a namespace.</p>

	1166

	1167 </div>

	1168

	1169 <h4><a name=def-values>6.3.4. Default attribute values in DTDs</a></h4>

	1170

	1171 <p>Attribute selectors represent explicitly set attribute values in

	1172 the document tree. Default attribute values may be defined in a DTD or

	1173 elsewhere, but cannot always be selected by attribute

	1174 selectors. Selectors should be designed so that they work even if the

	1175 default values are not included in the document tree.</p>

	1176

	1177 <p>More precisely, a UA is <em>not</em> required to read an "external

	1178 subset" of the DTD but <em>is</em> required to look for default

	1179 attribute values in the document's "internal subset." (See <a

	1180 href="#refsXML10">[XML10]</a> for definitions of these subsets.)</p>

	1181

	1182 <p>A UA that recognizes an XML namespace <a

	1183 href="#refsXMLNAMES">[XMLNAMES]</a> is not required to use its

	1184 knowledge of that namespace to treat default attribute values as if

	1185 they were present in the document. (For example, an XHTML UA is not

	1186 required to use its built-in knowledge of the XHTML DTD.)</p>

	1187

	1188 <p class="note"><strong>Note:</strong> Typically, implementations

	1189 choose to ignore external subsets.</p>

	1190

	1191 <div class="example">

	1192 <p>Example:</p>

	1193

	1194 <p>Consider an element EXAMPLE with an attribute "notation" that has a

	1195 default value of "decimal". The DTD fragment might be</p>

	1196

	1197 <pre class="dtd-example"><!ATTLIST EXAMPLE notation (decimal,octal) "decimal" ></pre>

	1198

	1199 <p>If the style sheet contains the rules</p>

	1200

	1201 <pre>EXAMPLE[notation=decimal] { /... default property settings .../ }

	1202 EXAMPLE[notation=octal] { /... other settings.../ }</pre>

	1203

	1204 <p>the first rule will not match elements whose "notation" attribute

	1205 is set by default, i.e. not set explicitly. To catch all cases, the

	1206 attribute selector for the default value must be dropped:</p>

	1207

	1208 <pre>EXAMPLE { /... default property settings .../ }

	1209 EXAMPLE[notation=octal] { /... other settings.../ }</pre>

	1210

	1211 <p>Here, because the selector <code>EXAMPLE[notation=octal]</code> is

	1212 more specific than the tag

	1213 selector alone, the style declarations in the second rule will override

	1214 those in the first for elements that have a "notation" attribute value

	1215 of "octal". Care has to be taken that all property declarations that

	1216 are to apply only to the default case are overridden in the non-default

	1217 cases' style rules.</p>

	1218

	1219 </div>

	1220

	1221 <h3><a name=class-html>6.4. Class selectors</a></h3>

	1222

	1223 <p>Working with HTML, authors may use the period (U+002E,

	1224 <code>.</code>) notation as an alternative to the <code>~=</code>

	1225 notation when representing the <code>class</code> attribute. Thus, for

	1226 HTML, <code>div.value</code> and <code>div[class~=value]</code> have

	1227 the same meaning. The attribute value must immediately follow the

	1228 "period" (<code>.</code>).</p>

	1229

	1230 <p>UAs may apply selectors using the period (.) notation in XML

	1231 documents if the UA has namespace-specific knowledge that allows it to

	1232 determine which attribute is the "class" attribute for the

	1233 respective namespace. One such example of namespace-specific knowledge

	1234 is the prose in the specification for a particular namespace (e.g. SVG

	1235 1.0 <a href="#refsSVG">[SVG]</a> describes the <a

	1236 href="http://www.w3.org/TR/2001/PR-SVG-20010719/styling.html#ClassAttribute">SVG

	1237 "class" attribute</a> and how a UA should interpret it, and

	1238 similarly MathML 1.01 <a href="#refsMATH">[MATH]</a> describes the <a

	1239 href="http://www.w3.org/1999/07/REC-MathML-19990707/chapter2.html#sec2.3.4">Math ML

	1240 "class" attribute</a>.)</p>

	1241

	1242 <div class="example">

	1243 <p>CSS examples:</p>

	1244

	1245 <p>We can assign style information to all elements with

	1246 <code>class~="pastoral"</code> as follows:</p>

	1247

	1248 <pre>.pastoral { color: green } / all elements with class~=pastoral */</pre >

	1249

	1250 <p>or just</p>

	1251

	1252 <pre>.pastoral { color: green } /* all elements with class~=pastoral */</pre>

	1253

	1254 <p>The following assigns style only to H1 elements with

	1255 <code>class~="pastoral"</code>:</p>

	1256

	1257 <pre>H1.pastoral { color: green } /* H1 elements with class~=pastoral */</pre >

	1258

	1259 <p>Given these rules, the first H1 instance below would not have

	1260 green text, while the second would:</p>

	1261

	1262 <pre><H1>Not green</H1>

	1263 <H1 class="pastoral">Very green</H1></pre>

	1264

	1265 </div>

	1266

	1267 <p>To represent a subset of "class" values, each value must be preceded

	1268 by a ".", in any order.</P>

	1269

	1270 <div class="example">

	1271

	1272 <p>CSS example:</p>

	1273

	1274 <p>The following rule matches any P element whose "class" attribute

	1275 has been assigned a list of <a

	1276 href="#whitespace">whitespace</a>-separated values that includes

	1277 "pastoral" and "marine":</p>

	1278

	1279 <pre>p.pastoral.marine { color: green }</pre>

	1280

	1281 <p>This rule matches when <code>class="pastoral blue aqua

	1282 marine"</code> but does not match for <code>class="pastoral

	1283 blue"</code>.</p>

	1284

	1285 </div>

	1286

	1287 <p class="note"><strong>Note:</strong> Because CSS gives considerable

	1288 power to the "class" attribute, authors could conceivably design their

	1289 own "document language" based on elements with almost no associated

	1290 presentation (such as DIV and SPAN in HTML) and assigning style

	1291 information through the "class" attribute. Authors should avoid this

	1292 practice since the structural elements of a document language often

	1293 have recognized and accepted meanings and author-defined classes may

	1294 not.</p>

	1295

	1296 <p class="note"><strong>Note:</strong> If an element has multiple

	1297 class attributes, their values must be concatenated with spaces

	1298 between the values before searching for the class. As of this time the

	1299 working group is not aware of any manner in which this situation can

	1300 be reached, however, so this behavior is explicitly non-normative in

	1301 this specification.</p>

	1302

	1303 <h3><a name=id-selectors>6.5. ID selectors</a></h3>

	1304

	1305 <p>Document languages may contain attributes that are declared to be

	1306 of type ID. What makes attributes of type ID special is that no two

	1307 such attributes can have the same value in a document, regardless of

	1308 the type of the elements that carry them; whatever the document

	1309 language, an ID typed attribute can be used to uniquely identify its

	1310 element. In HTML all ID attributes are named "id"; XML applications

	1311 may name ID attributes differently, but the same restriction

	1312 applies.</p>

	1313

	1314 <p>An ID-typed attribute of a document language allows authors to

	1315 assign an identifier to one element instance in the document tree. W3C

	1316 ID selectors represent an element instance based on its identifier. An

	1317 ID selector contains a "number sign" (U+0023,

	1318 <code>#</code>) immediately followed by the ID value, which must be an

	1319 identifier.</p>

	1320

	1321 <p>Selectors does not specify how a UA knows the ID-typed attribute of

	1322 an element. The UA may, e.g., read a document's DTD, have the

	1323 information hard-coded or ask the user.

	1324

	1325 <div class="example">

	1326 <p>Examples:</p>

	1327 <p>The following ID selector represents an <code>h1</code> element

	1328 whose ID-typed attribute has the value "chapter1":</p>

	1329 <pre>h1#chapter1</pre>

	1330 <p>The following ID selector represents any element whose ID-typed

	1331 attribute has the value "chapter1":</p>

	1332 <pre>#chapter1</pre>

	1333 <p>The following selector represents any element whose ID-typed

	1334 attribute has the value "z98y".</p>

	1335 <pre>*#z98y</pre>

	1336 </div>

	1337

	1338 <p class="note"><strong>Note.</strong> In XML 1.0 <a

	1339 href="#refsXML10">[XML10]</a>, the information about which attribute

	1340 contains an element's IDs is contained in a DTD or a schema. When

	1341 parsing XML, UAs do not always read the DTD, and thus may not know

	1342 what the ID of an element is (though a UA may have namespace-specific

	1343 knowledge that allows it to determine which attribute is the ID

	1344 attribute for that namespace). If a style sheet designer knows or

	1345 suspects that a UA may not know what the ID of an element is, he

	1346 should use normal attribute selectors instead:

	1347 <code>[name=p371]</code> instead of <code>#p371</code>. Elements in

	1348 XML 1.0 documents without a DTD do not have IDs at all.</p>

	1349

	1350 <p>If an element has multiple ID attributes, all of them must be

	1351 treated as IDs for that element for the purposes of the ID

	1352 selector. Such a situation could be reached using mixtures of xml:id,

	1353 DOM3 Core, XML DTDs, and namespace-specific knowledge.</p>

	1354

	1355 <h3><a name=pseudo-classes>6.6. Pseudo-classes</a></h3>

	1356

	1357 <p>The pseudo-class concept is introduced to permit selection based on

	1358 information that lies outside of the document tree or that cannot be

	1359 expressed using the other simple selectors.</p>

	1360

	1361 <p>A pseudo-class always consists of a "colon"

	1362 (<code>:</code>) followed by the name of the pseudo-class and

	1363 optionally by a value between parentheses.</p>

	1364

	1365 <p>Pseudo-classes are allowed in all sequences of simple selectors

	1366 contained in a selector. Pseudo-classes are allowed anywhere in

	1367 sequences of simple selectors, after the leading type selector or

	1368 universal selector (possibly omitted). Pseudo-class names are

	1369 case-insensitive. Some pseudo-classes are mutually exclusive, while

	1370 others can be applied simultaneously to the same

	1371 element. Pseudo-classes may be dynamic, in the sense that an element

	1372 may acquire or lose a pseudo-class while a user interacts with the

	1373 document.</p>

	1374

	1375

	1376 <h4><a name=dynamic-pseudos>6.6.1. Dynamic pseudo-classes</a></h4>

	1377

	1378 <p>Dynamic pseudo-classes classify elements on characteristics other

	1379 than their name, attributes, or content, in principle characteristics

	1380 that cannot be deduced from the document tree.</p>

	1381

	1382 <p>Dynamic pseudo-classes do not appear in the document source or

	1383 document tree.</p>

	1384

	1385

	1386 <h5>The <a name=link>link pseudo-classes: :link and :visited</a></h5>

	1387

	1388 <p>User agents commonly display unvisited links differently from

	1389 previously visited ones. Selectors

	1390 provides the pseudo-classes <code>:link</code> and

	1391 <code>:visited</code> to distinguish them:</p>

	1392

	1393 <ul>

	1394 <li>The <code>:link</code> pseudo-class applies to links that have

	1395 not yet been visited.</li>

	1396 <li>The <code>:visited</code> pseudo-class applies once the link has

	1397 been visited by the user. </li>

	1398 </ul>

	1399

	1400 <p>After some amount of time, user agents may choose to return a

	1401 visited link to the (unvisited) ':link' state.</p>

	1402

	1403 <p>The two states are mutually exclusive.</p>

	1404

	1405 <div class="example">

	1406

	1407 <p>Example:</p>

	1408

	1409 <p>The following selector represents links carrying class

	1410 <code>external</code> and already visited:</p>

	1411

	1412 <pre>a.external:visited</pre>

	1413

	1414 </div>

	1415

	1416 <p class="note"><strong>Note:</strong> It is possible for style sheet

	1417 authors to abuse the :link and :visited pseudo-classes to determine

	1418 which sites a user has visited without the user's consent.

	1419

	1420 <p>UAs may therefore treat all links as unvisited links, or implement

	1421 other measures to preserve the user's privacy while rendering visited

	1422 and unvisited links differently.</p>

	1423

	1424 <h5>The <a name=useraction-pseudos>user action pseudo-classes

	1425 :hover, :active, and :focus</a></h5>

	1426

	1427 <p>Interactive user agents sometimes change the rendering in response

	1428 to user actions. Selectors provides

	1429 three pseudo-classes for the selection of an element the user is

	1430 acting on.</p>

	1431

	1432 <ul>

	1433

	1434 <li>The <code>:hover</code> pseudo-class applies while the user

	1435 designates an element with a pointing device, but does not activate

	1436 it. For example, a visual user agent could apply this pseudo-class

	1437 when the cursor (mouse pointer) hovers over a box generated by the

	1438 element. User agents not that do not support <a

	1439 href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">intera ctive

	1440 media</a> do not have to support this pseudo-class. Some conforming

	1441 user agents that support <a

	1442 href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">intera ctive

	1443 media</a> may not be able to support this pseudo-class (e.g., a pen

	1444 device that does not detect hovering).</li>

	1445

	1446 <li>The <code>:active</code> pseudo-class applies while an element

	1447 is being activated by the user. For example, between the times the

	1448 user presses the mouse button and releases it.</li>

	1449

	1450 <li>The <code>:focus</code> pseudo-class applies while an element

	1451 has the focus (accepts keyboard or mouse events, or other forms of

	1452 input). </li>

	1453

	1454 </ul>

	1455

	1456 <p>There may be document language or implementation specific limits on

	1457 which elements can become <code>:active</code> or acquire

	1458 <code>:focus</code>.</p>

	1459

	1460 <p>These pseudo-classes are not mutually exclusive. An element may

	1461 match several pseudo-classes at the same time.</p>

	1462

	1463 <p>Selectors doesn't define if the parent of an element that is

	1464 ':active' or ':hover' is also in that state.</p>

	1465

	1466 <div class="example">

	1467 <p>Examples:</p>

	1468 <pre>a:link /* unvisited links */

	1469 a:visited /* visited links */

	1470 a:hover /* user hovers */

	1471 a:active /* active links */</pre>

	1472 <p>An example of combining dynamic pseudo-classes:</p>

	1473 <pre>a:focus

	1474 a:focus:hover</pre>

	1475 <p>The last selector matches <code>a</code> elements that are in

	1476 the pseudo-class :focus and in the pseudo-class :hover.</p>

	1477 </div>

	1478

	1479 <p class="note"><strong>Note:</strong> An element can be both ':visited'

	1480 and ':active' (or ':link' and ':active').</p>

	1481

	1482 <h4><a name=target-pseudo>6.6.2. The target pseudo-class :target</a></h4>

	1483

	1484 <p>Some URIs refer to a location within a resource. This kind of URI

	1485 ends with a "number sign" (#) followed by an anchor

	1486 identifier (called the fragment identifier).</p>

	1487

	1488 <p>URIs with fragment identifiers link to a certain element within the

	1489 document, known as the target element. For instance, here is a URI

	1490 pointing to an anchor named <code>section_2</code> in an HTML

	1491 document:</p>

	1492

	1493 <pre>http://example.com/html/top.html#section_2</pre>

	1494

	1495 <p>A target element can be represented by the <code>:target</code>

	1496 pseudo-class. If the document's URI has no fragment identifier, then

	1497 the document has no target element.</p>

	1498

	1499 <div class="example">

	1500 <p>Example:</p>

	1501 <pre>p.note:target</pre>

	1502 <p>This selector represents a <code>p</code> element of class

	1503 <code>note</code> that is the target element of the referring

	1504 URI.</p>

	1505 </div>

	1506

	1507 <div class="example">

	1508 <p>CSS example:</p>

	1509 <p>Here, the <code>:target</code> pseudo-class is used to make the

	1510 target element red and place an image before it, if there is one:</p>

	1511 <pre>*:target { color : red }

	1512 *:target::before { content : url(target.png) }</pre>

	1513 </div>

	1514

	1515 <h4><a name=lang-pseudo>6.6.3. The language pseudo-class :lang</a></h4>

	1516

	1517 <p>If the document language specifies how the human language of an

	1518 element is determined, it is possible to write selectors that

	1519 represent an element based on its language. For example, in HTML <a

	1520 href="#refsHTML4">[HTML4]</a>, the language is determined by a

	1521 combination of the <code>lang</code> attribute, the <code>meta</code>

	1522 element, and possibly by information from the protocol (such as HTTP

	1523 headers). XML uses an attribute called <code>xml:lang</code>, and

	1524 there may be other document language-specific methods for determining

	1525 the language.</p>

	1526

	1527 <p>The pseudo-class <code>:lang(C)</code> represents an element that

	1528 is in language C. Whether an element is represented by a

	1529 <code>:lang()</code> selector is based solely on the identifier C

	1530 being either equal to, or a hyphen-separated substring of, the

	1531 element's language value, in the same way as if performed by the <a

	1532 href="#attribute-representation">'\|='</a> operator in attribute

	1533 selectors. The identifier C does not have to be a valid language

	1534 name.</p>

	1535

	1536 <p>C must not be empty. (If it is, the selector is invalid.)</p>

	1537

	1538 <p class="note"><strong>Note:</strong> It is recommended that

	1539 documents and protocols indicate language using codes from RFC 3066 <a

	1540 href="#refsRFC3066">[RFC3066]</a> or its successor, and by means of

	1541 "xml:lang" attributes in the case of XML-based documents <a

	1542 href="#refsXML10">[XML10]</a>. See <a

	1543 href="http://www.w3.org/International/questions/qa-lang-2or3.html">

	1544 "FAQ: Two-letter or three-letter language codes."</a></p>

	1545

	1546 <div class="example">

	1547 <p>Examples:</p>

	1548 <p>The two following selectors represent an HTML document that is in

	1549 Belgian, French, or German. The two next selectors represent

	1550 <code>q</code> quotations in an arbitrary element in Belgian, French,

	1551 or German.</p>

	1552 <pre>html:lang(fr-be)

	1553 html:lang(de)

	1554 :lang(fr-be) > q

	1555 :lang(de) > q</pre>

	1556 </div>

	1557

	1558 <h4><a name=UIstates>6.6.4. The UI element states pseudo-classes</a></h4>

	1559

	1560 <h5><a name=enableddisabled>The :enabled and :disabled pseudo-classes</a></h5>

	1561

	1562 <p>The <code>:enabled</code> pseudo-class allows authors to customize

	1563 the look of user interface elements that are enabled — which the

	1564 user can select or activate in some fashion (e.g. clicking on a button

	1565 with a mouse). There is a need for such a pseudo-class because there

	1566 is no way to programmatically specify the default appearance of say,

	1567 an enabled <code>input</code> element without also specifying what it

	1568 would look like when it was disabled.</p>

	1569

	1570 <p>Similar to <code>:enabled</code>, <code>:disabled</code> allows the

	1571 author to specify precisely how a disabled or inactive user interface

	1572 element should look.</p>

	1573

	1574 <p>Most elements will be neither enabled nor disabled. An element is

	1575 enabled if the user can either activate it or transfer the focus to

	1576 it. An element is disabled if it could be enabled, but the user cannot

	1577 presently activate it or transfer focus to it.</p>

	1578

	1579

	1580 <h5><a name=checked>The :checked pseudo-class</a></h5>

	1581

	1582 <p>Radio and checkbox elements can be toggled by the user. Some menu

	1583 items are "checked" when the user selects them. When such elements are

	1584 toggled "on" the <code>:checked</code> pseudo-class applies. The

	1585 <code>:checked</code> pseudo-class initially applies to such elements

	1586 that have the HTML4 <code>selected</code> and <code>checked</code>

	1587 attributes as described in <a

	1588 href="http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.2.1">Section

	1589 17.2.1 of HTML4</a>, but of course the user can toggle "off" such

	1590 elements in which case the <code>:checked</code> pseudo-class would no

	1591 longer apply. While the <code>:checked</code> pseudo-class is dynamic

	1592 in nature, and is altered by user action, since it can also be based

	1593 on the presence of the semantic HTML4 <code>selected</code> and

	1594 <code>checked</code> attributes, it applies to all media.

	1595

	1596

	1597 <h5><a name=indeterminate>The :indeterminate pseudo-class</a></h5>

	1598

	1599 <div class="note">

	1600

	1601 <p>Radio and checkbox elements can be toggled by the user, but are

	1602 sometimes in an indeterminate state, neither checked nor unchecked.

	1603 This can be due to an element attribute, or DOM manipulation.</p>

	1604

	1605 <p>A future version of this specification may introduce an

	1606 <code>:indeterminate</code> pseudo-class that applies to such elements.

	1607 <!--While the <code>:indeterminate</code> pseudo-class is dynamic in

	1608 nature, and is altered by user action, since it can also be based on

	1609 the presence of an element attribute, it applies to all media.</p>

	1610

	1611 <p>Components of a radio-group initialized with no pre-selected choice

	1612 are an example of :indeterminate state.--></p>

	1613

	1614 </div>

	1615

	1616

	1617 <h4><a name=structural-pseudos>6.6.5. Structural pseudo-classes</a></h4>

	1618

	1619 <p>Selectors introduces the concept of <dfn>structural

	1620 pseudo-classes</dfn> to permit selection based on extra information that lies in

	1621 the document tree but cannot be represented by other simple selectors or

	1622 combinators.

	1623

	1624 <p>Note that standalone pieces of PCDATA (text nodes in the DOM) are

	1625 not counted when calculating the position of an element in the list of

	1626 children of its parent. When calculating the position of an element in

	1627 the list of children of its parent, the index numbering starts at 1.

	1628

	1629

	1630 <h5><a name=root-pseudo>:root pseudo-class</a></h5>

	1631

	1632 <p>The <code>:root</code> pseudo-class represents an element that is

	1633 the root of the document. In HTML 4, this is always the

	1634 <code>HTML</code> element.

	1635

	1636

	1637 <h5><a name=nth-child-pseudo>:nth-child() pseudo-class</a></h5>

	1638

	1639 <p>The

	1640 <code>:nth-child(<var>a</var><code>n</code>+<var>b</var>)</code>

	1641 pseudo-class notation represents an element that has

	1642 <var>a</var><code>n</code>+<var>b</var>-1 siblings

	1643 <strong>before</strong> it in the document tree, for a given positive

	1644 integer or zero value of <code>n</code>, and has a parent element. In

	1645 other words, this matches the <var>b</var>th child of an element after

	1646 all the children have been split into groups of <var>a</var> elements

	1647 each. For example, this allows the selectors to address every other

	1648 row in a table, and could be used to alternate the color

	1649 of paragraph text in a cycle of four. The <var>a</var> and

	1650 <var>b</var> values must be zero, negative integers or positive

	1651 integers. The index of the first child of an element is 1.

	1652

	1653 <p>In addition to this, <code>:nth-child()</code> can take

	1654 '<code>odd</code>' and '<code>even</code>' as arguments instead.

	1655 '<code>odd</code>' has the same signification as <code>2n+1</code>,

	1656 and '<code>even</code>' has the same signification as <code>2n</code>.

	1657

	1658

	1659 <div class="example">

	1660 <p>Examples:</p>

	1661 <pre>tr:nth-child(2n+1) /* represents every odd row of an HTML table */

	1662 tr:nth-child(odd) /* same */

	1663 tr:nth-child(2n) /* represents every even row of an HTML table */

	1664 tr:nth-child(even) /* same */

	1665

	1666 /* Alternate paragraph colours in CSS */

	1667 p:nth-child(4n+1) { color: navy; }

	1668 p:nth-child(4n+2) { color: green; }

	1669 p:nth-child(4n+3) { color: maroon; }

	1670 p:nth-child(4n+4) { color: purple; }</pre>

	1671 </div>

	1672

	1673 <p>When <var>a</var>=0, no repeating is used, so for example

	1674 <code>:nth-child(0n+5)</code> matches only the fifth child. When

	1675 <var>a</var>=0, the <var>a</var><code>n</code> part need not be

	1676 included, so the syntax simplifies to

	1677 <code>:nth-child(<var>b</var>)</code> and the last example simplifies

	1678 to <code>:nth-child(5)</code>.

	1679

	1680 <div class="example">

	1681 <p>Examples:</p>

	1682 <pre>foo:nth-child(0n+1) /* represents an element foo, first child of its pare nt element */

	1683 foo:nth-child(1) /* same */</pre>

	1684 </div>

	1685

	1686 <p>When <var>a</var>=1, the number may be omitted from the rule.

	1687

	1688 <div class="example">

	1689 <p>Examples:</p>

	1690 <p>The following selectors are therefore equivalent:</p>

	1691 <pre>bar:nth-child(1n+0) /* represents all bar elements, specificity (0,1,1) * /

	1692 bar:nth-child(n+0) /* same */

	1693 bar:nth-child(n) /* same */

	1694 bar /* same but lower specificity (0,0,1) */</pre>

	1695 </div>

	1696

	1697 <p>If <var>b</var>=0, then every <var>a</var>th element is picked. In

	1698 such a case, the <var>b</var> part may be omitted.

	1699

	1700 <div class="example">

	1701 <p>Examples:</p>

	1702 <pre>tr:nth-child(2n+0) /* represents every even row of an HTML table */

	1703 tr:nth-child(2n) /* same */</pre>

	1704 </div>

	1705

	1706 <p>If both <var>a</var> and <var>b</var> are equal to zero, the

	1707 pseudo-class represents no element in the document tree.</p>

	1708

	1709 <p>The value <var>a</var> can be negative, but only the positive

	1710 values of <var>a</var><code>n</code>+<var>b</var>, for

	1711 <code>n</code>≥0, may represent an element in the document

	1712 tree.</p>

	1713

	1714 <div class="example">

	1715 <p>Example:</p>

	1716 <pre>html\|tr:nth-child(-n+6) /* represents the 6 first rows of XHTML tables */< /pre>

	1717 </div>

	1718

	1719 <p>When the value <var>b</var> is negative, the "+" character in the

	1720 expression must be removed (it is effectively replaced by the "-"

	1721 character indicating the negative value of <var>b</var>).</p>

	1722

	1723 <div class="example">

	1724 <p>Examples:</p>

	1725 <pre>:nth-child(10n-1) /* represents the 9th, 19th, 29th, etc, element */

	1726 :nth-child(10n+9) /* Same */

	1727 :nth-child(10n+-1) /* Syntactically invalid, and would be ignored */</pre>

	1728 </div>

	1729

	1730

	1731 <h5><a name=nth-last-child-pseudo>:nth-last-child() pseudo-class</a></h5>

	1732

	1733 <p>The <code>:nth-last-child(<var>a</var>n+<var>b</var>)</code>

	1734 pseudo-class notation represents an element that has

	1735 <var>a</var><code>n</code>+<var>b</var>-1 siblings

	1736 <strong>after</strong> it in the document tree, for a given positive

	1737 integer or zero value of <code>n</code>, and has a parent element. See

	1738 <code>:nth-child()</code> pseudo-class for the syntax of its argument.

	1739 It also accepts the '<code>even</code>' and '<code>odd</code>' values

	1740 as arguments.

	1741

	1742

	1743 <div class="example">

	1744 <p>Examples:</p>

	1745 <pre>tr:nth-last-child(-n+2) /* represents the two last rows of an HTML table */

	1746

	1747 foo:nth-last-child(odd) /* represents all odd foo elements in their parent el ement,

	1748 counting from the last one */</pre>

	1749 </div>

	1750

	1751

	1752 <h5><a name=nth-of-type-pseudo>:nth-of-type() pseudo-class</a></h5>

	1753

	1754 <p>The <code>:nth-of-type(<var>a</var>n+<var>b</var>)</code>

	1755 pseudo-class notation represents an element that has

	1756 <var>a</var><code>n</code>+<var>b</var>-1 siblings with the same

	1757 element name <strong>before</strong> it in the document tree, for a

	1758 given zero or positive integer value of <code>n</code>, and has a

	1759 parent element. In other words, this matches the <var>b</var>th child

	1760 of that type after all the children of that type have been split into

	1761 groups of a elements each. See <code>:nth-child()</code> pseudo-class

	1762 for the syntax of its argument. It also accepts the

	1763 '<code>even</code>' and '<code>odd</code>' values.

	1764

	1765

	1766 <div class="example">

	1767 <p>CSS example:</p>

	1768 <p>This allows an author to alternate the position of floated images:</p>

	1769 <pre>img:nth-of-type(2n+1) { float: right; }

	1770 img:nth-of-type(2n) { float: left; }</pre>

	1771 </div>

	1772

	1773

	1774 <h5><a name=nth-last-of-type-pseudo>:nth-last-of-type() pseudo-class</a></h5>

	1775

	1776 <p>The <code>:nth-last-of-type(<var>a</var>n+<var>b</var>)</code>

	1777 pseudo-class notation represents an element that has

	1778 <var>a</var><code>n</code>+<var>b</var>-1 siblings with the same

	1779 element name <strong>after</strong> it in the document tree, for a

	1780 given zero or positive integer value of <code>n</code>, and has a

	1781 parent element. See <code>:nth-child()</code> pseudo-class for the

	1782 syntax of its argument. It also accepts the '<code>even</code>' and '<code>odd</ code>' values.

	1783

	1784

	1785 <div class="example">

	1786 <p>Example:</p>

	1787 <p>To represent all <code>h2</code> children of an XHTML

	1788 <code>body</code> except the first and last, one could use the

	1789 following selector:</p>

	1790 <pre>body > h2:nth-of-type(n+2):nth-last-of-type(n+2)</pre>

	1791 <p>In this case, one could also use <code>:not()</code>, although the

	1792 selector ends up being just as long:</p>

	1793 <pre>body > h2:not(:first-of-type):not(:last-of-type)</pre>

	1794 </div>

	1795

	1796

	1797 <h5><a name=first-child-pseudo>:first-child pseudo-class</a></h5>

	1798

	1799 <p>Same as <code>:nth-child(1)</code>. The <code>:first-child</code> pseudo-clas s

	1800 represents an element that is the first child of some other element.

	1801

	1802

	1803 <div class="example">

	1804 <p>Examples:</p>

	1805 <p>The following selector represents a <code>p</code> element that is

	1806 the first child of a <code>div</code> element:</p>

	1807 <pre>div > p:first-child</pre>

	1808 <p>This selector can represent the <code>p</code> inside the

	1809 <code>div</code> of the following fragment:</p>

	1810 <pre><p> The last P before the note.</p>

	1811 <div class="note">

	1812 <p> The first P inside the note.</p>

	1813 </div></pre>but cannot represent the second <code>p</code> in the followin g

	1814 fragment:

	1815 <pre><p> The last P before the note.</p>

	1816 <div class="note">

	1817 <h2> Note </h2>

	1818 <p> The first P inside the note.</p>

	1819 </div></pre>

	1820 <p>The following two selectors are usually equivalent:</p>

	1821 <pre>* > a:first-child /* a is first child of any element */

	1822 a:first-child /* Same (assuming a is not the root element) */</pre>

	1823 </div>

	1824

	1825 <h5><a name=last-child-pseudo>:last-child pseudo-class</a></h5>

	1826

	1827 <p>Same as <code>:nth-last-child(1)</code>. The <code>:last-child</code> pseudo- class

	1828 represents an element that is the last child of some other element.

	1829

	1830 <div class="example">

	1831 <p>Example:</p>

	1832 <p>The following selector represents a list item <code>li</code> that

	1833 is the last child of an ordered list <code>ol</code>.

	1834 <pre>ol > li:last-child</pre>

	1835 </div>

	1836

	1837 <h5><a name=first-of-type-pseudo>:first-of-type pseudo-class</a></h5>

	1838

	1839 <p>Same as <code>:nth-of-type(1)</code>. The <code>:first-of-type</code> pseudo- class

	1840 represents an element that is the first sibling of its type in the list of

	1841 children of its parent element.

	1842

	1843 <div class="example">

	1844 <p>Example:</p>

	1845 <p>The following selector represents a definition title

	1846 <code>dt</code> inside a definition list <code>dl</code>, this

	1847 <code>dt</code> being the first of its type in the list of children of

	1848 its parent element.</p>

	1849 <pre>dl dt:first-of-type</pre>

	1850 <p>It is a valid description for the first two <code>dt</code>

	1851 elements in the following example but not for the third one:</p>

	1852 <pre><dl>

	1853 <dt>gigogne</dt>

	1854 <dd>

	1855 <dl>

	1856 <dt>fusée</dt>

	1857 <dd>multistage rocket</dd>

	1858 <dt>table</dt>

	1859 <dd>nest of tables</dd>

	1860 </dl>

	1861 </dd>

	1862 </dl></pre>

	1863 </div>

	1864

	1865 <h5><a name=last-of-type-pseudo>:last-of-type pseudo-class</a></h5>

	1866

	1867 <p>Same as <code>:nth-last-of-type(1)</code>. The

	1868 <code>:last-of-type</code> pseudo-class represents an element that is

	1869 the last sibling of its type in the list of children of its parent

	1870 element.</p>

	1871

	1872 <div class="example">

	1873 <p>Example:</p>

	1874 <p>The following selector represents the last data cell

	1875 <code>td</code> of a table row.</p>

	1876 <pre>tr > td:last-of-type</pre>

	1877 </div>

	1878

	1879 <h5><a name=only-child-pseudo>:only-child pseudo-class</a></h5>

	1880

	1881 <p>Represents an element that has a parent element and whose parent

	1882 element has no other element children. Same as

	1883 <code>:first-child:last-child</code> or

	1884 <code>:nth-child(1):nth-last-child(1)</code>, but with a lower

	1885 specificity.</p>

	1886

	1887 <h5><a name=only-of-type-pseudo>:only-of-type pseudo-class</a></h5>

	1888

	1889 <p>Represents an element that has a parent element and whose parent

	1890 element has no other element children with the same element name. Same

	1891 as <code>:first-of-type:last-of-type</code> or

	1892 <code>:nth-of-type(1):nth-last-of-type(1)</code>, but with a lower

	1893 specificity.</p>

	1894

	1895

	1896 <h5><a name=empty-pseudo></a>:empty pseudo-class</h5>

	1897

	1898 <p>The <code>:empty</code> pseudo-class represents an element that has

	1899 no children at all. In terms of the DOM, only element nodes and text

	1900 nodes (including CDATA nodes and entity references) whose data has a

	1901 non-zero length must be considered as affecting emptiness; comments,

	1902 PIs, and other nodes must not affect whether an element is considered

	1903 empty or not.</p>

	1904

	1905 <div class="example">

	1906 <p>Examples:</p>

	1907 <p><code>p:empty</code> is a valid representation of the following fragment:</p >

	1908 <pre><p></p></pre>

	1909 <p><code>foo:empty</code> is not a valid representation for the

	1910 following fragments:</p>

	1911 <pre><foo>bar</foo></pre>

	1912 <pre><foo><bar>bla</bar></foo></pre>

	1913 <pre><foo>this is not <bar>:empty</bar></foo></pre>

	1914 </div>

	1915

	1916 <h4><a name=content-selectors>6.6.6. Blank</a></h4> <!-- It's the Return of Appe ndix H!!! Run away! -->

	1917

	1918 <p>This section intentionally left blank.</p>

	1919 <!-- (used to be :contains()) -->

	1920

	1921 <h4><a name=negation></a>6.6.7. The negation pseudo-class</h4>

	1922

	1923 <p>The negation pseudo-class, <code>:not(<var>X</var>)</code>, is a

	1924 functional notation taking a <a href="#simple-selectors-dfn">simple

	1925 selector</a> (excluding the negation pseudo-class itself and

	1926 pseudo-elements) as an argument. It represents an element that is not

	1927 represented by the argument.

	1928

	1929 <!-- pseudo-elements are not simple selectors, so the above paragraph

	1930 may be a bit confusing -->

	1931

	1932 <div class="example">

	1933 <p>Examples:</p>

	1934 <p>The following CSS selector matches all <code>button</code>

	1935 elements in an HTML document that are not disabled.</p>

	1936 <pre>button:not([DISABLED])</pre>

	1937 <p>The following selector represents all but <code>FOO</code>

	1938 elements.</p>

	1939 <pre>*:not(FOO)</pre>

	1940 <p>The following group of selectors represents all HTML elements

	1941 except links.</p>

	1942 <pre>html\|*:not(:link):not(:visited)</pre>

	1943 </div>

	1944

	1945 <p>Default namespace declarations do not affect the argument of the

	1946 negation pseudo-class unless the argument is a universal selector or a

	1947 type selector.</p>

	1948

	1949 <div class="example">

	1950 <p>Examples:</p>

	1951 <p>Assuming that the default namespace is bound to

	1952 "http://example.com/", the following selector represents all

	1953 elements that are not in that namespace:</p>

	1954 <pre>\|:not(*)</pre>

	1955 <p>The following CSS selector matches any element being hovered,

	1956 regardless of its namespace. In particular, it is not limited to

	1957 only matching elements in the default namespace that are not being

	1958 hovered, and elements not in the default namespace don't match the

	1959 rule when they <em>are</em> being hovered.</p>

	1960 <pre>\|:not(:hover)</pre>

	1961 </div>

	1962

	1963 <p class="note"><strong>Note</strong>: the :not() pseudo allows

	1964 useless selectors to be written. For instance <code>:not(\|)</code>,

	1965 which represents no element at all, or <code>foo:not(bar)</code>,

	1966 which is equivalent to <code>foo</code> but with a higher

	1967 specificity.</p>

	1968

	1969 <h3><a name=pseudo-elements>7. Pseudo-elements</a></h3>

	1970

	1971 <p>Pseudo-elements create abstractions about the document tree beyond

	1972 those specified by the document language. For instance, document

	1973 languages do not offer mechanisms to access the first letter or first

	1974 line of an element's content. Pseudo-elements allow designers to refer

	1975 to this otherwise inaccessible information. Pseudo-elements may also

	1976 provide designers a way to refer to content that does not exist in the

	1977 source document (e.g., the <code>::before</code> and

	1978 <code>::after</code> pseudo-elements give access to generated

	1979 content).</p>

	1980

	1981 <p>A pseudo-element is made of two colons (<code>::</code>) followed

	1982 by the name of the pseudo-element.</p>

	1983

	1984 <p>This <code>::</code> notation is introduced by the current document

	1985 in order to establish a discrimination between pseudo-classes and

	1986 pseudo-elements. For compatibility with existing style sheets, user

	1987 agents must also accept the previous one-colon notation for

	1988 pseudo-elements introduced in CSS levels 1 and 2 (namely,

	1989 <code>:first-line</code>, <code>:first-letter</code>,

	1990 <code>:before</code> and <code>:after</code>). This compatibility is

	1991 not allowed for the new pseudo-elements introduced in CSS level 3.</p>

	1992

	1993 <p>Only one pseudo-element may appear per selector, and if present it

	1994 must appear after the sequence of simple selectors that represents the

	1995 <a href="#subject">subjects</a> of the selector. <span class="note">A

	1996 future version of this specification may allow multiple

	1997 pesudo-elements per selector.</span></p>

	1998

	1999 <h4><a name=first-line>7.1. The ::first-line pseudo-element</a></h4>

	2000

	2001 <p>The <code>::first-line</code> pseudo-element describes the contents

	2002 of the first formatted line of an element.

	2003

	2004 <div class="example">

	2005 <p>CSS example:</p>

	2006 <pre>p::first-line { text-transform: uppercase }</pre>

	2007 <p>The above rule means "change the letters of the first line of every

	2008 paragraph to uppercase".</p>

	2009 </div>

	2010

	2011 <p>The selector <code>p::first-line</code> does not match any real

	2012 HTML element. It does match a pseudo-element that conforming user

	2013 agents will insert at the beginning of every paragraph.</p>

	2014

	2015 <p>Note that the length of the first line depends on a number of

	2016 factors, including the width of the page, the font size, etc. Thus,

	2017 an ordinary HTML paragraph such as:</p>

	2018

	2019 <pre>

	2020 <P>This is a somewhat long HTML

	2021 paragraph that will be broken into several

	2022 lines. The first line will be identified

	2023 by a fictional tag sequence. The other lines

	2024 will be treated as ordinary lines in the

	2025 paragraph.</P>

	2026 </pre>

	2027

	2028 <p>the lines of which happen to be broken as follows:

	2029

	2030 <pre>

	2031 THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT

	2032 will be broken into several lines. The first

	2033 line will be identified by a fictional tag

	2034 sequence. The other lines will be treated as

	2035 ordinary lines in the paragraph.

	2036 </pre>

	2037

	2038 <p>This paragraph might be "rewritten" by user agents to include the

	2039 <em>fictional tag sequence</em> for <code>::first-line</code>. This

	2040 fictional tag sequence helps to show how properties are inherited.</p>

	2041

	2042 <pre>

	2043 <P><b><P::first-line></b> This is a somewhat long HTML

	2044 paragraph that <b></P::first-line></b> will be broken into several

	2045 lines. The first line will be identified

	2046 by a fictional tag sequence. The other lines

	2047 will be treated as ordinary lines in the

	2048 paragraph.</P>

	2049 </pre>

	2050

	2051 <p>If a pseudo-element breaks up a real element, the desired effect

	2052 can often be described by a fictional tag sequence that closes and

	2053 then re-opens the element. Thus, if we mark up the previous paragraph

	2054 with a <code>span</code> element:</p>

	2055

	2056 <pre>

	2057 <P><b><SPAN class="test"></b> This is a somewhat long HTML

	2058 paragraph that will be broken into several

	2059 lines.<b></SPAN></b> The first line will be identified

	2060 by a fictional tag sequence. The other lines

	2061 will be treated as ordinary lines in the

	2062 paragraph.</P>

	2063 </pre>

	2064

	2065 <p>the user agent could simulate start and end tags for

	2066 <code>span</code> when inserting the fictional tag sequence for

	2067 <code>::first-line</code>.

	2068

	2069 <pre>

	2070 <P><P::first-line><b><SPAN class="test"></b> This is a

	2071 somewhat long HTML

	2072 paragraph that will <b></SPAN></b></P::first-line><b><SPAN class= "test"></b> be

	2073 broken into several

	2074 lines.<b></SPAN></b> The first line will be identified

	2075 by a fictional tag sequence. The other lines

	2076 will be treated as ordinary lines in the

	2077 paragraph.</P>

	2078 </pre>

	2079

	2080 <p>In CSS, the <code>::first-line</code> pseudo-element can only be

	2081 attached to a block-level element, an inline-block, a table-caption,

	2082 or a table-cell.</p>

	2083

	2084 <p><a name="first-formatted-line"></a>The "first formatted line" of an

	2085 element may occur inside a

	2086 block-level descendant in the same flow (i.e., a block-level

	2087 descendant that is not positioned and not a float). E.g., the first

	2088 line of the <code>div</code> in <code><DIV><P>This

	2089 line...</P>&lt/DIV></code> is the first line of the <code>p</code> (assuming

	2090 that both <code>p</code> and <code>div</code> are block-level).

	2091

	2092 <p>The first line of a table-cell or inline-block cannot be the first

	2093 formatted line of an ancestor element. Thus, in <code><DIV><P

	2094 STYLE="display: inline-block">Hello<BR>Goodbye</P>

	2095 etcetera</DIV></code> the first formatted line of the

	2096 <code>div</code> is not the line "Hello".

	2097

	2098 <p class="note">Note that the first line of the <code>p</code> in this

	2099 fragment: <code><p&gt<br>First...</code> doesn't contain any

	2100 letters (assuming the default style for <code>br</code> in HTML

	2101 4). The word "First" is not on the first formatted line.

	2102

	2103 <p>A UA should act as if the fictional start tags of the

	2104 <code>::first-line</code> pseudo-elements were nested just inside the

	2105 innermost enclosing block-level element. (Since CSS1 and CSS2 were

	2106 silent on this case, authors should not rely on this behavior.) Here

	2107 is an example. The fictional tag sequence for</p>

	2108

	2109 <pre>

	2110 <DIV>

	2111 <P>First paragraph</P>

	2112 <P>Second paragraph</P>

	2113 </DIV>

	2114 </pre>

	2115

	2116 <p>is</p>

	2117

	2118 <pre>

	2119 <DIV>

	2120 <P><DIV::first-line><P::first-line>First paragraph</P::first-line> </DIV::first-line></P>

	2121 <P><P::first-line>Second paragraph</P::first-line></P>

	2122 </DIV>

	2123 </pre>

	2124

	2125 <p>The <code>::first-line</code> pseudo-element is similar to an

	2126 inline-level element, but with certain restrictions. In CSS, the

	2127 following properties apply to a <code>::first-line</code>

	2128 pseudo-element: font properties, color property, background

	2129 properties, 'word-spacing', 'letter-spacing', 'text-decoration',

	2130 'vertical-align', 'text-transform', 'line-height'. UAs may apply other

	2131 properties as well.</p>

	2132

	2133

	2134 <h4><a name=first-letter>7.2. The ::first-letter pseudo-element</a></h4>

	2135

	2136 <p>The <code>::first-letter</code> pseudo-element represents the first

	2137 letter of the first line of a block, if it is not preceded by any

	2138 other content (such as images or inline tables) on its line. The

	2139 ::first-letter pseudo-element may be used for "initial caps" and "drop

	2140 caps", which are common typographical effects. This type of initial

	2141 letter is similar to an inline-level element if its 'float' property

	2142 is 'none'; otherwise, it is similar to a floated element.</p>

	2143

	2144 <p>In CSS, these are the properties that apply to <code>::first-letter</code>

	2145 pseudo-elements: font properties, 'text-decoration', 'text-transform',

	2146 'letter-spacing', 'word-spacing' (when appropriate), 'line-height',

	2147 'float', 'vertical-align' (only if 'float' is 'none'), margin

	2148 properties, padding properties, border properties, color property,

	2149 background properties. UAs may apply other properties as well. To

	2150 allow UAs to render a typographically correct drop cap or initial cap,

	2151 the UA may choose a line-height, width and height based on the shape

	2152 of the letter, unlike for normal elements.</p>

	2153

	2154 <div class="example">

	2155 <p>Example:</p>

	2156 <p>This example shows a possible rendering of an initial cap. Note

	2157 that the 'line-height' that is inherited by the <code>::first-letter</code>

	2158 pseudo-element is 1.1, but the UA in this example has computed the

	2159 height of the first letter differently, so that it doesn't cause any

	2160 unnecessary space between the first two lines. Also note that the

	2161 fictional start tag of the first letter is inside the <span>span</span>, and thu s

	2162 the font weight of the first letter is normal, not bold as the <span>span</span> :

	2163 <pre>

	2164 p { line-height: 1.1 }

	2165 p::first-letter { font-size: 3em; font-weight: normal }

	2166 span { font-weight: bold }

	2167 ...

	2168 <p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br >

	2169 Erbarremt over my en mijn benaeuwde vesten<br>

	2170 En arme burgery, en op mijn volcx gebed<br>

	2171 En dagelix geschrey de bange stad ontzet.

	2172 </pre>

	2173 <div class="figure">

	2174 <p><img src="initial-cap.png" alt="Image illustrating the ::first-letter pseudo- element">

	2175 </div>

	2176 </div>

	2177

	2178 <div class="example">

	2179 <p>The following CSS will make a drop cap initial letter span about two lines:</ p>

	2180

	2181 <pre>

	2182 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

	2183 <HTML>

	2184 <HEAD>

	2185 <TITLE>Drop cap initial letter</TITLE>

	2186 <STYLE type="text/css">

	2187 P { font-size: 12pt; line-height: 1.2 }

	2188 P::first-letter { font-size: 200%; font-weight: bold; float: left }

	2189 SPAN { text-transform: uppercase }

	2190 </STYLE>

	2191 </HEAD>

	2192 <BODY>

	2193 <P><SPAN>The first</SPAN> few words of an article

	2194 in The Economist.</P>

	2195 </BODY>

	2196 </HTML>

	2197 </pre>

	2198

	2199 <p>This example might be formatted as follows:</p>

	2200

	2201 <div class="figure">

	2202 <P><img src="first-letter.gif" alt="Image illustrating the combined effect of th e ::first-letter and ::first-line pseudo-elements"></p>

	2203 </div>

	2204

	2205 <p>The <span class="index-inst" title="fictional tag

	2206 sequence">fictional tag sequence</span> is:</p>

	2207

	2208 <pre>

	2209 <P>

	2210 <SPAN>

	2211 <P::first-letter>

	2212 T

	2213 </P::first-letter>he first

	2214 </SPAN>

	2215 few words of an article in the Economist.

	2216 </P>

	2217 </pre>

	2218

	2219 <p>Note that the <code>::first-letter</code> pseudo-element tags abut

	2220 the content (i.e., the initial character), while the ::first-line

	2221 pseudo-element start tag is inserted right after the start tag of the

	2222 block element.</p> </div>

	2223

	2224 <p>In order to achieve traditional drop caps formatting, user agents

	2225 may approximate font sizes, for example to align baselines. Also, the

	2226 glyph outline may be taken into account when formatting.</p>

	2227

	2228 <p>Punctuation (i.e, characters defined in Unicode in the "open" (Ps),

	2229 "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po)

	2230 punctuation classes), that precedes or follows the first letter should

	2231 be included. <a href="#refsUNICODE">[UNICODE]</a></p>

	2232

	2233 <div class="figure">

	2234 <P><img src="first-letter2.gif" alt="Quotes that precede the

	2235 first letter should be included."></p>

	2236 </div>

	2237

	2238 <p>The <code>::first-letter</code> also applies if the first letter is

	2239 in fact a digit, e.g., the "6" in "67 million dollars is a lot of

	2240 money."</p>

	2241

	2242 <p>In CSS, the <code>::first-letter</code> pseudo-element applies to

	2243 block, list-item, table-cell, table-caption, and inline-block

	2244 elements. <span class="note">A future version of this specification

	2245 may allow this pesudo-element to apply to more element

	2246 types.</span></p>

	2247

	2248 <p>The <code>::first-letter</code> pseudo-element can be used with all

	2249 such elements that contain text, or that have a descendant in the same

	2250 flow that contains text. A UA should act as if the fictional start tag

	2251 of the ::first-letter pseudo-element is just before the first text of

	2252 the element, even if that first text is in a descendant.</p>

	2253

	2254 <div class="example">

	2255 <p>Example:</p>

	2256 <p>The fictional tag sequence for this HTMLfragment:

	2257 <pre><div>

	2258 <p>The first text.</pre>

	2259 <p>is:

	2260 <pre><div>

	2261 <p><div::first-letter><p::first-letter>T</...></...>he first text .</pre>

	2262 </div>

	2263

	2264 <p>The first letter of a table-cell or inline-block cannot be the

	2265 first letter of an ancestor element. Thus, in <code><DIV><P

	2266 STYLE="display: inline-block">Hello<BR>Goodbye</P>

	2267 etcetera</DIV></code> the first letter of the <code>div</code> is not the

	2268 letter "H". In fact, the <code>div</code> doesn't have a first letter.

	2269

	2270 <p>The first letter must occur on the <a

	2271 href="#first-formatted-line">first formatted line.</a> For example, in

	2272 this fragment: <code><p&gt<br>First...</code> the first line

	2273 doesn't contain any letters and <code>::first-letter</code> doesn't

	2274 match anything (assuming the default style for <code>br</code> in HTML

	2275 4). In particular, it does not match the "F" of "First."

	2276

	2277 <p>In CSS, if an element is a list item ('display: list-item'), the

	2278 <code>::first-letter</code> applies to the first letter in the

	2279 principal box after the marker. UAs may ignore

	2280 <code>::first-letter</code> on list items with 'list-style-position:

	2281 inside'. If an element has <code>::before</code> or

	2282 <code>::after</code> content, the <code>::first-letter</code> applies

	2283 to the first letter of the element <em>including</em> that content.

	2284

	2285 <div class="example">

	2286 <p>Example:</p>

	2287 <p>After the rule 'p::before {content: "Note: "}', the selector

	2288 'p::first-letter' matches the "N" of "Note".</p>

	2289 </div>

	2290

	2291 <p>Some languages may have specific rules about how to treat certain

	2292 letter combinations. In Dutch, for example, if the letter combination

	2293 "ij" appears at the beginning of a word, both letters should be

	2294 considered within the <code>::first-letter</code> pseudo-element.

	2295

	2296 <p>If the letters that would form the ::first-letter are not in the

	2297 same element, such as "'T" in <code><p>'<em>T...</code>, the UA

	2298 may create a ::first-letter pseudo-element from one of the elements,

	2299 both elements, or simply not create a pseudo-element.</p>

	2300

	2301 <p>Similarly, if the first letter(s) of the block are not at the start

	2302 of the line (for example due to bidirectional reordering), then the UA

	2303 need not create the pseudo-element(s).

	2304

	2305 <div class="example">

	2306 <p>Example:</p>

	2307 <p><a name="overlapping-example">The following example</a> illustrates

	2308 how overlapping pseudo-elements may interact. The first letter of

	2309 each P element will be green with a font size of '24pt'. The rest of

	2310 the first formatted line will be 'blue' while the rest of the

	2311 paragraph will be 'red'.</p>

	2312

	2313 <pre>p { color: red; font-size: 12pt }

	2314 p::first-letter { color: green; font-size: 200% }

	2315 p::first-line { color: blue }

	2316

	2317 <P>Some text that ends up on two lines</P></pre>

	2318

	2319 <p>Assuming that a line break will occur before the word "ends", the

	2320 <span class="index-inst" title="fictional tag sequence">fictional tag

	2321 sequence</span> for this fragment might be:</p>

	2322

	2323 <pre><P>

	2324 <P::first-line>

	2325 <P::first-letter>

	2326 S

	2327 </P::first-letter>ome text that

	2328 </P::first-line>

	2329 ends up on two lines

	2330 </P></pre>

	2331

	2332 <p>Note that the <code>::first-letter</code> element is inside the <code>::first -line</code>

	2333 element. Properties set on <code>::first-line</code> are inherited by

	2334 <code>::first-letter</code>, but are overridden if the same property is set on

	2335 <code>::first-letter</code>.</p>

	2336 </div>

	2337

	2338

	2339 <h4><a name=UIfragments>7.3.</a> <a name=selection>The ::selection pseudo-elemen t</a></h4>

	2340

	2341 <p>The <code>::selection</code> pseudo-element applies to the portion

	2342 of a document that has been highlighted by the user. This also

	2343 applies, for example, to selected text within an editable text

	2344 field. This pseudo-element should not be confused with the <code><a

	2345 href="#checked">:checked</a></code> pseudo-class (which used to be

	2346 named <code>:selected</code>)

	2347

	2348 <p>Although the <code>::selection</code> pseudo-element is dynamic in

	2349 nature, and is altered by user action, it is reasonable to expect that

	2350 when a UA re-renders to a static medium (such as a printed page, see

	2351 <a href="#refsCSS21">[CSS21]</a>) which was originally rendered to a

	2352 dynamic medium (like screen), the UA may wish to transfer the current

	2353 <code>::selection</code> state to that other medium, and have all the

	2354 appropriate formatting and rendering take effect as well. This is not

	2355 required — UAs may omit the <code>::selection</code>

	2356 pseudo-element for static media.

	2357

	2358 <p>These are the CSS properties that apply to <code>::selection</code>

	2359 pseudo-elements: color, background, cursor (optional), outline

	2360 (optional). The computed value of the 'background-image' property on

	2361 <code>::selection</code> may be ignored.

	2362

	2363

	2364 <h4><a name=gen-content>7.4. The ::before and ::after pseudo-elements</a></h4>

	2365

	2366 <p>The <code>::before</code> and <code>::after</code> pseudo-elements

	2367 can be used to describe generated content before or after an element's

	2368 content. They are explained in CSS 2.1 <a

	2369 href="#refsCSS21">[CSS21]</a>.</p>

	2370

	2371 <p>When the <code>::first-letter</code> and <code>::first-line</code>

	2372 pseudo-elements are combined with <code>::before</code> and

	2373 <code>::after</code>, they apply to the first letter or line of the

	2374 element including the inserted text.</p>

	2375

	2376 <h2><a name=combinators>8. Combinators</a></h2>

	2377

	2378 <h3><a name=descendant-combinators>8.1. Descendant combinator</a></h3>

	2379

	2380 <p>At times, authors may want selectors to describe an element that is

	2381 the descendant of another element in the document tree (e.g., "an

	2382 <code>EM</code> element that is contained within an <code>H1</code>

	2383 element"). Descendant combinators express such a relationship. A

	2384 descendant combinator is <a href="#whitespace">white space</a> that

	2385 separates two sequences of simple selectors. A selector of the form

	2386 "<code>A B</code>" represents an element <code>B</code> that is an

	2387 arbitrary descendant of some ancestor element <code>A</code>.

	2388

	2389 <div class="example">

	2390 <p>Examples:</p>

	2391 <p>For example, consider the following selector:</p>

	2392 <pre>h1 em</pre>

	2393 <p>It represents an <code>em</code> element being the descendant of

	2394 an <code>h1</code> element. It is a correct and valid, but partial,

	2395 description of the following fragment:</p>

	2396 <pre><h1>This <span class="myclass">headline

	2397 is <em>very</em> important</span></h1></pre>

	2398 <p>The following selector:</p>

	2399 <pre>div * p</pre>

	2400 <p>represents a <code>p</code> element that is a grandchild or later

	2401 descendant of a <code>div</code> element. Note the whitespace on

	2402 either side of the "*" is not part of the universal selector; the

	2403 whitespace is a combinator indicating that the DIV must be the

	2404 ancestor of some element, and that that element must be an ancestor

	2405 of the P.</p>

	2406 <p>The following selector, which combines descendant combinators and

	2407 <a href="#attribute-selectors">attribute selectors</a>, represents an

	2408 element that (1) has the <code>href</code> attribute set and (2) is

	2409 inside a <code>p</code> that is itself inside a <code>div</code>:</p>

	2410 <pre>div p *[href]</pre>

	2411 </div>

	2412

	2413 <h3><a name=child-combinators>8.2. Child combinators</a></h3>

	2414

	2415 <p>A <dfn>child combinator</dfn> describes a childhood relationship

	2416 between two elements. A child combinator is made of the

	2417 "greater-than sign" (<code>></code>) character and

	2418 separates two sequences of simple selectors.

	2419

	2420

	2421 <div class="example">

	2422 <p>Examples:</p>

	2423 <p>The following selector represents a <code>p</code> element that is

	2424 child of <code>body</code>:</p>

	2425 <pre>body > p</pre>

	2426 <p>The following example combines descendant combinators and child

	2427 combinators.</p>

	2428 <pre>div ol>li p</pre><!-- LEAVE THOSE SPACES OUT! see below -->

	2429 <p>It represents a <code>p</code> element that is a descendant of an

	2430 <code>li</code> element; the <code>li</code> element must be the

	2431 child of an <code>ol</code> element; the <code>ol</code> element must

	2432 be a descendant of a <code>div</code>. Notice that the optional white

	2433 space around the ">" combinator has been left out.</p>

	2434 </div>

	2435

	2436 <p>For information on selecting the first child of an element, please

	2437 see the section on the <code><a

	2438 href="#structural-pseudos">:first-child</a></code> pseudo-class

	2439 above.</p>

	2440

	2441 <h3><a name=sibling-combinators>8.3. Sibling combinators</a></h3>

	2442

	2443 <p>There are two different sibling combinators: the adjacent sibling

	2444 combinator and the general sibling combinator. In both cases,

	2445 non-element nodes (e.g. text between elements) are ignored when

	2446 considering adjacency of elements.</p>

	2447

	2448 <h4><a name=adjacent-sibling-combinators>8.3.1. Adjacent sibling combinator</a>< /h4>

	2449

	2450 <p>The adjacent sibling combinator is made of the "plus

	2451 sign" (U+002B, <code>+</code>) character that separates two

	2452 sequences of simple selectors. The elements represented by the two

	2453 sequences share the same parent in the document tree and the element

	2454 represented by the first sequence immediately precedes the element

	2455 represented by the second one.</p>

	2456

	2457 <div class="example">

	2458 <p>Examples:</p>

	2459 <p>The following selector represents a <code>p</code> element

	2460 immediately following a <code>math</code> element:</p>

	2461 <pre>math + p</pre>

	2462 <p>The following selector is conceptually similar to the one in the

	2463 previous example, except that it adds an attribute selector — it

	2464 adds a constraint to the <code>h1</code> element, that it must have

	2465 <code>class="opener"</code>:</p>

	2466 <pre>h1.opener + h2</pre>

	2467 </div>

	2468

	2469

	2470 <h4><a name=general-sibling-combinators>8.3.2. General sibling combinator</a></h 4>

	2471

	2472 <p>The general sibling combinator is made of the "tilde"

	2473 (U+007E, <code>~</code>) character that separates two sequences of

	2474 simple selectors. The elements represented by the two sequences share

	2475 the same parent in the document tree and the element represented by

	2476 the first sequence precedes (not necessarily immediately) the element

	2477 represented by the second one.</p>

	2478

	2479 <div class="example">

	2480 <p>Example:</p>

	2481 <pre>h1 ~ pre</pre>

	2482 <p>represents a <code>pre</code> element following an <code>h1</code>. It

	2483 is a correct and valid, but partial, description of:</p>

	2484 <pre><h1>Definition of the function a</h1>

	2485 <p>Function a(x) has to be applied to all figures in the table.</p>

	2486 <pre>function a(x) = 12x/13.5</pre></pre>

	2487 </div>

	2488

	2489 <h2><a name=specificity>9. Calculating a selector's specificity</a></h2>

	2490

	2491 <p>A selector's specificity is calculated as follows:</p>

	2492

	2493 <ul>

	2494 <li>count the number of ID selectors in the selector (= a)</li>

	2495 <li>count the number of class selectors, attributes selectors, and pseudo-clas ses in the selector (= b)</li>

	2496 <li>count the number of element names in the selector (= c)</li>

	2497 <li>ignore pseudo-elements</li>

	2498 </ul>

	2499

	2500 <p>Selectors inside <a href="#negation">the negation pseudo-class</a>

	2501 are counted like any other, but the negation itself does not count as

	2502 a pseudo-class.</p>

	2503

	2504 <p>Concatenating the three numbers a-b-c (in a number system with a

	2505 large base) gives the specificity.</p>

	2506

	2507 <div class="example">

	2508 <p>Examples:</p>

	2509 <pre>* /* a=0 b=0 c=0 -> specificity = 0 */

	2510 LI /* a=0 b=0 c=1 -> specificity = 1 */

	2511 UL LI /* a=0 b=0 c=2 -> specificity = 2 */

	2512 UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */

	2513 H1 + [REL=up] / a=0 b=1 c=1 -> specificity = 11 */

	2514 UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */

	2515 LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */

	2516 #x34y /* a=1 b=0 c=0 -> specificity = 100 */

	2517 #s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */

	2518 </pre>

	2519 </div>

	2520

	2521 <p class="note"><strong>Note:</strong> the specificity of the styles

	2522 specified in an HTML <code>style</code> attribute is described in CSS

	2523 2.1. <a href="#refsCSS21">[CSS21]</a>.</p>

	2524

	2525 <h2><a name=w3cselgrammar>10. The grammar of Selectors</a></h2>

	2526

	2527 <h3><a name=grammar>10.1. Grammar</a></h3>

	2528

	2529 <p>The grammar below defines the syntax of Selectors. It is globally

	2530 LL(1) and can be locally LL(2) (but note that most UA's should not use

	2531 it directly, since it doesn't express the parsing conventions). The

	2532 format of the productions is optimized for human consumption and some

	2533 shorthand notations beyond Yacc (see <a href="#refsYACC">[YACC]</a>)

	2534 are used:</p>

	2535

	2536 <ul>

	2537 <li><b>*</b>: 0 or more

	2538 <li><b>+</b>: 1 or more

	2539 <li><b>?</b>: 0 or 1

	2540 <li><b>\|</b>: separates alternatives

	2541 <li><b>[ ]</b>: grouping </li>

	2542 </ul>

	2543

	2544 <p>The productions are:</p>

	2545

	2546 <pre>selectors_group

	2547 : selector [ COMMA S* selector ]*

	2548 ;

	2549

	2550 selector

	2551 : simple_selector_sequence [ combinator simple_selector_sequence ]*

	2552 ;

	2553

	2554 combinator

	2555 /* combinators can be surrounded by white space */

	2556 : PLUS S* \| GREATER S* \| TILDE S* \| S+

	2557 ;

	2558

	2559 simple_selector_sequence

	2560 : [ type_selector \| universal ]

	2561 [ HASH \| class \| attrib \| pseudo \| negation ]*

	2562 \| [ HASH \| class \| attrib \| pseudo \| negation ]+

	2563 ;

	2564

	2565 type_selector

	2566 : [ namespace_prefix ]? element_name

	2567 ;

	2568

	2569 namespace_prefix

	2570 : [ IDENT \| '*' ]? '\|'

	2571 ;

	2572

	2573 element_name

	2574 : IDENT

	2575 ;

	2576

	2577 universal

	2578 : [ namespace_prefix ]? '*'

	2579 ;

	2580

	2581 class

	2582 : '.' IDENT

	2583 ;

	2584

	2585 attrib

	2586 : '[' S* [ namespace_prefix ]? IDENT S*

	2587 [ [ PREFIXMATCH \|

	2588 SUFFIXMATCH \|

	2589 SUBSTRINGMATCH \|

	2590 '=' \|

	2591 INCLUDES \|

	2592 DASHMATCH ] S* [ IDENT \| STRING ] S*

	2593 ]? ']'

	2594 ;

	2595

	2596 pseudo

	2597 /* '::' starts a pseudo-element, ':' a pseudo-class */

	2598 /* Exceptions: :first-line, :first-letter, :before and :after. */

	2599 /* Note that pseudo-elements are restricted to one per selector and */

	2600 /* occur only in the last simple_selector_sequence. */

	2601 : ':' ':'? [ IDENT \| functional_pseudo ]

	2602 ;

	2603

	2604 functional_pseudo

	2605 : FUNCTION S* expression ')'

	2606 ;

	2607

	2608 expression

	2609 /* In CSS3, the expressions are identifiers, strings, */

	2610 /* or of the form "an+b" */

	2611 : [ [ PLUS \| '-' \| DIMENSION \| NUMBER \| STRING \| IDENT ] S* ]+

	2612 ;

	2613

	2614 negation

	2615 : NOT S* negation_arg S* ')'

	2616 ;

	2617

	2618 negation_arg

	2619 : type_selector \| universal \| HASH \| class \| attrib \| pseudo

	2620 ;</pre>

	2621

	2622

	2623 <h3><a name=lex>10.2. Lexical scanner</a></h3>

	2624

	2625 <p>The following is the <a name=x3>tokenizer</a>, written in Flex (see

	2626 <a href="#refsFLEX">[FLEX]</a>) notation. The tokenizer is

	2627 case-insensitive.</p>

	2628

	2629 <p>The two occurrences of "\377" represent the highest character

	2630 number that current versions of Flex can deal with (decimal 255). They

	2631 should be read as "\4177777" (decimal 1114111), which is the highest

	2632 possible code point in Unicode/ISO-10646. <a

	2633 href="#refsUNICODE">[UNICODE]</a></p>

	2634

	2635 <pre>%option case-insensitive

	2636

	2637 ident [-]?{nmstart}{nmchar}*

	2638 name {nmchar}+

	2639 nmstart [_a-z]\|{nonascii}\|{escape}

	2640 nonascii [^\0-\177]

	2641 unicode \\[0-9a-f]{1,6}(\r\n\|[ \n\r\t\f])?

	2642 escape {unicode}\|\\[^\n\r\f0-9a-f]

	2643 nmchar [_a-z0-9-]\|{nonascii}\|{escape}

	2644 num [0-9]+\|[0-9]*\.[0-9]+

	2645 string {string1}\|{string2}

	2646 string1 \"([^\n\r\f\\"]\|\\{nl}\|{nonascii}\|{escape})*\"

	2647 string2 \'([^\n\r\f\\']\|\\{nl}\|{nonascii}\|{escape})*\'

	2648 invalid {invalid1}\|{invalid2}

	2649 invalid1 \"([^\n\r\f\\"]\|\\{nl}\|{nonascii}\|{escape})*

	2650 invalid2 \'([^\n\r\f\\']\|\\{nl}\|{nonascii}\|{escape})*

	2651 nl \n\|\r\n\|\r\|\f

	2652 w [ \t\r\n\f]*

	2653

	2654 %%

	2655

	2656 [ \t\r\n\f]+ return S;

	2657

	2658 "~=" return INCLUDES;

	2659 "\|=" return DASHMATCH;

	2660 "^=" return PREFIXMATCH;

	2661 "$=" return SUFFIXMATCH;

	2662 "*=" return SUBSTRINGMATCH;

	2663 {ident} return IDENT;

	2664 {string} return STRING;

	2665 {ident}"(" return FUNCTION;

	2666 {num} return NUMBER;

	2667 "#"{name} return HASH;

	2668 {w}"+" return PLUS;

	2669 {w}">" return GREATER;

	2670 {w}"," return COMMA;

	2671 {w}"~" return TILDE;

	2672 ":not(" return NOT;

	2673 @{ident} return ATKEYWORD;

	2674 {invalid} return INVALID;

	2675 {num}% return PERCENTAGE;

	2676 {num}{ident} return DIMENSION;

	2677 "<!--" return CDO;

	2678 "-->" return CDC;

	2679

	2680 "url("{w}{string}{w}")" return URI;

	2681 "url("{w}([!#$%&-~]\|{nonascii}\|{escape}){w}")" return URI;

	2682 U\+[0-9a-f?]{1,6}(-[0-9a-f]{1,6})? return UNICODE_RANGE;

	2683

	2684 \/\[^]\+([^/][^]\+)\/ / ignore comments */

	2685

	2686 . return *yytext;</pre>

	2687

	2688

	2689

	2690 <h2><a name=downlevel>11. Namespaces and down-level clients</a></h2>

	2691

	2692 <p>An important issue is the interaction of CSS selectors with XML

	2693 documents in web clients that were produced prior to this

	2694 document. Unfortunately, due to the fact that namespaces must be

	2695 matched based on the URI which identifies the namespace, not the

	2696 namespace prefix, some mechanism is required to identify namespaces in

	2697 CSS by their URI as well. Without such a mechanism, it is impossible

	2698 to construct a CSS style sheet which will properly match selectors in

	2699 all cases against a random set of XML documents. However, given

	2700 complete knowledge of the XML document to which a style sheet is to be

	2701 applied, and a limited use of namespaces within the XML document, it

	2702 is possible to construct a style sheet in which selectors would match

	2703 elements and attributes correctly.</p>

	2704

	2705 <p>It should be noted that a down-level CSS client will (if it

	2706 properly conforms to CSS forward compatible parsing rules) ignore all

	2707 <code>@namespace</code> at-rules, as well as all style rules that make

	2708 use of namespace qualified element type or attribute selectors. The

	2709 syntax of delimiting namespace prefixes in CSS was deliberately chosen

	2710 so that down-level CSS clients would ignore the style rules rather

	2711 than possibly match them incorrectly.</p>

	2712

	2713 <p>The use of default namespaces in CSS makes it possible to write

	2714 element type selectors that will function in both namespace aware CSS

	2715 clients as well as down-level clients. It should be noted that

	2716 down-level clients may incorrectly match selectors against XML

	2717 elements in other namespaces.</p>

	2718

	2719 <p>The following are scenarios and examples in which it is possible to

	2720 construct style sheets which would function properly in web clients

	2721 that do not implement this proposal.</p>

	2722

	2723 <ol>

	2724 <li>

	2725

	2726 <p>The XML document does not use namespaces.</p>

	2727

	2728 <ul>

	2729

	2730 <li>In this case, it is obviously not necessary to declare or use

	2731 namespaces in the style sheet. Standard CSS element type and

	2732 attribute selectors will function adequately in a down-level

	2733 client.</li>

	2734

	2735 <li>In a CSS namespace aware client, the default behavior of

	2736 element selectors matching without regard to namespace will

	2737 function properly against all elements, since no namespaces are

	2738 present. However, the use of specific element type selectors that

	2739 match only elements that have no namespace ("<code>\|name</code>")

	2740 will guarantee that selectors will match only XML elements that do

	2741 not have a declared namespace. </li>

	2742

	2743 </ul>

	2744

	2745 </li>

	2746

	2747 <li>

	2748

	2749 <p>The XML document defines a single, default namespace used

	2750 throughout the document. No namespace prefixes are used in element

	2751 names.</p>

	2752

	2753 <ul>

	2754

	2755 <li>In this case, a down-level client will function as if

	2756 namespaces were not used in the XML document at all. Standard CSS

	2757 element type and attribute selectors will match against all

	2758 elements. </li>

	2759

	2760 </ul>

	2761

	2762 </li>

	2763

	2764 <li>

	2765

	2766 <p>The XML document does <b>not</b> use a default namespace, all

	2767 namespace prefixes used are known to the style sheet author, and

	2768 there is a direct mapping between namespace prefixes and namespace

	2769 URIs. (A given prefix may only be mapped to one namespace URI

	2770 throughout the XML document; there may be multiple prefixes mapped

	2771 to the same URI).</p>

	2772

	2773 <ul>

	2774

	2775 <li>In this case, the down-level client will view and match

	2776 element type and attribute selectors based on their fully

	2777 qualified name, not the local part as outlined in the <a

	2778 href="#typenmsp">Type selectors and Namespaces</a> section. CSS

	2779 selectors may be declared using an escaped colon "<code>\:</code>"

	2780 to describe the fully qualified names, e.g.

	2781 "<code>html\:h1</code>" will match

	2782 <code><html:h1></code>. Selectors using the qualified name

	2783 will only match XML elements that use the same prefix. Other

	2784 namespace prefixes used in the XML that are mapped to the same URI

	2785 will not match as expected unless additional CSS style rules are

	2786 declared for them.</li>

	2787

	2788 <li>Note that selectors declared in this fashion will

	2789 <em>only</em> match in down-level clients. A CSS namespace aware

	2790 client will match element type and attribute selectors based on

	2791 the name's local part. Selectors declared with the fully

	2792 qualified name will not match (unless there is no namespace prefix

	2793 in the fully qualified name).</li>

	2794

	2795 </ul>

	2796

	2797 </li>

	2798

	2799 </ol>

	2800

	2801 <p>In other scenarios: when the namespace prefixes used in the XML are

	2802 not known in advance by the style sheet author; or a combination of

	2803 elements with no namespace are used in conjunction with elements using

	2804 a default namespace; or the same namespace prefix is mapped to

	2805 <em>different</em> namespace URIs within the same document, or in

	2806 different documents; it is impossible to construct a CSS style sheet

	2807 that will function properly against all elements in those documents,

	2808 unless, the style sheet is written using a namespace URI syntax (as

	2809 outlined in this document or similar) and the document is processed by

	2810 a CSS and XML namespace aware client.</p>

	2811

	2812 <h2><a name=profiling>12. Profiles</a></h2>

	2813

	2814 <p>Each specification using Selectors must define the subset of W3C

	2815 Selectors it allows and excludes, and describe the local meaning of

	2816 all the components of that subset.</p>

	2817

	2818 <p>Non normative examples:

	2819

	2820 <div class="profile">

	2821 <table class="tprofile">

	2822 <tbody>

	2823 <tr>

	2824 <th class="title" colspan=2>Selectors profile</th></tr>

	2825 <tr>

	2826 <th>Specification</th>

	2827 <td>CSS level 1</td></tr>

	2828 <tr>

	2829 <th>Accepts</th>

	2830 <td>type selectors<br>class selectors<br>ID selectors<br>:link,

	2831 :visited and :active pseudo-classes<br>descendant combinator

	2832 <br>::first-line and ::first-letter pseudo-elements</td></tr>

	2833 <tr>

	2834 <th>Excludes</th>

	2835 <td>

	2836

	2837 <p>universal selector<br>attribute selectors<br>:hover and :focus

	2838 pseudo-classes<br>:target pseudo-class<br>:lang() pseudo-class<br>all UI

	2839 element states pseudo-classes<br>all structural

	2840 pseudo-classes<br>negation pseudo-class<br>all

	2841 UI element fragments pseudo-elements<br>::before and ::after

	2842 pseudo-elements<br>child combinators<br>sibling combinators

	2843

	2844 <p>namespaces</td></tr>

	2845 <tr>

	2846 <th>Extra constraints</th>

	2847 <td>only one class selector allowed per sequence of simple

	2848 selectors</td></tr></tbody></table><br><br>

	2849 <table class="tprofile">

	2850 <tbody>

	2851 <tr>

	2852 <th class="title" colspan=2>Selectors profile</th></tr>

	2853 <tr>

	2854 <th>Specification</th>

	2855 <td>CSS level 2</td></tr>

	2856 <tr>

	2857 <th>Accepts</th>

	2858 <td>type selectors<br>universal selector<br>attribute presence and

	2859 values selectors<br>class selectors<br>ID selectors<br>:link, :visited,

	2860 :active, :hover, :focus, :lang() and :first-child pseudo-classes

	2861 <br>descendant combinator<br>child combinator<br>adjacent sibling

	2862 combinator<br>::first-line and ::first-letter pseudo-elements<br>::before

	2863 and ::after pseudo-elements</td></tr>

	2864 <tr>

	2865 <th>Excludes</th>

	2866 <td>

	2867

	2868 <p>content selectors<br>substring matching attribute

	2869 selectors<br>:target pseudo-classes<br>all UI element

	2870 states pseudo-classes<br>all structural pseudo-classes other

	2871 than :first-child<br>negation pseudo-class<br>all UI element

	2872 fragments pseudo-elements<br>general sibling combinators

	2873

	2874 <p>namespaces</td></tr>

	2875 <tr>

	2876 <th>Extra constraints</th>

	2877 <td>more than one class selector per sequence of simple selectors (CSS1

	2878 constraint) allowed</td></tr></tbody></table>

	2879

	2880 <p>In CSS, selectors express pattern matching rules that determine which style

	2881 rules apply to elements in the document tree.

	2882

	2883 <p>The following selector (CSS level 2) will <b>match</b> all anchors <code>a</c ode>

	2884 with attribute <code>name</code> set inside a section 1 header <code>h1</code>:

	2885 <pre>h1 a[name]</pre>

	2886

	2887 <p>All CSS declarations attached to such a selector are applied to elements

	2888 matching it. </div>

	2889

	2890 <div class="profile">

	2891 <table class="tprofile">

	2892 <tbody>

	2893 <tr>

	2894 <th class="title" colspan=2>Selectors profile</th></tr>

	2895 <tr>

	2896 <th>Specification</th>

	2897 <td>STTS 3</td>

	2898 </tr>

	2899 <tr>

	2900 <th>Accepts</th>

	2901 <td>

	2902

	2903 <p>type selectors<br>universal selectors<br>attribute selectors<br>class

	2904 selectors<br>ID selectors<br>all structural pseudo-classes<br>

	2905 all combinators

	2906

	2907 <p>namespaces</td></tr>

	2908 <tr>

	2909 <th>Excludes</th>

	2910 <td>non-accepted pseudo-classes<br>pseudo-elements<br></td></tr>

	2911 <tr>

	2912 <th>Extra constraints</th>

	2913 <td>some selectors and combinators are not allowed in fragment

	2914 descriptions on the right side of STTS declarations.</td></tr></tbody></ta ble>

	2915 <form>

	2916 <input type="text" name="test10"/>

	2917 <input type="text" name="foo"/>

	2918 <input type="text" name="foo"/>

	2919 <input type="text" name="foo"/>

	2920 <input type="text" name="foo"/>

	2921 <input type="text" name="foo"/>

	2922 <input type="text" name="foo"/>

	2923 <input type="text" name="foo"/>

	2924 <input type="text" name="foo"/>

	2925 <input type="text" name="foo"/>

	2926 <input type="text" name="foo"/>

	2927 <input type="text" name="foo"/>

	2928 <input type="text" name="foo"/>

	2929 <input type="text" name="foo"/>

	2930 <input type="text" name="foo"/>

	2931 <input type="text" name="foo"/>

	2932 <input type="text" name="foo"/>

	2933 <input type="text" name="foo"/>

	2934 <input type="text" name="foo"/>

	2935 <input type="text" name="foo"/>

	2936 <input type="text" name="foo"/>

	2937 <input type="text" name="foo"/>

	2938 <input type="text" name="foo"/>

	2939 <input type="text" name="foo"/>

	2940 <input type="text" name="foo"/>

	2941 </form>

	2942

	2943 <p>Selectors can be used in STTS 3 in two different

	2944 manners:

	2945 <ol>

	2946 <li>a selection mechanism equivalent to CSS selection mechanism: declarations

	2947 attached to a given selector are applied to elements matching that selector,

	2948 <li>fragment descriptions that appear on the right side of declarations.

	2949 </li></ol></div>

	2950

	2951 <h2><a name=Conformance></a>13. Conformance and requirements</h2>

	2952

	2953 <p>This section defines conformance with the present specification only.

	2954

	2955 <p>The inability of a user agent to implement part of this specification due to

	2956 the limitations of a particular device (e.g., non interactive user agents will

	2957 probably not implement dynamic pseudo-classes because they make no sense without

	2958 interactivity) does not imply non-conformance.

	2959

	2960 <p>All specifications reusing Selectors must contain a <a

	2961 href="#profiling">Profile</a> listing the

	2962 subset of Selectors it accepts or excludes, and describing the constraints

	2963 it adds to the current specification.

	2964

	2965 <p>Invalidity is caused by a parsing error, e.g. an unrecognized token or a toke n

	2966 which is not allowed at the current parsing point.

	2967

	2968 <p>User agents must observe the rules for handling parsing errors:

	2969 <ul>

	2970 <li>a simple selector containing an undeclared namespace prefix is invalid</li >

	2971 <li>a selector containing an invalid simple selector, an invalid combinator

	2972 or an invalid token is invalid. </li>

	2973 <li>a group of selectors containing an invalid selector is invalid.</li>

	2974 </ul>

	2975

	2976 <p class="foo test10 bar">Specifications reusing Selectors must define how to ha ndle parsing

	2977 errors. (In the case of CSS, the entire rule in which the selector is

	2978 used is dropped.)</p>

	2979

	2980 <!-- Apparently all these references are out of date:

	2981 <p>Implementations of this specification must behave as

	2982 "recipients of text data" as defined by <a href="#refsCWWW">[CWWW]</a>

	2983 when parsing selectors and attempting matches. (In particular,

	2984 implementations must assume the data is normalized and must not

	2985 normalize it.) Normative rules for matching strings are defined in

	2986 <a href="#refsCWWW">[CWWW]</a> and <a

	2987 href="#refsUNICODE">[UNICODE]</a> and apply to implementations of this

	2988 specification.</p>-->

	2989

	2990 <h2><a name=Tests></a>14. Tests</h2>

	2991

	2992 <p>This specification has <a

	2993 href="http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/">a test

	2994 suite</a> allowing user agents to verify their basic conformance to

	2995 the specification. This test suite does not pretend to be exhaustive

	2996 and does not cover all possible combined cases of Selectors.</p>

	2997

	2998 <h2><a name=ACKS></a>15. Acknowledgements</h2>

	2999

	3000 <p>The CSS working group would like to thank everyone who has sent

	3001 comments on this specification over the years.</p>

	3002

	3003 <p>The working group would like to extend special thanks to Donna

	3004 McManus, Justin Baker, Joel Sklar, and Molly Ives Brower who perfermed

	3005 the final editorial review.</p>

	3006

	3007 <h2><a name=references>16. References</a></h2>

	3008

	3009 <dl class="refs">

	3010

	3011 <dt>[CSS1]

	3012 <dd><a name=refsCSS1></a> Bert Bos, Håkon Wium Lie; "<cite>Cascading Sty le Sheets, level 1</cite>", W3C Recommendation, 17 Dec 1996, revised 11 Jan 1999

	3013 <dd>(<code><a href="http://www.w3.org/TR/REC-CSS1">http://www.w3.org/TR/REC-CS S1</a></code>)

	3014

	3015 <dt>[CSS21]

	3016 <dd><a name=refsCSS21></a> Bert Bos, Tantek Çelik, Ian Hickson, H&aring ;kon Wium Lie, editors; "<cite>Cascading Style Sheets, level 2 revision 1</cite> ", W3C Working Draft, 13 June 2005

	3017 <dd>(<code><a href="http://www.w3.org/TR/CSS21">http://www.w3.org/TR/CSS21</a> </code>)

	3018

	3019 <dt>[CWWW]

	3020 <dd><a name=refsCWWW></a> Martin J. Dürst, François Yergeau, Misha Wolf, Asmus Freytag, Tex Texin, editors; "<cite>Character Model for the World W ide Web</cite>", W3C Recommendation, 15 February 2005

	3021 <dd>(<code><a href="http://www.w3.org/TR/charmod/">http://www.w3.org/TR/charmo d/</a></code>)

	3022

	3023 <dt>[FLEX]

	3024 <dd><a name="refsFLEX"></a> "<cite>Flex: The Lexical Scanner Generator</cite>" , Version 2.3.7, ISBN 1882114213

	3025

	3026 <dt>[HTML4]

	3027 <dd><a name="refsHTML4"></a> Dave Ragget, Arnaud Le Hors, Ian Jacobs, editors; "<cite>HTML 4.01 Specification</cite>", W3C Recommendation, 24 December 1999

	3028 <dd>(<a href="http://www.w3.org/TR/html4/"><code>http://www.w3.org/TR/html4/</ code></a>)

	3029

	3030 <dt>[MATH]

	3031 <dd><a name="refsMATH"></a> Patrick Ion, Robert Miner, editors; "<cite>Mathema tical Markup Language (MathML) 1.01</cite>", W3C Recommendation, revision of 7 J uly 1999

	3032 <dd>(<code><a href="http://www.w3.org/TR/REC-MathML/">http://www.w3.org/TR/REC -MathML/</a></code>)

	3033

	3034 <dt>[RFC3066]

	3035 <dd><a name="refsRFC3066"></a> H. Alvestrand; "<cite>Tags for the Identificati on of Languages</cite>", Request for Comments 3066, January 2001

	3036 <dd>(<a href="http://www.ietf.org/rfc/rfc3066.txt"><code>http://www.ietf.org/r fc/rfc3066.txt</code></a>)

	3037

	3038 <dt>[STTS]

	3039 <dd><a name=refsSTTS></a> Daniel Glazman; "<cite>Simple Tree Transformation Sh eets 3</cite>", Electricité de France, submission to the W3C, 11 November 1998

	3040 <dd>(<code><a href="http://www.w3.org/TR/NOTE-STTS3">http://www.w3.org/TR/NOTE -STTS3</a></code>)

	3041

	3042 <dt>[SVG]

	3043 <dd><a name="refsSVG"></a> Jon Ferraiolo, 藤沢淳, Dean Jack son, editors; "<cite>Scalable Vector Graphics (SVG) 1.1 Specification</cite>", W 3C Recommendation, 14 January 2003

	3044 <dd>(<code><a href="http://www.w3.org/TR/SVG/">http://www.w3.org/TR/SVG/</a></ code>)

	3045

	3046 <dt>[UNICODE]</dt>

	3047 <dd><a name="refsUNICODE"></a> <cite><a

	3048 href="http://www.unicode.org/versions/Unicode4.1.0/">The Unicode Standard, Ve rsion 4.1</a></cite>, The Unicode Consortium. Boston, MA, Addison-Wesley, March 2005. ISBN 0-321-18578-1, as amended by <a href="http://www.unicode.org/versions /Unicode4.0.1/">Unicode 4.0.1</a> and <a href="http://www.unicode.org/versions/U nicode4.1.0/">Unicode 4.1.0</a>.

	3049 <dd>(<code><a href="http://www.unicode.org/versions/">http://www.unicode.org/v ersions/</a></code>)</dd>

	3050

	3051 <dt>[XML10]

	3052 <dd><a name="refsXML10"></a> Tim Bray, Jean Paoli, C. M. Sperberg-McQueen, Eve Maler, François Yergeau, editors; "<cite>Extensible Markup Language (XML ) 1.0 (Third Edition)</cite>", W3C Recommendation, 4 February 2004

	3053 <dd>(<a href="http://www.w3.org/TR/REC-xml/"><code>http://www.w3.org/TR/REC-xm l/</code></a>)

	3054

	3055 <dt>[XMLNAMES]

	3056 <dd><a name="refsXMLNAMES"></a> Tim Bray, Dave Hollander, Andrew Layman, edito rs; "<cite>Namespaces in XML</cite>", W3C Recommendation, 14 January 1999

	3057 <dd>(<a href="http://www.w3.org/TR/REC-xml-names/"><code>http://www.w3.org/TR/ REC-xml-names/</code></a>)

	3058

	3059 <dt>[YACC]

	3060 <dd><a name="refsYACC"></a> S. C. Johnson; "<cite>YACC — Yet another com piler compiler</cite>", Technical Report, Murray Hill, 1975

	3061

	3062 </dl>

	3063 </body>

	3064 </html>

OLD	NEW

« no previous file with comments | « chrome/test/data/dromaeo/tests/cssquery-dojo.html ('k') | chrome/test/data/dromaeo/tests/cssquery-jquery.html » ('j') | no next file with comments »