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

Side by Side Diff: chrome/test/data/dromaeo/tests/cssquery-dojo.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/dojo.js"></script>

	5 <script>

	6 window.onload = function(){

	7 startTest("cssquery-dojo", '');

	8

	9 // Try to force real results

	10 var ret, tmp;

	11

	12 var html = document.body.innerHTML;

	13 var query = dojo.query;

	14

	15 prep(function(){

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

	17 div.innerHTML = html;

	18 document.body.appendChild( div );

	19 });

	20

	21 test("Dojo - *", function(){

	22 query("*");

	23 });

	24

	25 test("Dojo - div:only-child", function(){

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

	27 });

	28

	29 test("Dojo - div:first-child", function(){

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

	31 });

	32

	33 test("Dojo - div:nth-child(even)", function(){

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

	35 });

	36

	37 test("Dojo - div:nth-child(2n)", function(){

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

	39 });

	40

	41 test("Dojo - div:nth-child(odd)", function(){

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

	43 });

	44

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

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

	47 });

	48

	49 test("Dojo - div:nth-child(n)", function(){

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

	51 });

	52

	53 test("Dojo - div:last-child", function(){

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

	55 });

	56

	57 test("Dojo - div > div", function(){

	58 query("div > div");

	59 });

	60

	61 test("Dojo - div + div", function(){

	62 query("div + div");

	63 });

	64

	65 test("Dojo - div ~ div", function(){

	66 query("div ~ div");

	67 });

	68

	69 test("Dojo - body", function(){

	70 query("body");

	71 });

	72

	73 test("Dojo - body div", function(){

	74 query("body div");

	75 });

	76

	77 test("Dojo - div", function(){

	78 query("div");

	79 });

	80

	81 test("Dojo - div div", function(){

	82 query("div div");

	83 });

	84

	85 test("Dojo - div div div", function(){

	86 query("div div div");

	87 });

	88

	89 test("Dojo - div, div, div", function(){

	90 query("div, div, div");

	91 });

	92

	93 test("Dojo - div, a, span", function(){

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

	95 });

	96

	97 test("Dojo - .dialog", function(){

	98 query(".dialog");

	99 });

	100

	101 test("Dojo - div.dialog", function(){

	102 query("div.dialog");

	103 });

	104

	105 test("Dojo - div .dialog", function(){

	106 query("div .dialog");

	107 });

	108

	109 test("Dojo - div.character, div.dialog", function(){

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

	111 });

	112

	113 test("Dojo - #speech5", function(){

	114 query("#speech5");

	115 });

	116

	117 //test("Dojo - div#speech5", function(){

	118 //query("div#speech5");

	119 //});

	120

	121 //test("Dojo - div #speech5", function(){

	122 //query("div #speech5");

	123 //});

	124

	125 test("Dojo - div.scene div.dialog", function(){

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

	127 });

	128

	129 //test("Dojo - div#scene1 div.dialog div", function(){

	130 //query("div#scene1 div.dialog div");

	131 //});

	132

	133 test("Dojo - #scene1 #speech1", function(){

	134 query("#scene1 #speech1");

	135 });

	136

	137 test("Dojo - div[class]", function(){

	138 query("div[class]");

	139 });

	140

	141 test("Dojo - div[class=dialog]", function(){

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

	143 });

	144

	145 test("Dojo - div[class^=dia]", function(){

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

	147 });

	148

	149 test("Dojo - div[class$=log]", function(){

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

	151 });

	152

	153 test("Dojo - div[class*=sce]", function(){

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

	155 });

	156

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

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

	159 });

	160

	161 test("Dojo - div[class~=dialog]", function(){

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

	163 });

	164

	165 endTest();

	166 };

	167 </script>

	168 </head>

	169 <body>

	170 <div class="head">

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

	172

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

	174

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

	176

	177 <dl>

	178

	179 <dt>This version:

	180

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

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

	183

	184 <dt>Latest version:

	185

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

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

	188

	189 <dt>Previous version:

	190

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

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

	193

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

	195

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

	197

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

	199

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

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

	202

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

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

	205

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

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

	208

	209 </dl>

	210

	211 <p class="copyright"><a

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

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

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

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

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

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

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

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

	220 <a

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

	222 <a

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

	224 <a

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

	226 use</a> rules apply.

	227

	228 <hr title="Separator for header">

	229

	230 </div>

	231

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

	233

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

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

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

	237

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

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

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

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

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

	243 style properties to elements in the document. This document

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

	245 extended selectors will be used by CSS level 3.

	246

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

	248

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

	250

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

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

	253

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

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

	256 evaluating the expression across all the elements in a

	257 subtree. <acronym title="Simple Tree Transformation

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

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

	260

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

	262

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

	264 time of its publication. Other documents may supersede this

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

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

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

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

	269

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

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

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

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

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

	275

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

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

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

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

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

	281

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

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

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

	285 document is a revision of the <a

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

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

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

	289 expected that this last call will proceed straight to Proposed

	290 Recommendation stage since it is believed that interoperability will

	291 be demonstrable.</p>

	292

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

	294 specification and return comments to the (<a

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

	296 public mailing list <a

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

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

	299 Members can also send comments directly to the CSS Working

	300 Group.

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

	302

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

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

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

	306

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

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

	309 The English version of this specification is the only normative

	310 version.

	311

	312 <div class="subtoc">

	313

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

	315

	316 <ul class="toc">

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

	318 <ul>

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

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

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

	322 </ul>

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

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

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

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

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

	328 <ul class="toc">

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

	330 <ul class="toc">

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

	332 </ul>

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

	334 <ul>

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

	336 </ul>

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

	338 <ul class="toc">

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

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

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

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

	343 </ul>

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

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

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

	347 <ul class="toc">

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

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

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

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

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

	353 <ul>

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

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

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

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

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

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

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

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

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

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

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

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

	366 </ul>

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

	368 </ul>

	369 </li>

	370 </ul>

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

	372 <ul>

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

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

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

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

	377 </ul>

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

	379 <ul class="toc">

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

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

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

	383 <ul class="toc">

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

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

	386 </ul>

	387 </li>

	388 </ul>

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

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

	391 <ul class="toc">

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

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

	394 </ul>

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

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

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

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

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

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

	401 </ul>

	402

	403 </div>

	404

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

	406

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

	408

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

	410 particular limitations or rules specific to CSS. In this

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

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

	413

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

	415

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

	417 examples, notes, and sections explicitly marked as

	418 non-normative.</p>

	419

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

	421

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

	423

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

	425 Selectors are:

	426

	427 <ul>

	428

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

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

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

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

	433 the components of this sequence</li>

	434

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

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

	437

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

	439

	440 <li>new simple selectors including substring matching attribute

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

	442

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

	444 for pseudo-elements</li>

	445

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

	447

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

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

	450 each specification</li>

	451

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

	453 specification; other specifications can now refer to this document

	454 independently of CSS</li>

	455

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

	457

	458 </ul>

	459

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

	461

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

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

	464

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

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

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

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

	469

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

	471 representations.</p>

	472

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

	474

	475 <table class="selectorsReview">

	476 <thead>

	477 <tr>

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

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

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

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

	482 <tbody>

	483 <tr>

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

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

	486 <td class="described"><a

	487 href="#universal-selector">Universal

	488 selector</a></td>

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

	490 <tr>

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

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

	493 <td class="described"><a

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

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

	496 <tr>

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

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

	499 <td class="described"><a

	500 href="#attribute-selectors">Attribute

	501 selectors</a></td>

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

	503 <tr>

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

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

	506 equal to "bar"</td>

	507 <td class="described"><a

	508 href="#attribute-selectors">Attribute

	509 selectors</a></td>

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

	511 <tr>

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

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

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

	515 <td class="described"><a

	516 href="#attribute-selectors">Attribute

	517 selectors</a></td>

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

	519 <tr>

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

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

	522 with the string "bar"</td>

	523 <td class="described"><a

	524 href="#attribute-selectors">Attribute

	525 selectors</a></td>

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

	527 <tr>

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

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

	530 with the string "bar"</td>

	531 <td class="described"><a

	532 href="#attribute-selectors">Attribute

	533 selectors</a></td>

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

	535 <tr>

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

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

	538 substring "bar"</td>

	539 <td class="described"><a

	540 href="#attribute-selectors">Attribute

	541 selectors</a></td>

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

	543 <tr>

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

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

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

	547 <td class="described"><a

	548 href="#attribute-selectors">Attribute

	549 selectors</a></td>

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

	551 <tr>

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

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

	554 <td class="described"><a

	555 href="#structural-pseudos">Structural

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

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

	558 <tr>

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

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

	561 <td class="described"><a

	562 href="#structural-pseudos">Structural

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

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

	565 <tr>

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

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

	568 from the last one</td>

	569 <td class="described"><a

	570 href="#structural-pseudos">Structural

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

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

	573 <tr>

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

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

	576 <td class="described"><a

	577 href="#structural-pseudos">Structural

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

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

	580 <tr>

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

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

	583 from the last one</td>

	584 <td class="described"><a

	585 href="#structural-pseudos">Structural

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

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

	588 <tr>

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

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

	591 <td class="described"><a

	592 href="#structural-pseudos">Structural

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

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

	595 <tr>

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

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

	598 <td class="described"><a

	599 href="#structural-pseudos">Structural

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

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

	602 <tr>

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

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

	605 <td class="described"><a

	606 href="#structural-pseudos">Structural

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

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

	609 <tr>

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

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

	612 <td class="described"><a

	613 href="#structural-pseudos">Structural

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

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

	616 <tr>

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

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

	619 <td class="described"><a

	620 href="#structural-pseudos">Structural

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

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

	623 <tr>

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

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

	626 <td class="described"><a

	627 href="#structural-pseudos">Structural

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

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

	630 <tr>

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

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

	633 nodes)</td>

	634 <td class="described"><a

	635 href="#structural-pseudos">Structural

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

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

	638 <tr>

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

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

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

	642 (:visited)</td>

	643 <td class="described"><a

	644 href="#link">The link

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

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

	647 <tr>

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

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

	650 <td class="described"><a

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

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

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

	654 <tr>

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

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

	657 <td class="described"><a

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

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

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

	661 <tr>

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

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

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

	665 <td class="described"><a

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

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

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

	669 <tr>

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

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

	672 disabled</td>

	673 <td class="described"><a

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

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

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

	677 <tr>

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

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

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

	681 <td class="described"><a

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

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

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

	685 <tr>

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

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

	688 <td class="described"><a

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

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

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

	692 <tr>

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

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

	695 <td class="described"><a

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

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

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

	699 <tr>

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

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

	702 selected/highlighted by the user</td>

	703 <td class="described"><a

	704 href="#UIfragments">The UI element

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

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

	707 <tr>

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

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

	710 <td class="described"><a

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

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

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

	714 <tr>

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

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

	717 <td class="described"><a

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

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

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

	721 <tr>

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

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

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

	725 <td class="described"><a

	726 href="#class-html">Class

	727 selectors</a></td>

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

	729 <tr>

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

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

	732 <td class="described"><a

	733 href="#id-selectors">ID

	734 selectors</a></td>

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

	736 <tr>

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

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

	739 <td class="described"><a

	740 href="#negation">Negation

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

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

	743 <tr>

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

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

	746 <td class="described"><a

	747 href="#descendant-combinators">Descendant

	748 combinator</a></td>

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

	750 <tr>

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

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

	753 <td class="described"><a

	754 href="#child-combinators">Child

	755 combinator</a></td>

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

	757 <tr>

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

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

	760 <td class="described"><a

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

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

	763 <tr>

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

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

	766 <td class="described"><a

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

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

	769

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

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

	772 column.</p>

	773

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

	775

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

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

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

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

	780

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

	782

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

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

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

	786

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

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

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

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

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

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

	793

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

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

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

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

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

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

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

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

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

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

	804 sequence of simple selectors.</p>

	805

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

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

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

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

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

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

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

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

	814 never part of white space.</p>

	815

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

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

	818 selector consisting of a single sequence of simple selectors

	819 represents any element satisfying its requirements. Prepending another

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

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

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

	823 simple selectors.</p>

	824

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

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

	827 selector</a>.</p>

	828

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

	830

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

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

	833

	834 <div class="example">

	835 <p>CSS examples:</p>

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

	837 declarations into one. Thus,</p>

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

	839 h2 { font-family: sans-serif }

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

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

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

	843 </div>

	844

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

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

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

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

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

	850 heading rules would be invalidated.</p>

	851

	852

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

	854

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

	856

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

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

	859 type in the document tree.</p>

	860

	861 <div class="example">

	862 <p>Example:</p>

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

	864 <pre>h1</pre>

	865 </div>

	866

	867

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

	869

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

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

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

	873 separated by the namespace separator "vertical bar"

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

	875

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

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

	878

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

	880 the selector represents elements in any namespace (including elements

	881 with no namespace).</p>

	882

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

	884 namespace separator), represent elements without regard to the

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

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

	887 the selector will represent only elements in the default

	888 namespace.</p>

	889

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

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

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

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

	894 in the General Syntax module.</p>

	895

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

	897 against the <a

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

	899 of the element's <a

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

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

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

	903

	904 <p>In summary:</p>

	905

	906 <dl>

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

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

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

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

	911 declared namespace</dd>

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

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

	914 <dt><code>E</code></dt>

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

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

	917 </dl>

	918

	919 <div class="example">

	920 <p>CSS examples:</p>

	921

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

	923 foo\|h1 { color: blue }

	924 foo\|* { color: yellow }

	925 \|h1 { color: red }

	926 *\|h1 { color: green }

	927 h1 { color: green }</pre>

	928

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

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

	931

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

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

	934

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

	936 any declared namespace.</p>

	937

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

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

	940

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

	942 namespace has been defined.</p>

	943

	944 </div>

	945

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

	947

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

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

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

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

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

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

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

	955

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

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

	958

	959 <div class="example">

	960 <p>Examples:</p>

	961 <ul>

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

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

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

	965 </ul>

	966 </div>

	967

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

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

	970 omitted.</p>

	971

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

	973

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

	975 is used as follows:</p>

	976

	977 <dl>

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

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

	980 <dt><code>\|</code></dt>

	981 <dd>all elements</dd>

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

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

	984 <dt><code>*</code></dt>

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

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

	987 </dl>

	988

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

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

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

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

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

	994

	995

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

	997

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

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

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

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

	1002 attribute selector.</p>

	1003

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

	1005 selectors</a></h4>

	1006

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

	1008

	1009 <dl>

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

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

	1012 the attribute.</dd>

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

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

	1015 "val".</dd>

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

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

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

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

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

	1021 spaces).</dd>

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

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

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

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

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

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

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

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

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

	1031 </dl>

	1032

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

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

	1035 the document language.</p>

	1036

	1037 <div class="example">

	1038

	1039 <p>Examples:</p>

	1040

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

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

	1043 value:</p>

	1044

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

	1046

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

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

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

	1050

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

	1052

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

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

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

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

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

	1058 "Columbus":</p>

	1059

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

	1061

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

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

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

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

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

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

	1068

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

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

	1071

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

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

	1074

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

	1076

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

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

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

	1080

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

	1082

	1083 <p>Similarly, the following selectors represents a

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

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

	1086

	1087 <pre>DIALOGUE[character=romeo]

	1088 DIALOGUE[character=juliet]</pre>

	1089

	1090 </div>

	1091

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

	1093 selectors</h4>

	1094

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

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

	1097

	1098 <dl>

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

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

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

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

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

	1104 the suffix "val".</dd>

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

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

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

	1108 </dl>

	1109

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

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

	1112 document language.</p>

	1113

	1114 <div class="example">

	1115 <p>Examples:</p>

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

	1117 image:</p>

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

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

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

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

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

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

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

	1125 </div>

	1126

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

	1128

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

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

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

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

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

	1134 apply to attributes, therefore attribute selectors without a namespace

	1135 component apply only to attributes that have no declared namespace

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

	1137 namespace prefix indicating that the selector is to match all

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

	1139

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

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

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

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

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

	1145

	1146 <div class="example">

	1147 <p>CSS examples:</p>

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

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

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

	1151 [\|att] { color: green }

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

	1153

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

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

	1156 value "val".</p>

	1157

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

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

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

	1161

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

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

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

	1165

	1166 </div>

	1167

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

	1169

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

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

	1172 elsewhere, but cannot always be selected by attribute

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

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

	1175

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

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

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

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

	1180

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

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

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

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

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

	1186

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

	1188 choose to ignore external subsets.</p>

	1189

	1190 <div class="example">

	1191 <p>Example:</p>

	1192

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

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

	1195

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

	1197

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

	1199

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

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

	1202

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

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

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

	1206

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

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

	1209

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

	1211 more specific than the tag

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

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

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

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

	1216 cases' style rules.</p>

	1217

	1218 </div>

	1219

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

	1221

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

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

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

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

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

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

	1228

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

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

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

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

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

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

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

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

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

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

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

	1240

	1241 <div class="example">

	1242 <p>CSS examples:</p>

	1243

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

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

	1246

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

	1248

	1249 <p>or just</p>

	1250

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

	1252

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

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

	1255

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

	1257

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

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

	1260

	1261 <pre><H1>Not green</H1>

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

	1263

	1264 </div>

	1265

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

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

	1268

	1269 <div class="example">

	1270

	1271 <p>CSS example:</p>

	1272

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

	1274 has been assigned a list of <a

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

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

	1277

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

	1279

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

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

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

	1283

	1284 </div>

	1285

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

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

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

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

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

	1291 practice since the structural elements of a document language often

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

	1293 not.</p>

	1294

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

	1296 class attributes, their values must be concatenated with spaces

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

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

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

	1300 this specification.</p>

	1301

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

	1303

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

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

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

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

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

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

	1310 may name ID attributes differently, but the same restriction

	1311 applies.</p>

	1312

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

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

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

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

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

	1318 identifier.</p>

	1319

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

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

	1322 information hard-coded or ask the user.

	1323

	1324 <div class="example">

	1325 <p>Examples:</p>

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

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

	1328 <pre>h1#chapter1</pre>

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

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

	1331 <pre>#chapter1</pre>

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

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

	1334 <pre>*#z98y</pre>

	1335 </div>

	1336

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

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

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

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

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

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

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

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

	1345 should use normal attribute selectors instead:

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

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

	1348

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

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

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

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

	1353

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

	1355

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

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

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

	1359

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

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

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

	1363

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

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

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

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

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

	1369 others can be applied simultaneously to the same

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

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

	1372 document.</p>

	1373

	1374

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

	1376

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

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

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

	1380

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

	1382 document tree.</p>

	1383

	1384

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

	1386

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

	1388 previously visited ones. Selectors

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

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

	1391

	1392 <ul>

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

	1394 not yet been visited.</li>

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

	1396 been visited by the user. </li>

	1397 </ul>

	1398

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

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

	1401

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

	1403

	1404 <div class="example">

	1405

	1406 <p>Example:</p>

	1407

	1408 <p>The following selector represents links carrying class

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

	1410

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

	1412

	1413 </div>

	1414

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

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

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

	1418

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

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

	1421 and unvisited links differently.</p>

	1422

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

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

	1425

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

	1427 to user actions. Selectors provides

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

	1429 acting on.</p>

	1430

	1431 <ul>

	1432

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

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

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

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

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

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

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

	1440 user agents that support <a

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

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

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

	1444

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

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

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

	1448

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

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

	1451 input). </li>

	1452

	1453 </ul>

	1454

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

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

	1457 <code>:focus</code>.</p>

	1458

	1459 <p>These pseudo-classes are not mutually exclusive. An element may

	1460 match several pseudo-classes at the same time.</p>

	1461

	1462 <p>Selectors doesn't define if the parent of an element that is

	1463 ':active' or ':hover' is also in that state.</p>

	1464

	1465 <div class="example">

	1466 <p>Examples:</p>

	1467 <pre>a:link /* unvisited links */

	1468 a:visited /* visited links */

	1469 a:hover /* user hovers */

	1470 a:active /* active links */</pre>

	1471 <p>An example of combining dynamic pseudo-classes:</p>

	1472 <pre>a:focus

	1473 a:focus:hover</pre>

	1474 <p>The last selector matches <code>a</code> elements that are in

	1475 the pseudo-class :focus and in the pseudo-class :hover.</p>

	1476 </div>

	1477

	1478 <p class="note"><strong>Note:</strong> An element can be both ':visited'

	1479 and ':active' (or ':link' and ':active').</p>

	1480

	1481 <h4><a name=target-pseudo>6.6.2. The target pseudo-class :target</a></h4>

	1482

	1483 <p>Some URIs refer to a location within a resource. This kind of URI

	1484 ends with a "number sign" (#) followed by an anchor

	1485 identifier (called the fragment identifier).</p>

	1486

	1487 <p>URIs with fragment identifiers link to a certain element within the

	1488 document, known as the target element. For instance, here is a URI

	1489 pointing to an anchor named <code>section_2</code> in an HTML

	1490 document:</p>

	1491

	1492 <pre>http://example.com/html/top.html#section_2</pre>

	1493

	1494 <p>A target element can be represented by the <code>:target</code>

	1495 pseudo-class. If the document's URI has no fragment identifier, then

	1496 the document has no target element.</p>

	1497

	1498 <div class="example">

	1499 <p>Example:</p>

	1500 <pre>p.note:target</pre>

	1501 <p>This selector represents a <code>p</code> element of class

	1502 <code>note</code> that is the target element of the referring

	1503 URI.</p>

	1504 </div>

	1505

	1506 <div class="example">

	1507 <p>CSS example:</p>

	1508 <p>Here, the <code>:target</code> pseudo-class is used to make the

	1509 target element red and place an image before it, if there is one:</p>

	1510 <pre>*:target { color : red }

	1511 *:target::before { content : url(target.png) }</pre>

	1512 </div>

	1513

	1514 <h4><a name=lang-pseudo>6.6.3. The language pseudo-class :lang</a></h4>

	1515

	1516 <p>If the document language specifies how the human language of an

	1517 element is determined, it is possible to write selectors that

	1518 represent an element based on its language. For example, in HTML <a

	1519 href="#refsHTML4">[HTML4]</a>, the language is determined by a

	1520 combination of the <code>lang</code> attribute, the <code>meta</code>

	1521 element, and possibly by information from the protocol (such as HTTP

	1522 headers). XML uses an attribute called <code>xml:lang</code>, and

	1523 there may be other document language-specific methods for determining

	1524 the language.</p>

	1525

	1526 <p>The pseudo-class <code>:lang(C)</code> represents an element that

	1527 is in language C. Whether an element is represented by a

	1528 <code>:lang()</code> selector is based solely on the identifier C

	1529 being either equal to, or a hyphen-separated substring of, the

	1530 element's language value, in the same way as if performed by the <a

	1531 href="#attribute-representation">'\|='</a> operator in attribute

	1532 selectors. The identifier C does not have to be a valid language

	1533 name.</p>

	1534

	1535 <p>C must not be empty. (If it is, the selector is invalid.)</p>

	1536

	1537 <p class="note"><strong>Note:</strong> It is recommended that

	1538 documents and protocols indicate language using codes from RFC 3066 <a

	1539 href="#refsRFC3066">[RFC3066]</a> or its successor, and by means of

	1540 "xml:lang" attributes in the case of XML-based documents <a

	1541 href="#refsXML10">[XML10]</a>. See <a

	1542 href="http://www.w3.org/International/questions/qa-lang-2or3.html">

	1543 "FAQ: Two-letter or three-letter language codes."</a></p>

	1544

	1545 <div class="example">

	1546 <p>Examples:</p>

	1547 <p>The two following selectors represent an HTML document that is in

	1548 Belgian, French, or German. The two next selectors represent

	1549 <code>q</code> quotations in an arbitrary element in Belgian, French,

	1550 or German.</p>

	1551 <pre>html:lang(fr-be)

	1552 html:lang(de)

	1553 :lang(fr-be) > q

	1554 :lang(de) > q</pre>

	1555 </div>

	1556

	1557 <h4><a name=UIstates>6.6.4. The UI element states pseudo-classes</a></h4>

	1558

	1559 <h5><a name=enableddisabled>The :enabled and :disabled pseudo-classes</a></h5>

	1560

	1561 <p>The <code>:enabled</code> pseudo-class allows authors to customize

	1562 the look of user interface elements that are enabled — which the

	1563 user can select or activate in some fashion (e.g. clicking on a button

	1564 with a mouse). There is a need for such a pseudo-class because there

	1565 is no way to programmatically specify the default appearance of say,

	1566 an enabled <code>input</code> element without also specifying what it

	1567 would look like when it was disabled.</p>

	1568

	1569 <p>Similar to <code>:enabled</code>, <code>:disabled</code> allows the

	1570 author to specify precisely how a disabled or inactive user interface

	1571 element should look.</p>

	1572

	1573 <p>Most elements will be neither enabled nor disabled. An element is

	1574 enabled if the user can either activate it or transfer the focus to

	1575 it. An element is disabled if it could be enabled, but the user cannot

	1576 presently activate it or transfer focus to it.</p>

	1577

	1578

	1579 <h5><a name=checked>The :checked pseudo-class</a></h5>

	1580

	1581 <p>Radio and checkbox elements can be toggled by the user. Some menu

	1582 items are "checked" when the user selects them. When such elements are

	1583 toggled "on" the <code>:checked</code> pseudo-class applies. The

	1584 <code>:checked</code> pseudo-class initially applies to such elements

	1585 that have the HTML4 <code>selected</code> and <code>checked</code>

	1586 attributes as described in <a

	1587 href="http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.2.1">Section

	1588 17.2.1 of HTML4</a>, but of course the user can toggle "off" such

	1589 elements in which case the <code>:checked</code> pseudo-class would no

	1590 longer apply. While the <code>:checked</code> pseudo-class is dynamic

	1591 in nature, and is altered by user action, since it can also be based

	1592 on the presence of the semantic HTML4 <code>selected</code> and

	1593 <code>checked</code> attributes, it applies to all media.

	1594

	1595

	1596 <h5><a name=indeterminate>The :indeterminate pseudo-class</a></h5>

	1597

	1598 <div class="note">

	1599

	1600 <p>Radio and checkbox elements can be toggled by the user, but are

	1601 sometimes in an indeterminate state, neither checked nor unchecked.

	1602 This can be due to an element attribute, or DOM manipulation.</p>

	1603

	1604 <p>A future version of this specification may introduce an

	1605 <code>:indeterminate</code> pseudo-class that applies to such elements.

	1606 <!--While the <code>:indeterminate</code> pseudo-class is dynamic in

	1607 nature, and is altered by user action, since it can also be based on

	1608 the presence of an element attribute, it applies to all media.</p>

	1609

	1610 <p>Components of a radio-group initialized with no pre-selected choice

	1611 are an example of :indeterminate state.--></p>

	1612

	1613 </div>

	1614

	1615

	1616 <h4><a name=structural-pseudos>6.6.5. Structural pseudo-classes</a></h4>

	1617

	1618 <p>Selectors introduces the concept of <dfn>structural

	1619 pseudo-classes</dfn> to permit selection based on extra information that lies in

	1620 the document tree but cannot be represented by other simple selectors or

	1621 combinators.

	1622

	1623 <p>Note that standalone pieces of PCDATA (text nodes in the DOM) are

	1624 not counted when calculating the position of an element in the list of

	1625 children of its parent. When calculating the position of an element in

	1626 the list of children of its parent, the index numbering starts at 1.

	1627

	1628

	1629 <h5><a name=root-pseudo>:root pseudo-class</a></h5>

	1630

	1631 <p>The <code>:root</code> pseudo-class represents an element that is

	1632 the root of the document. In HTML 4, this is always the

	1633 <code>HTML</code> element.

	1634

	1635

	1636 <h5><a name=nth-child-pseudo>:nth-child() pseudo-class</a></h5>

	1637

	1638 <p>The

	1639 <code>:nth-child(<var>a</var><code>n</code>+<var>b</var>)</code>

	1640 pseudo-class notation represents an element that has

	1641 <var>a</var><code>n</code>+<var>b</var>-1 siblings

	1642 <strong>before</strong> it in the document tree, for a given positive

	1643 integer or zero value of <code>n</code>, and has a parent element. In

	1644 other words, this matches the <var>b</var>th child of an element after

	1645 all the children have been split into groups of <var>a</var> elements

	1646 each. For example, this allows the selectors to address every other

	1647 row in a table, and could be used to alternate the color

	1648 of paragraph text in a cycle of four. The <var>a</var> and

	1649 <var>b</var> values must be zero, negative integers or positive

	1650 integers. The index of the first child of an element is 1.

	1651

	1652 <p>In addition to this, <code>:nth-child()</code> can take

	1653 '<code>odd</code>' and '<code>even</code>' as arguments instead.

	1654 '<code>odd</code>' has the same signification as <code>2n+1</code>,

	1655 and '<code>even</code>' has the same signification as <code>2n</code>.

	1656

	1657

	1658 <div class="example">

	1659 <p>Examples:</p>

	1660 <pre>tr:nth-child(2n+1) /* represents every odd row of an HTML table */

	1661 tr:nth-child(odd) /* same */

	1662 tr:nth-child(2n) /* represents every even row of an HTML table */

	1663 tr:nth-child(even) /* same */

	1664

	1665 /* Alternate paragraph colours in CSS */

	1666 p:nth-child(4n+1) { color: navy; }

	1667 p:nth-child(4n+2) { color: green; }

	1668 p:nth-child(4n+3) { color: maroon; }

	1669 p:nth-child(4n+4) { color: purple; }</pre>

	1670 </div>

	1671

	1672 <p>When <var>a</var>=0, no repeating is used, so for example

	1673 <code>:nth-child(0n+5)</code> matches only the fifth child. When

	1674 <var>a</var>=0, the <var>a</var><code>n</code> part need not be

	1675 included, so the syntax simplifies to

	1676 <code>:nth-child(<var>b</var>)</code> and the last example simplifies

	1677 to <code>:nth-child(5)</code>.

	1678

	1679 <div class="example">

	1680 <p>Examples:</p>

	1681 <pre>foo:nth-child(0n+1) /* represents an element foo, first child of its pare nt element */

	1682 foo:nth-child(1) /* same */</pre>

	1683 </div>

	1684

	1685 <p>When <var>a</var>=1, the number may be omitted from the rule.

	1686

	1687 <div class="example">

	1688 <p>Examples:</p>

	1689 <p>The following selectors are therefore equivalent:</p>

	1690 <pre>bar:nth-child(1n+0) /* represents all bar elements, specificity (0,1,1) * /

	1691 bar:nth-child(n+0) /* same */

	1692 bar:nth-child(n) /* same */

	1693 bar /* same but lower specificity (0,0,1) */</pre>

	1694 </div>

	1695

	1696 <p>If <var>b</var>=0, then every <var>a</var>th element is picked. In

	1697 such a case, the <var>b</var> part may be omitted.

	1698

	1699 <div class="example">

	1700 <p>Examples:</p>

	1701 <pre>tr:nth-child(2n+0) /* represents every even row of an HTML table */

	1702 tr:nth-child(2n) /* same */</pre>

	1703 </div>

	1704

	1705 <p>If both <var>a</var> and <var>b</var> are equal to zero, the

	1706 pseudo-class represents no element in the document tree.</p>

	1707

	1708 <p>The value <var>a</var> can be negative, but only the positive

	1709 values of <var>a</var><code>n</code>+<var>b</var>, for

	1710 <code>n</code>≥0, may represent an element in the document

	1711 tree.</p>

	1712

	1713 <div class="example">

	1714 <p>Example:</p>

	1715 <pre>html\|tr:nth-child(-n+6) /* represents the 6 first rows of XHTML tables */< /pre>

	1716 </div>

	1717

	1718 <p>When the value <var>b</var> is negative, the "+" character in the

	1719 expression must be removed (it is effectively replaced by the "-"

	1720 character indicating the negative value of <var>b</var>).</p>

	1721

	1722 <div class="example">

	1723 <p>Examples:</p>

	1724 <pre>:nth-child(10n-1) /* represents the 9th, 19th, 29th, etc, element */

	1725 :nth-child(10n+9) /* Same */

	1726 :nth-child(10n+-1) /* Syntactically invalid, and would be ignored */</pre>

	1727 </div>

	1728

	1729

	1730 <h5><a name=nth-last-child-pseudo>:nth-last-child() pseudo-class</a></h5>

	1731

	1732 <p>The <code>:nth-last-child(<var>a</var>n+<var>b</var>)</code>

	1733 pseudo-class notation represents an element that has

	1734 <var>a</var><code>n</code>+<var>b</var>-1 siblings

	1735 <strong>after</strong> it in the document tree, for a given positive

	1736 integer or zero value of <code>n</code>, and has a parent element. See

	1737 <code>:nth-child()</code> pseudo-class for the syntax of its argument.

	1738 It also accepts the '<code>even</code>' and '<code>odd</code>' values

	1739 as arguments.

	1740

	1741

	1742 <div class="example">

	1743 <p>Examples:</p>

	1744 <pre>tr:nth-last-child(-n+2) /* represents the two last rows of an HTML table */

	1745

	1746 foo:nth-last-child(odd) /* represents all odd foo elements in their parent el ement,

	1747 counting from the last one */</pre>

	1748 </div>

	1749

	1750

	1751 <h5><a name=nth-of-type-pseudo>:nth-of-type() pseudo-class</a></h5>

	1752

	1753 <p>The <code>:nth-of-type(<var>a</var>n+<var>b</var>)</code>

	1754 pseudo-class notation represents an element that has

	1755 <var>a</var><code>n</code>+<var>b</var>-1 siblings with the same

	1756 element name <strong>before</strong> it in the document tree, for a

	1757 given zero or positive integer value of <code>n</code>, and has a

	1758 parent element. In other words, this matches the <var>b</var>th child

	1759 of that type after all the children of that type have been split into

	1760 groups of a elements each. See <code>:nth-child()</code> pseudo-class

	1761 for the syntax of its argument. It also accepts the

	1762 '<code>even</code>' and '<code>odd</code>' values.

	1763

	1764

	1765 <div class="example">

	1766 <p>CSS example:</p>

	1767 <p>This allows an author to alternate the position of floated images:</p>

	1768 <pre>img:nth-of-type(2n+1) { float: right; }

	1769 img:nth-of-type(2n) { float: left; }</pre>

	1770 </div>

	1771

	1772

	1773 <h5><a name=nth-last-of-type-pseudo>:nth-last-of-type() pseudo-class</a></h5>

	1774

	1775 <p>The <code>:nth-last-of-type(<var>a</var>n+<var>b</var>)</code>

	1776 pseudo-class notation represents an element that has

	1777 <var>a</var><code>n</code>+<var>b</var>-1 siblings with the same

	1778 element name <strong>after</strong> it in the document tree, for a

	1779 given zero or positive integer value of <code>n</code>, and has a

	1780 parent element. See <code>:nth-child()</code> pseudo-class for the

	1781 syntax of its argument. It also accepts the '<code>even</code>' and '<code>odd</ code>' values.

	1782

	1783

	1784 <div class="example">

	1785 <p>Example:</p>

	1786 <p>To represent all <code>h2</code> children of an XHTML

	1787 <code>body</code> except the first and last, one could use the

	1788 following selector:</p>

	1789 <pre>body > h2:nth-of-type(n+2):nth-last-of-type(n+2)</pre>

	1790 <p>In this case, one could also use <code>:not()</code>, although the

	1791 selector ends up being just as long:</p>

	1792 <pre>body > h2:not(:first-of-type):not(:last-of-type)</pre>

	1793 </div>

	1794

	1795

	1796 <h5><a name=first-child-pseudo>:first-child pseudo-class</a></h5>

	1797

	1798 <p>Same as <code>:nth-child(1)</code>. The <code>:first-child</code> pseudo-clas s

	1799 represents an element that is the first child of some other element.

	1800

	1801

	1802 <div class="example">

	1803 <p>Examples:</p>

	1804 <p>The following selector represents a <code>p</code> element that is

	1805 the first child of a <code>div</code> element:</p>

	1806 <pre>div > p:first-child</pre>

	1807 <p>This selector can represent the <code>p</code> inside the

	1808 <code>div</code> of the following fragment:</p>

	1809 <pre><p> The last P before the note.</p>

	1810 <div class="note">

	1811 <p> The first P inside the note.</p>

	1812 </div></pre>but cannot represent the second <code>p</code> in the followin g

	1813 fragment:

	1814 <pre><p> The last P before the note.</p>

	1815 <div class="note">

	1816 <h2> Note </h2>

	1817 <p> The first P inside the note.</p>

	1818 </div></pre>

	1819 <p>The following two selectors are usually equivalent:</p>

	1820 <pre>* > a:first-child /* a is first child of any element */

	1821 a:first-child /* Same (assuming a is not the root element) */</pre>

	1822 </div>

	1823

	1824 <h5><a name=last-child-pseudo>:last-child pseudo-class</a></h5>

	1825

	1826 <p>Same as <code>:nth-last-child(1)</code>. The <code>:last-child</code> pseudo- class

	1827 represents an element that is the last child of some other element.

	1828

	1829 <div class="example">

	1830 <p>Example:</p>

	1831 <p>The following selector represents a list item <code>li</code> that

	1832 is the last child of an ordered list <code>ol</code>.

	1833 <pre>ol > li:last-child</pre>

	1834 </div>

	1835

	1836 <h5><a name=first-of-type-pseudo>:first-of-type pseudo-class</a></h5>

	1837

	1838 <p>Same as <code>:nth-of-type(1)</code>. The <code>:first-of-type</code> pseudo- class

	1839 represents an element that is the first sibling of its type in the list of

	1840 children of its parent element.

	1841

	1842 <div class="example">

	1843 <p>Example:</p>

	1844 <p>The following selector represents a definition title

	1845 <code>dt</code> inside a definition list <code>dl</code>, this

	1846 <code>dt</code> being the first of its type in the list of children of

	1847 its parent element.</p>

	1848 <pre>dl dt:first-of-type</pre>

	1849 <p>It is a valid description for the first two <code>dt</code>

	1850 elements in the following example but not for the third one:</p>

	1851 <pre><dl>

	1852 <dt>gigogne</dt>

	1853 <dd>

	1854 <dl>

	1855 <dt>fusée</dt>

	1856 <dd>multistage rocket</dd>

	1857 <dt>table</dt>

	1858 <dd>nest of tables</dd>

	1859 </dl>

	1860 </dd>

	1861 </dl></pre>

	1862 </div>

	1863

	1864 <h5><a name=last-of-type-pseudo>:last-of-type pseudo-class</a></h5>

	1865

	1866 <p>Same as <code>:nth-last-of-type(1)</code>. The

	1867 <code>:last-of-type</code> pseudo-class represents an element that is

	1868 the last sibling of its type in the list of children of its parent

	1869 element.</p>

	1870

	1871 <div class="example">

	1872 <p>Example:</p>

	1873 <p>The following selector represents the last data cell

	1874 <code>td</code> of a table row.</p>

	1875 <pre>tr > td:last-of-type</pre>

	1876 </div>

	1877

	1878 <h5><a name=only-child-pseudo>:only-child pseudo-class</a></h5>

	1879

	1880 <p>Represents an element that has a parent element and whose parent

	1881 element has no other element children. Same as

	1882 <code>:first-child:last-child</code> or

	1883 <code>:nth-child(1):nth-last-child(1)</code>, but with a lower

	1884 specificity.</p>

	1885

	1886 <h5><a name=only-of-type-pseudo>:only-of-type pseudo-class</a></h5>

	1887

	1888 <p>Represents an element that has a parent element and whose parent

	1889 element has no other element children with the same element name. Same

	1890 as <code>:first-of-type:last-of-type</code> or

	1891 <code>:nth-of-type(1):nth-last-of-type(1)</code>, but with a lower

	1892 specificity.</p>

	1893

	1894

	1895 <h5><a name=empty-pseudo></a>:empty pseudo-class</h5>

	1896

	1897 <p>The <code>:empty</code> pseudo-class represents an element that has

	1898 no children at all. In terms of the DOM, only element nodes and text

	1899 nodes (including CDATA nodes and entity references) whose data has a

	1900 non-zero length must be considered as affecting emptiness; comments,

	1901 PIs, and other nodes must not affect whether an element is considered

	1902 empty or not.</p>

	1903

	1904 <div class="example">

	1905 <p>Examples:</p>

	1906 <p><code>p:empty</code> is a valid representation of the following fragment:</p >

	1907 <pre><p></p></pre>

	1908 <p><code>foo:empty</code> is not a valid representation for the

	1909 following fragments:</p>

	1910 <pre><foo>bar</foo></pre>

	1911 <pre><foo><bar>bla</bar></foo></pre>

	1912 <pre><foo>this is not <bar>:empty</bar></foo></pre>

	1913 </div>

	1914

	1915 <h4><a name=content-selectors>6.6.6. Blank</a></h4> <!-- It's the Return of Appe ndix H!!! Run away! -->

	1916

	1917 <p>This section intentionally left blank.</p>

	1918 <!-- (used to be :contains()) -->

	1919

	1920 <h4><a name=negation></a>6.6.7. The negation pseudo-class</h4>

	1921

	1922 <p>The negation pseudo-class, <code>:not(<var>X</var>)</code>, is a

	1923 functional notation taking a <a href="#simple-selectors-dfn">simple

	1924 selector</a> (excluding the negation pseudo-class itself and

	1925 pseudo-elements) as an argument. It represents an element that is not

	1926 represented by the argument.

	1927

	1928 <!-- pseudo-elements are not simple selectors, so the above paragraph

	1929 may be a bit confusing -->

	1930

	1931 <div class="example">

	1932 <p>Examples:</p>

	1933 <p>The following CSS selector matches all <code>button</code>

	1934 elements in an HTML document that are not disabled.</p>

	1935 <pre>button:not([DISABLED])</pre>

	1936 <p>The following selector represents all but <code>FOO</code>

	1937 elements.</p>

	1938 <pre>*:not(FOO)</pre>

	1939 <p>The following group of selectors represents all HTML elements

	1940 except links.</p>

	1941 <pre>html\|*:not(:link):not(:visited)</pre>

	1942 </div>

	1943

	1944 <p>Default namespace declarations do not affect the argument of the

	1945 negation pseudo-class unless the argument is a universal selector or a

	1946 type selector.</p>

	1947

	1948 <div class="example">

	1949 <p>Examples:</p>

	1950 <p>Assuming that the default namespace is bound to

	1951 "http://example.com/", the following selector represents all

	1952 elements that are not in that namespace:</p>

	1953 <pre>\|:not(*)</pre>

	1954 <p>The following CSS selector matches any element being hovered,

	1955 regardless of its namespace. In particular, it is not limited to

	1956 only matching elements in the default namespace that are not being

	1957 hovered, and elements not in the default namespace don't match the

	1958 rule when they <em>are</em> being hovered.</p>

	1959 <pre>\|:not(:hover)</pre>

	1960 </div>

	1961

	1962 <p class="note"><strong>Note</strong>: the :not() pseudo allows

	1963 useless selectors to be written. For instance <code>:not(\|)</code>,

	1964 which represents no element at all, or <code>foo:not(bar)</code>,

	1965 which is equivalent to <code>foo</code> but with a higher

	1966 specificity.</p>

	1967

	1968 <h3><a name=pseudo-elements>7. Pseudo-elements</a></h3>

	1969

	1970 <p>Pseudo-elements create abstractions about the document tree beyond

	1971 those specified by the document language. For instance, document

	1972 languages do not offer mechanisms to access the first letter or first

	1973 line of an element's content. Pseudo-elements allow designers to refer

	1974 to this otherwise inaccessible information. Pseudo-elements may also

	1975 provide designers a way to refer to content that does not exist in the

	1976 source document (e.g., the <code>::before</code> and

	1977 <code>::after</code> pseudo-elements give access to generated

	1978 content).</p>

	1979

	1980 <p>A pseudo-element is made of two colons (<code>::</code>) followed

	1981 by the name of the pseudo-element.</p>

	1982

	1983 <p>This <code>::</code> notation is introduced by the current document

	1984 in order to establish a discrimination between pseudo-classes and

	1985 pseudo-elements. For compatibility with existing style sheets, user

	1986 agents must also accept the previous one-colon notation for

	1987 pseudo-elements introduced in CSS levels 1 and 2 (namely,

	1988 <code>:first-line</code>, <code>:first-letter</code>,

	1989 <code>:before</code> and <code>:after</code>). This compatibility is

	1990 not allowed for the new pseudo-elements introduced in CSS level 3.</p>

	1991

	1992 <p>Only one pseudo-element may appear per selector, and if present it

	1993 must appear after the sequence of simple selectors that represents the

	1994 <a href="#subject">subjects</a> of the selector. <span class="note">A

	1995 future version of this specification may allow multiple

	1996 pesudo-elements per selector.</span></p>

	1997

	1998 <h4><a name=first-line>7.1. The ::first-line pseudo-element</a></h4>

	1999

	2000 <p>The <code>::first-line</code> pseudo-element describes the contents

	2001 of the first formatted line of an element.

	2002

	2003 <div class="example">

	2004 <p>CSS example:</p>

	2005 <pre>p::first-line { text-transform: uppercase }</pre>

	2006 <p>The above rule means "change the letters of the first line of every

	2007 paragraph to uppercase".</p>

	2008 </div>

	2009

	2010 <p>The selector <code>p::first-line</code> does not match any real

	2011 HTML element. It does match a pseudo-element that conforming user

	2012 agents will insert at the beginning of every paragraph.</p>

	2013

	2014 <p>Note that the length of the first line depends on a number of

	2015 factors, including the width of the page, the font size, etc. Thus,

	2016 an ordinary HTML paragraph such as:</p>

	2017

	2018 <pre>

	2019 <P>This is a somewhat long HTML

	2020 paragraph that will be broken into several

	2021 lines. The first line will be identified

	2022 by a fictional tag sequence. The other lines

	2023 will be treated as ordinary lines in the

	2024 paragraph.</P>

	2025 </pre>

	2026

	2027 <p>the lines of which happen to be broken as follows:

	2028

	2029 <pre>

	2030 THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT

	2031 will be broken into several lines. The first

	2032 line will be identified by a fictional tag

	2033 sequence. The other lines will be treated as

	2034 ordinary lines in the paragraph.

	2035 </pre>

	2036

	2037 <p>This paragraph might be "rewritten" by user agents to include the

	2038 <em>fictional tag sequence</em> for <code>::first-line</code>. This

	2039 fictional tag sequence helps to show how properties are inherited.</p>

	2040

	2041 <pre>

	2042 <P><b><P::first-line></b> This is a somewhat long HTML

	2043 paragraph that <b></P::first-line></b> will be broken into several

	2044 lines. The first line will be identified

	2045 by a fictional tag sequence. The other lines

	2046 will be treated as ordinary lines in the

	2047 paragraph.</P>

	2048 </pre>

	2049

	2050 <p>If a pseudo-element breaks up a real element, the desired effect

	2051 can often be described by a fictional tag sequence that closes and

	2052 then re-opens the element. Thus, if we mark up the previous paragraph

	2053 with a <code>span</code> element:</p>

	2054

	2055 <pre>

	2056 <P><b><SPAN class="test"></b> This is a somewhat long HTML

	2057 paragraph that will be broken into several

	2058 lines.<b></SPAN></b> The first line will be identified

	2059 by a fictional tag sequence. The other lines

	2060 will be treated as ordinary lines in the

	2061 paragraph.</P>

	2062 </pre>

	2063

	2064 <p>the user agent could simulate start and end tags for

	2065 <code>span</code> when inserting the fictional tag sequence for

	2066 <code>::first-line</code>.

	2067

	2068 <pre>

	2069 <P><P::first-line><b><SPAN class="test"></b> This is a

	2070 somewhat long HTML

	2071 paragraph that will <b></SPAN></b></P::first-line><b><SPAN class= "test"></b> be

	2072 broken into several

	2073 lines.<b></SPAN></b> The first line will be identified

	2074 by a fictional tag sequence. The other lines

	2075 will be treated as ordinary lines in the

	2076 paragraph.</P>

	2077 </pre>

	2078

	2079 <p>In CSS, the <code>::first-line</code> pseudo-element can only be

	2080 attached to a block-level element, an inline-block, a table-caption,

	2081 or a table-cell.</p>

	2082

	2083 <p><a name="first-formatted-line"></a>The "first formatted line" of an

	2084 element may occur inside a

	2085 block-level descendant in the same flow (i.e., a block-level

	2086 descendant that is not positioned and not a float). E.g., the first

	2087 line of the <code>div</code> in <code><DIV><P>This

	2088 line...</P>&lt/DIV></code> is the first line of the <code>p</code> (assuming

	2089 that both <code>p</code> and <code>div</code> are block-level).

	2090

	2091 <p>The first line of a table-cell or inline-block cannot be the first

	2092 formatted line of an ancestor element. Thus, in <code><DIV><P

	2093 STYLE="display: inline-block">Hello<BR>Goodbye</P>

	2094 etcetera</DIV></code> the first formatted line of the

	2095 <code>div</code> is not the line "Hello".

	2096

	2097 <p class="note">Note that the first line of the <code>p</code> in this

	2098 fragment: <code><p&gt<br>First...</code> doesn't contain any

	2099 letters (assuming the default style for <code>br</code> in HTML

	2100 4). The word "First" is not on the first formatted line.

	2101

	2102 <p>A UA should act as if the fictional start tags of the

	2103 <code>::first-line</code> pseudo-elements were nested just inside the

	2104 innermost enclosing block-level element. (Since CSS1 and CSS2 were

	2105 silent on this case, authors should not rely on this behavior.) Here

	2106 is an example. The fictional tag sequence for</p>

	2107

	2108 <pre>

	2109 <DIV>

	2110 <P>First paragraph</P>

	2111 <P>Second paragraph</P>

	2112 </DIV>

	2113 </pre>

	2114

	2115 <p>is</p>

	2116

	2117 <pre>

	2118 <DIV>

	2119 <P><DIV::first-line><P::first-line>First paragraph</P::first-line> </DIV::first-line></P>

	2120 <P><P::first-line>Second paragraph</P::first-line></P>

	2121 </DIV>

	2122 </pre>

	2123

	2124 <p>The <code>::first-line</code> pseudo-element is similar to an

	2125 inline-level element, but with certain restrictions. In CSS, the

	2126 following properties apply to a <code>::first-line</code>

	2127 pseudo-element: font properties, color property, background

	2128 properties, 'word-spacing', 'letter-spacing', 'text-decoration',

	2129 'vertical-align', 'text-transform', 'line-height'. UAs may apply other

	2130 properties as well.</p>

	2131

	2132

	2133 <h4><a name=first-letter>7.2. The ::first-letter pseudo-element</a></h4>

	2134

	2135 <p>The <code>::first-letter</code> pseudo-element represents the first

	2136 letter of the first line of a block, if it is not preceded by any

	2137 other content (such as images or inline tables) on its line. The

	2138 ::first-letter pseudo-element may be used for "initial caps" and "drop

	2139 caps", which are common typographical effects. This type of initial

	2140 letter is similar to an inline-level element if its 'float' property

	2141 is 'none'; otherwise, it is similar to a floated element.</p>

	2142

	2143 <p>In CSS, these are the properties that apply to <code>::first-letter</code>

	2144 pseudo-elements: font properties, 'text-decoration', 'text-transform',

	2145 'letter-spacing', 'word-spacing' (when appropriate), 'line-height',

	2146 'float', 'vertical-align' (only if 'float' is 'none'), margin

	2147 properties, padding properties, border properties, color property,

	2148 background properties. UAs may apply other properties as well. To

	2149 allow UAs to render a typographically correct drop cap or initial cap,

	2150 the UA may choose a line-height, width and height based on the shape

	2151 of the letter, unlike for normal elements.</p>

	2152

	2153 <div class="example">

	2154 <p>Example:</p>

	2155 <p>This example shows a possible rendering of an initial cap. Note

	2156 that the 'line-height' that is inherited by the <code>::first-letter</code>

	2157 pseudo-element is 1.1, but the UA in this example has computed the

	2158 height of the first letter differently, so that it doesn't cause any

	2159 unnecessary space between the first two lines. Also note that the

	2160 fictional start tag of the first letter is inside the <span>span</span>, and thu s

	2161 the font weight of the first letter is normal, not bold as the <span>span</span> :

	2162 <pre>

	2163 p { line-height: 1.1 }

	2164 p::first-letter { font-size: 3em; font-weight: normal }

	2165 span { font-weight: bold }

	2166 ...

	2167 <p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br >

	2168 Erbarremt over my en mijn benaeuwde vesten<br>

	2169 En arme burgery, en op mijn volcx gebed<br>

	2170 En dagelix geschrey de bange stad ontzet.

	2171 </pre>

	2172 <div class="figure">

	2173 <p><img src="initial-cap.png" alt="Image illustrating the ::first-letter pseudo- element">

	2174 </div>

	2175 </div>

	2176

	2177 <div class="example">

	2178 <p>The following CSS will make a drop cap initial letter span about two lines:</ p>

	2179

	2180 <pre>

	2181 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

	2182 <HTML>

	2183 <HEAD>

	2184 <TITLE>Drop cap initial letter</TITLE>

	2185 <STYLE type="text/css">

	2186 P { font-size: 12pt; line-height: 1.2 }

	2187 P::first-letter { font-size: 200%; font-weight: bold; float: left }

	2188 SPAN { text-transform: uppercase }

	2189 </STYLE>

	2190 </HEAD>

	2191 <BODY>

	2192 <P><SPAN>The first</SPAN> few words of an article

	2193 in The Economist.</P>

	2194 </BODY>

	2195 </HTML>

	2196 </pre>

	2197

	2198 <p>This example might be formatted as follows:</p>

	2199

	2200 <div class="figure">

	2201 <P><img src="first-letter.gif" alt="Image illustrating the combined effect of th e ::first-letter and ::first-line pseudo-elements"></p>

	2202 </div>

	2203

	2204 <p>The <span class="index-inst" title="fictional tag

	2205 sequence">fictional tag sequence</span> is:</p>

	2206

	2207 <pre>

	2208 <P>

	2209 <SPAN>

	2210 <P::first-letter>

	2211 T

	2212 </P::first-letter>he first

	2213 </SPAN>

	2214 few words of an article in the Economist.

	2215 </P>

	2216 </pre>

	2217

	2218 <p>Note that the <code>::first-letter</code> pseudo-element tags abut

	2219 the content (i.e., the initial character), while the ::first-line

	2220 pseudo-element start tag is inserted right after the start tag of the

	2221 block element.</p> </div>

	2222

	2223 <p>In order to achieve traditional drop caps formatting, user agents

	2224 may approximate font sizes, for example to align baselines. Also, the

	2225 glyph outline may be taken into account when formatting.</p>

	2226

	2227 <p>Punctuation (i.e, characters defined in Unicode in the "open" (Ps),

	2228 "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po)

	2229 punctuation classes), that precedes or follows the first letter should

	2230 be included. <a href="#refsUNICODE">[UNICODE]</a></p>

	2231

	2232 <div class="figure">

	2233 <P><img src="first-letter2.gif" alt="Quotes that precede the

	2234 first letter should be included."></p>

	2235 </div>

	2236

	2237 <p>The <code>::first-letter</code> also applies if the first letter is

	2238 in fact a digit, e.g., the "6" in "67 million dollars is a lot of

	2239 money."</p>

	2240

	2241 <p>In CSS, the <code>::first-letter</code> pseudo-element applies to

	2242 block, list-item, table-cell, table-caption, and inline-block

	2243 elements. <span class="note">A future version of this specification

	2244 may allow this pesudo-element to apply to more element

	2245 types.</span></p>

	2246

	2247 <p>The <code>::first-letter</code> pseudo-element can be used with all

	2248 such elements that contain text, or that have a descendant in the same

	2249 flow that contains text. A UA should act as if the fictional start tag

	2250 of the ::first-letter pseudo-element is just before the first text of

	2251 the element, even if that first text is in a descendant.</p>

	2252

	2253 <div class="example">

	2254 <p>Example:</p>

	2255 <p>The fictional tag sequence for this HTMLfragment:

	2256 <pre><div>

	2257 <p>The first text.</pre>

	2258 <p>is:

	2259 <pre><div>

	2260 <p><div::first-letter><p::first-letter>T</...></...>he first text .</pre>

	2261 </div>

	2262

	2263 <p>The first letter of a table-cell or inline-block cannot be the

	2264 first letter of an ancestor element. Thus, in <code><DIV><P

	2265 STYLE="display: inline-block">Hello<BR>Goodbye</P>

	2266 etcetera</DIV></code> the first letter of the <code>div</code> is not the

	2267 letter "H". In fact, the <code>div</code> doesn't have a first letter.

	2268

	2269 <p>The first letter must occur on the <a

	2270 href="#first-formatted-line">first formatted line.</a> For example, in

	2271 this fragment: <code><p&gt<br>First...</code> the first line

	2272 doesn't contain any letters and <code>::first-letter</code> doesn't

	2273 match anything (assuming the default style for <code>br</code> in HTML

	2274 4). In particular, it does not match the "F" of "First."

	2275

	2276 <p>In CSS, if an element is a list item ('display: list-item'), the

	2277 <code>::first-letter</code> applies to the first letter in the

	2278 principal box after the marker. UAs may ignore

	2279 <code>::first-letter</code> on list items with 'list-style-position:

	2280 inside'. If an element has <code>::before</code> or

	2281 <code>::after</code> content, the <code>::first-letter</code> applies

	2282 to the first letter of the element <em>including</em> that content.

	2283

	2284 <div class="example">

	2285 <p>Example:</p>

	2286 <p>After the rule 'p::before {content: "Note: "}', the selector

	2287 'p::first-letter' matches the "N" of "Note".</p>

	2288 </div>

	2289

	2290 <p>Some languages may have specific rules about how to treat certain

	2291 letter combinations. In Dutch, for example, if the letter combination

	2292 "ij" appears at the beginning of a word, both letters should be

	2293 considered within the <code>::first-letter</code> pseudo-element.

	2294

	2295 <p>If the letters that would form the ::first-letter are not in the

	2296 same element, such as "'T" in <code><p>'<em>T...</code>, the UA

	2297 may create a ::first-letter pseudo-element from one of the elements,

	2298 both elements, or simply not create a pseudo-element.</p>

	2299

	2300 <p>Similarly, if the first letter(s) of the block are not at the start

	2301 of the line (for example due to bidirectional reordering), then the UA

	2302 need not create the pseudo-element(s).

	2303

	2304 <div class="example">

	2305 <p>Example:</p>

	2306 <p><a name="overlapping-example">The following example</a> illustrates

	2307 how overlapping pseudo-elements may interact. The first letter of

	2308 each P element will be green with a font size of '24pt'. The rest of

	2309 the first formatted line will be 'blue' while the rest of the

	2310 paragraph will be 'red'.</p>

	2311

	2312 <pre>p { color: red; font-size: 12pt }

	2313 p::first-letter { color: green; font-size: 200% }

	2314 p::first-line { color: blue }

	2315

	2316 <P>Some text that ends up on two lines</P></pre>

	2317

	2318 <p>Assuming that a line break will occur before the word "ends", the

	2319 <span class="index-inst" title="fictional tag sequence">fictional tag

	2320 sequence</span> for this fragment might be:</p>

	2321

	2322 <pre><P>

	2323 <P::first-line>

	2324 <P::first-letter>

	2325 S

	2326 </P::first-letter>ome text that

	2327 </P::first-line>

	2328 ends up on two lines

	2329 </P></pre>

	2330

	2331 <p>Note that the <code>::first-letter</code> element is inside the <code>::first -line</code>

	2332 element. Properties set on <code>::first-line</code> are inherited by

	2333 <code>::first-letter</code>, but are overridden if the same property is set on

	2334 <code>::first-letter</code>.</p>

	2335 </div>

	2336

	2337

	2338 <h4><a name=UIfragments>7.3.</a> <a name=selection>The ::selection pseudo-elemen t</a></h4>

	2339

	2340 <p>The <code>::selection</code> pseudo-element applies to the portion

	2341 of a document that has been highlighted by the user. This also

	2342 applies, for example, to selected text within an editable text

	2343 field. This pseudo-element should not be confused with the <code><a

	2344 href="#checked">:checked</a></code> pseudo-class (which used to be

	2345 named <code>:selected</code>)

	2346

	2347 <p>Although the <code>::selection</code> pseudo-element is dynamic in

	2348 nature, and is altered by user action, it is reasonable to expect that

	2349 when a UA re-renders to a static medium (such as a printed page, see

	2350 <a href="#refsCSS21">[CSS21]</a>) which was originally rendered to a

	2351 dynamic medium (like screen), the UA may wish to transfer the current

	2352 <code>::selection</code> state to that other medium, and have all the

	2353 appropriate formatting and rendering take effect as well. This is not

	2354 required — UAs may omit the <code>::selection</code>

	2355 pseudo-element for static media.

	2356

	2357 <p>These are the CSS properties that apply to <code>::selection</code>

	2358 pseudo-elements: color, background, cursor (optional), outline

	2359 (optional). The computed value of the 'background-image' property on

	2360 <code>::selection</code> may be ignored.

	2361

	2362

	2363 <h4><a name=gen-content>7.4. The ::before and ::after pseudo-elements</a></h4>

	2364

	2365 <p>The <code>::before</code> and <code>::after</code> pseudo-elements

	2366 can be used to describe generated content before or after an element's

	2367 content. They are explained in CSS 2.1 <a

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

	2369

	2370 <p>When the <code>::first-letter</code> and <code>::first-line</code>

	2371 pseudo-elements are combined with <code>::before</code> and

	2372 <code>::after</code>, they apply to the first letter or line of the

	2373 element including the inserted text.</p>

	2374

	2375 <h2><a name=combinators>8. Combinators</a></h2>

	2376

	2377 <h3><a name=descendant-combinators>8.1. Descendant combinator</a></h3>

	2378

	2379 <p>At times, authors may want selectors to describe an element that is

	2380 the descendant of another element in the document tree (e.g., "an

	2381 <code>EM</code> element that is contained within an <code>H1</code>

	2382 element"). Descendant combinators express such a relationship. A

	2383 descendant combinator is <a href="#whitespace">white space</a> that

	2384 separates two sequences of simple selectors. A selector of the form

	2385 "<code>A B</code>" represents an element <code>B</code> that is an

	2386 arbitrary descendant of some ancestor element <code>A</code>.

	2387

	2388 <div class="example">

	2389 <p>Examples:</p>

	2390 <p>For example, consider the following selector:</p>

	2391 <pre>h1 em</pre>

	2392 <p>It represents an <code>em</code> element being the descendant of

	2393 an <code>h1</code> element. It is a correct and valid, but partial,

	2394 description of the following fragment:</p>

	2395 <pre><h1>This <span class="myclass">headline

	2396 is <em>very</em> important</span></h1></pre>

	2397 <p>The following selector:</p>

	2398 <pre>div * p</pre>

	2399 <p>represents a <code>p</code> element that is a grandchild or later

	2400 descendant of a <code>div</code> element. Note the whitespace on

	2401 either side of the "*" is not part of the universal selector; the

	2402 whitespace is a combinator indicating that the DIV must be the

	2403 ancestor of some element, and that that element must be an ancestor

	2404 of the P.</p>

	2405 <p>The following selector, which combines descendant combinators and

	2406 <a href="#attribute-selectors">attribute selectors</a>, represents an

	2407 element that (1) has the <code>href</code> attribute set and (2) is

	2408 inside a <code>p</code> that is itself inside a <code>div</code>:</p>

	2409 <pre>div p *[href]</pre>

	2410 </div>

	2411

	2412 <h3><a name=child-combinators>8.2. Child combinators</a></h3>

	2413

	2414 <p>A <dfn>child combinator</dfn> describes a childhood relationship

	2415 between two elements. A child combinator is made of the

	2416 "greater-than sign" (<code>></code>) character and

	2417 separates two sequences of simple selectors.

	2418

	2419

	2420 <div class="example">

	2421 <p>Examples:</p>

	2422 <p>The following selector represents a <code>p</code> element that is

	2423 child of <code>body</code>:</p>

	2424 <pre>body > p</pre>

	2425 <p>The following example combines descendant combinators and child

	2426 combinators.</p>

	2427 <pre>div ol>li p</pre><!-- LEAVE THOSE SPACES OUT! see below -->

	2428 <p>It represents a <code>p</code> element that is a descendant of an

	2429 <code>li</code> element; the <code>li</code> element must be the

	2430 child of an <code>ol</code> element; the <code>ol</code> element must

	2431 be a descendant of a <code>div</code>. Notice that the optional white

	2432 space around the ">" combinator has been left out.</p>

	2433 </div>

	2434

	2435 <p>For information on selecting the first child of an element, please

	2436 see the section on the <code><a

	2437 href="#structural-pseudos">:first-child</a></code> pseudo-class

	2438 above.</p>

	2439

	2440 <h3><a name=sibling-combinators>8.3. Sibling combinators</a></h3>

	2441

	2442 <p>There are two different sibling combinators: the adjacent sibling

	2443 combinator and the general sibling combinator. In both cases,

	2444 non-element nodes (e.g. text between elements) are ignored when

	2445 considering adjacency of elements.</p>

	2446

	2447 <h4><a name=adjacent-sibling-combinators>8.3.1. Adjacent sibling combinator</a>< /h4>

	2448

	2449 <p>The adjacent sibling combinator is made of the "plus

	2450 sign" (U+002B, <code>+</code>) character that separates two

	2451 sequences of simple selectors. The elements represented by the two

	2452 sequences share the same parent in the document tree and the element

	2453 represented by the first sequence immediately precedes the element

	2454 represented by the second one.</p>

	2455

	2456 <div class="example">

	2457 <p>Examples:</p>

	2458 <p>The following selector represents a <code>p</code> element

	2459 immediately following a <code>math</code> element:</p>

	2460 <pre>math + p</pre>

	2461 <p>The following selector is conceptually similar to the one in the

	2462 previous example, except that it adds an attribute selector — it

	2463 adds a constraint to the <code>h1</code> element, that it must have

	2464 <code>class="opener"</code>:</p>

	2465 <pre>h1.opener + h2</pre>

	2466 </div>

	2467

	2468

	2469 <h4><a name=general-sibling-combinators>8.3.2. General sibling combinator</a></h 4>

	2470

	2471 <p>The general sibling combinator is made of the "tilde"

	2472 (U+007E, <code>~</code>) character that separates two sequences of

	2473 simple selectors. The elements represented by the two sequences share

	2474 the same parent in the document tree and the element represented by

	2475 the first sequence precedes (not necessarily immediately) the element

	2476 represented by the second one.</p>

	2477

	2478 <div class="example">

	2479 <p>Example:</p>

	2480 <pre>h1 ~ pre</pre>

	2481 <p>represents a <code>pre</code> element following an <code>h1</code>. It

	2482 is a correct and valid, but partial, description of:</p>

	2483 <pre><h1>Definition of the function a</h1>

	2484 <p>Function a(x) has to be applied to all figures in the table.</p>

	2485 <pre>function a(x) = 12x/13.5</pre></pre>

	2486 </div>

	2487

	2488 <h2><a name=specificity>9. Calculating a selector's specificity</a></h2>

	2489

	2490 <p>A selector's specificity is calculated as follows:</p>

	2491

	2492 <ul>

	2493 <li>count the number of ID selectors in the selector (= a)</li>

	2494 <li>count the number of class selectors, attributes selectors, and pseudo-clas ses in the selector (= b)</li>

	2495 <li>count the number of element names in the selector (= c)</li>

	2496 <li>ignore pseudo-elements</li>

	2497 </ul>

	2498

	2499 <p>Selectors inside <a href="#negation">the negation pseudo-class</a>

	2500 are counted like any other, but the negation itself does not count as

	2501 a pseudo-class.</p>

	2502

	2503 <p>Concatenating the three numbers a-b-c (in a number system with a

	2504 large base) gives the specificity.</p>

	2505

	2506 <div class="example">

	2507 <p>Examples:</p>

	2508 <pre>* /* a=0 b=0 c=0 -> specificity = 0 */

	2509 LI /* a=0 b=0 c=1 -> specificity = 1 */

	2510 UL LI /* a=0 b=0 c=2 -> specificity = 2 */

	2511 UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */

	2512 H1 + [REL=up] / a=0 b=1 c=1 -> specificity = 11 */

	2513 UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */

	2514 LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */

	2515 #x34y /* a=1 b=0 c=0 -> specificity = 100 */

	2516 #s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */

	2517 </pre>

	2518 </div>

	2519

	2520 <p class="note"><strong>Note:</strong> the specificity of the styles

	2521 specified in an HTML <code>style</code> attribute is described in CSS

	2522 2.1. <a href="#refsCSS21">[CSS21]</a>.</p>

	2523

	2524 <h2><a name=w3cselgrammar>10. The grammar of Selectors</a></h2>

	2525

	2526 <h3><a name=grammar>10.1. Grammar</a></h3>

	2527

	2528 <p>The grammar below defines the syntax of Selectors. It is globally

	2529 LL(1) and can be locally LL(2) (but note that most UA's should not use

	2530 it directly, since it doesn't express the parsing conventions). The

	2531 format of the productions is optimized for human consumption and some

	2532 shorthand notations beyond Yacc (see <a href="#refsYACC">[YACC]</a>)

	2533 are used:</p>

	2534

	2535 <ul>

	2536 <li><b>*</b>: 0 or more

	2537 <li><b>+</b>: 1 or more

	2538 <li><b>?</b>: 0 or 1

	2539 <li><b>\|</b>: separates alternatives

	2540 <li><b>[ ]</b>: grouping </li>

	2541 </ul>

	2542

	2543 <p>The productions are:</p>

	2544

	2545 <pre>selectors_group

	2546 : selector [ COMMA S* selector ]*

	2547 ;

	2548

	2549 selector

	2550 : simple_selector_sequence [ combinator simple_selector_sequence ]*

	2551 ;

	2552

	2553 combinator

	2554 /* combinators can be surrounded by white space */

	2555 : PLUS S* \| GREATER S* \| TILDE S* \| S+

	2556 ;

	2557

	2558 simple_selector_sequence

	2559 : [ type_selector \| universal ]

	2560 [ HASH \| class \| attrib \| pseudo \| negation ]*

	2561 \| [ HASH \| class \| attrib \| pseudo \| negation ]+

	2562 ;

	2563

	2564 type_selector

	2565 : [ namespace_prefix ]? element_name

	2566 ;

	2567

	2568 namespace_prefix

	2569 : [ IDENT \| '*' ]? '\|'

	2570 ;

	2571

	2572 element_name

	2573 : IDENT

	2574 ;

	2575

	2576 universal

	2577 : [ namespace_prefix ]? '*'

	2578 ;

	2579

	2580 class

	2581 : '.' IDENT

	2582 ;

	2583

	2584 attrib

	2585 : '[' S* [ namespace_prefix ]? IDENT S*

	2586 [ [ PREFIXMATCH \|

	2587 SUFFIXMATCH \|

	2588 SUBSTRINGMATCH \|

	2589 '=' \|

	2590 INCLUDES \|

	2591 DASHMATCH ] S* [ IDENT \| STRING ] S*

	2592 ]? ']'

	2593 ;

	2594

	2595 pseudo

	2596 /* '::' starts a pseudo-element, ':' a pseudo-class */

	2597 /* Exceptions: :first-line, :first-letter, :before and :after. */

	2598 /* Note that pseudo-elements are restricted to one per selector and */

	2599 /* occur only in the last simple_selector_sequence. */

	2600 : ':' ':'? [ IDENT \| functional_pseudo ]

	2601 ;

	2602

	2603 functional_pseudo

	2604 : FUNCTION S* expression ')'

	2605 ;

	2606

	2607 expression

	2608 /* In CSS3, the expressions are identifiers, strings, */

	2609 /* or of the form "an+b" */

	2610 : [ [ PLUS \| '-' \| DIMENSION \| NUMBER \| STRING \| IDENT ] S* ]+

	2611 ;

	2612

	2613 negation

	2614 : NOT S* negation_arg S* ')'

	2615 ;

	2616

	2617 negation_arg

	2618 : type_selector \| universal \| HASH \| class \| attrib \| pseudo

	2619 ;</pre>

	2620

	2621

	2622 <h3><a name=lex>10.2. Lexical scanner</a></h3>

	2623

	2624 <p>The following is the <a name=x3>tokenizer</a>, written in Flex (see

	2625 <a href="#refsFLEX">[FLEX]</a>) notation. The tokenizer is

	2626 case-insensitive.</p>

	2627

	2628 <p>The two occurrences of "\377" represent the highest character

	2629 number that current versions of Flex can deal with (decimal 255). They

	2630 should be read as "\4177777" (decimal 1114111), which is the highest

	2631 possible code point in Unicode/ISO-10646. <a

	2632 href="#refsUNICODE">[UNICODE]</a></p>

	2633

	2634 <pre>%option case-insensitive

	2635

	2636 ident [-]?{nmstart}{nmchar}*

	2637 name {nmchar}+

	2638 nmstart [_a-z]\|{nonascii}\|{escape}

	2639 nonascii [^\0-\177]

	2640 unicode \\[0-9a-f]{1,6}(\r\n\|[ \n\r\t\f])?

	2641 escape {unicode}\|\\[^\n\r\f0-9a-f]

	2642 nmchar [_a-z0-9-]\|{nonascii}\|{escape}

	2643 num [0-9]+\|[0-9]*\.[0-9]+

	2644 string {string1}\|{string2}

	2645 string1 \"([^\n\r\f\\"]\|\\{nl}\|{nonascii}\|{escape})*\"

	2646 string2 \'([^\n\r\f\\']\|\\{nl}\|{nonascii}\|{escape})*\'

	2647 invalid {invalid1}\|{invalid2}

	2648 invalid1 \"([^\n\r\f\\"]\|\\{nl}\|{nonascii}\|{escape})*

	2649 invalid2 \'([^\n\r\f\\']\|\\{nl}\|{nonascii}\|{escape})*

	2650 nl \n\|\r\n\|\r\|\f

	2651 w [ \t\r\n\f]*

	2652

	2653 %%

	2654

	2655 [ \t\r\n\f]+ return S;

	2656

	2657 "~=" return INCLUDES;

	2658 "\|=" return DASHMATCH;

	2659 "^=" return PREFIXMATCH;

	2660 "$=" return SUFFIXMATCH;

	2661 "*=" return SUBSTRINGMATCH;

	2662 {ident} return IDENT;

	2663 {string} return STRING;

	2664 {ident}"(" return FUNCTION;

	2665 {num} return NUMBER;

	2666 "#"{name} return HASH;

	2667 {w}"+" return PLUS;

	2668 {w}">" return GREATER;

	2669 {w}"," return COMMA;

	2670 {w}"~" return TILDE;

	2671 ":not(" return NOT;

	2672 @{ident} return ATKEYWORD;

	2673 {invalid} return INVALID;

	2674 {num}% return PERCENTAGE;

	2675 {num}{ident} return DIMENSION;

	2676 "<!--" return CDO;

	2677 "-->" return CDC;

	2678

	2679 "url("{w}{string}{w}")" return URI;

	2680 "url("{w}([!#$%&-~]\|{nonascii}\|{escape}){w}")" return URI;

	2681 U\+[0-9a-f?]{1,6}(-[0-9a-f]{1,6})? return UNICODE_RANGE;

	2682

	2683 \/\[^]\+([^/][^]\+)\/ / ignore comments */

	2684

	2685 . return *yytext;</pre>

	2686

	2687

	2688

	2689 <h2><a name=downlevel>11. Namespaces and down-level clients</a></h2>

	2690

	2691 <p>An important issue is the interaction of CSS selectors with XML

	2692 documents in web clients that were produced prior to this

	2693 document. Unfortunately, due to the fact that namespaces must be

	2694 matched based on the URI which identifies the namespace, not the

	2695 namespace prefix, some mechanism is required to identify namespaces in

	2696 CSS by their URI as well. Without such a mechanism, it is impossible

	2697 to construct a CSS style sheet which will properly match selectors in

	2698 all cases against a random set of XML documents. However, given

	2699 complete knowledge of the XML document to which a style sheet is to be

	2700 applied, and a limited use of namespaces within the XML document, it

	2701 is possible to construct a style sheet in which selectors would match

	2702 elements and attributes correctly.</p>

	2703

	2704 <p>It should be noted that a down-level CSS client will (if it

	2705 properly conforms to CSS forward compatible parsing rules) ignore all

	2706 <code>@namespace</code> at-rules, as well as all style rules that make

	2707 use of namespace qualified element type or attribute selectors. The

	2708 syntax of delimiting namespace prefixes in CSS was deliberately chosen

	2709 so that down-level CSS clients would ignore the style rules rather

	2710 than possibly match them incorrectly.</p>

	2711

	2712 <p>The use of default namespaces in CSS makes it possible to write

	2713 element type selectors that will function in both namespace aware CSS

	2714 clients as well as down-level clients. It should be noted that

	2715 down-level clients may incorrectly match selectors against XML

	2716 elements in other namespaces.</p>

	2717

	2718 <p>The following are scenarios and examples in which it is possible to

	2719 construct style sheets which would function properly in web clients

	2720 that do not implement this proposal.</p>

	2721

	2722 <ol>

	2723 <li>

	2724

	2725 <p>The XML document does not use namespaces.</p>

	2726

	2727 <ul>

	2728

	2729 <li>In this case, it is obviously not necessary to declare or use

	2730 namespaces in the style sheet. Standard CSS element type and

	2731 attribute selectors will function adequately in a down-level

	2732 client.</li>

	2733

	2734 <li>In a CSS namespace aware client, the default behavior of

	2735 element selectors matching without regard to namespace will

	2736 function properly against all elements, since no namespaces are

	2737 present. However, the use of specific element type selectors that

	2738 match only elements that have no namespace ("<code>\|name</code>")

	2739 will guarantee that selectors will match only XML elements that do

	2740 not have a declared namespace. </li>

	2741

	2742 </ul>

	2743

	2744 </li>

	2745

	2746 <li>

	2747

	2748 <p>The XML document defines a single, default namespace used

	2749 throughout the document. No namespace prefixes are used in element

	2750 names.</p>

	2751

	2752 <ul>

	2753

	2754 <li>In this case, a down-level client will function as if

	2755 namespaces were not used in the XML document at all. Standard CSS

	2756 element type and attribute selectors will match against all

	2757 elements. </li>

	2758

	2759 </ul>

	2760

	2761 </li>

	2762

	2763 <li>

	2764

	2765 <p>The XML document does <b>not</b> use a default namespace, all

	2766 namespace prefixes used are known to the style sheet author, and

	2767 there is a direct mapping between namespace prefixes and namespace

	2768 URIs. (A given prefix may only be mapped to one namespace URI

	2769 throughout the XML document; there may be multiple prefixes mapped

	2770 to the same URI).</p>

	2771

	2772 <ul>

	2773

	2774 <li>In this case, the down-level client will view and match

	2775 element type and attribute selectors based on their fully

	2776 qualified name, not the local part as outlined in the <a

	2777 href="#typenmsp">Type selectors and Namespaces</a> section. CSS

	2778 selectors may be declared using an escaped colon "<code>\:</code>"

	2779 to describe the fully qualified names, e.g.

	2780 "<code>html\:h1</code>" will match

	2781 <code><html:h1></code>. Selectors using the qualified name

	2782 will only match XML elements that use the same prefix. Other

	2783 namespace prefixes used in the XML that are mapped to the same URI

	2784 will not match as expected unless additional CSS style rules are

	2785 declared for them.</li>

	2786

	2787 <li>Note that selectors declared in this fashion will

	2788 <em>only</em> match in down-level clients. A CSS namespace aware

	2789 client will match element type and attribute selectors based on

	2790 the name's local part. Selectors declared with the fully

	2791 qualified name will not match (unless there is no namespace prefix

	2792 in the fully qualified name).</li>

	2793

	2794 </ul>

	2795

	2796 </li>

	2797

	2798 </ol>

	2799

	2800 <p>In other scenarios: when the namespace prefixes used in the XML are

	2801 not known in advance by the style sheet author; or a combination of

	2802 elements with no namespace are used in conjunction with elements using

	2803 a default namespace; or the same namespace prefix is mapped to

	2804 <em>different</em> namespace URIs within the same document, or in

	2805 different documents; it is impossible to construct a CSS style sheet

	2806 that will function properly against all elements in those documents,

	2807 unless, the style sheet is written using a namespace URI syntax (as

	2808 outlined in this document or similar) and the document is processed by

	2809 a CSS and XML namespace aware client.</p>

	2810

	2811 <h2><a name=profiling>12. Profiles</a></h2>

	2812

	2813 <p>Each specification using Selectors must define the subset of W3C

	2814 Selectors it allows and excludes, and describe the local meaning of

	2815 all the components of that subset.</p>

	2816

	2817 <p>Non normative examples:

	2818

	2819 <div class="profile">

	2820 <table class="tprofile">

	2821 <tbody>

	2822 <tr>

	2823 <th class="title" colspan=2>Selectors profile</th></tr>

	2824 <tr>

	2825 <th>Specification</th>

	2826 <td>CSS level 1</td></tr>

	2827 <tr>

	2828 <th>Accepts</th>

	2829 <td>type selectors<br>class selectors<br>ID selectors<br>:link,

	2830 :visited and :active pseudo-classes<br>descendant combinator

	2831 <br>::first-line and ::first-letter pseudo-elements</td></tr>

	2832 <tr>

	2833 <th>Excludes</th>

	2834 <td>

	2835

	2836 <p>universal selector<br>attribute selectors<br>:hover and :focus

	2837 pseudo-classes<br>:target pseudo-class<br>:lang() pseudo-class<br>all UI

	2838 element states pseudo-classes<br>all structural

	2839 pseudo-classes<br>negation pseudo-class<br>all

	2840 UI element fragments pseudo-elements<br>::before and ::after

	2841 pseudo-elements<br>child combinators<br>sibling combinators

	2842

	2843 <p>namespaces</td></tr>

	2844 <tr>

	2845 <th>Extra constraints</th>

	2846 <td>only one class selector allowed per sequence of simple

	2847 selectors</td></tr></tbody></table><br><br>

	2848 <table class="tprofile">

	2849 <tbody>

	2850 <tr>

	2851 <th class="title" colspan=2>Selectors profile</th></tr>

	2852 <tr>

	2853 <th>Specification</th>

	2854 <td>CSS level 2</td></tr>

	2855 <tr>

	2856 <th>Accepts</th>

	2857 <td>type selectors<br>universal selector<br>attribute presence and

	2858 values selectors<br>class selectors<br>ID selectors<br>:link, :visited,

	2859 :active, :hover, :focus, :lang() and :first-child pseudo-classes

	2860 <br>descendant combinator<br>child combinator<br>adjacent sibling

	2861 combinator<br>::first-line and ::first-letter pseudo-elements<br>::before

	2862 and ::after pseudo-elements</td></tr>

	2863 <tr>

	2864 <th>Excludes</th>

	2865 <td>

	2866

	2867 <p>content selectors<br>substring matching attribute

	2868 selectors<br>:target pseudo-classes<br>all UI element

	2869 states pseudo-classes<br>all structural pseudo-classes other

	2870 than :first-child<br>negation pseudo-class<br>all UI element

	2871 fragments pseudo-elements<br>general sibling combinators

	2872

	2873 <p>namespaces</td></tr>

	2874 <tr>

	2875 <th>Extra constraints</th>

	2876 <td>more than one class selector per sequence of simple selectors (CSS1

	2877 constraint) allowed</td></tr></tbody></table>

	2878

	2879 <p>In CSS, selectors express pattern matching rules that determine which style

	2880 rules apply to elements in the document tree.

	2881

	2882 <p>The following selector (CSS level 2) will <b>match</b> all anchors <code>a</c ode>

	2883 with attribute <code>name</code> set inside a section 1 header <code>h1</code>:

	2884 <pre>h1 a[name]</pre>

	2885

	2886 <p>All CSS declarations attached to such a selector are applied to elements

	2887 matching it. </div>

	2888

	2889 <div class="profile">

	2890 <table class="tprofile">

	2891 <tbody>

	2892 <tr>

	2893 <th class="title" colspan=2>Selectors profile</th></tr>

	2894 <tr>

	2895 <th>Specification</th>

	2896 <td>STTS 3</td>

	2897 </tr>

	2898 <tr>

	2899 <th>Accepts</th>

	2900 <td>

	2901

	2902 <p>type selectors<br>universal selectors<br>attribute selectors<br>class

	2903 selectors<br>ID selectors<br>all structural pseudo-classes<br>

	2904 all combinators

	2905

	2906 <p>namespaces</td></tr>

	2907 <tr>

	2908 <th>Excludes</th>

	2909 <td>non-accepted pseudo-classes<br>pseudo-elements<br></td></tr>

	2910 <tr>

	2911 <th>Extra constraints</th>

	2912 <td>some selectors and combinators are not allowed in fragment

	2913 descriptions on the right side of STTS declarations.</td></tr></tbody></ta ble>

	2914 <form>

	2915 <input type="text" name="test10"/>

	2916 <input type="text" name="foo"/>

	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 </form>

	2941

	2942 <p>Selectors can be used in STTS 3 in two different

	2943 manners:

	2944 <ol>

	2945 <li>a selection mechanism equivalent to CSS selection mechanism: declarations

	2946 attached to a given selector are applied to elements matching that selector,

	2947 <li>fragment descriptions that appear on the right side of declarations.

	2948 </li></ol></div>

	2949

	2950 <h2><a name=Conformance></a>13. Conformance and requirements</h2>

	2951

	2952 <p>This section defines conformance with the present specification only.

	2953

	2954 <p>The inability of a user agent to implement part of this specification due to

	2955 the limitations of a particular device (e.g., non interactive user agents will

	2956 probably not implement dynamic pseudo-classes because they make no sense without

	2957 interactivity) does not imply non-conformance.

	2958

	2959 <p>All specifications reusing Selectors must contain a <a

	2960 href="#profiling">Profile</a> listing the

	2961 subset of Selectors it accepts or excludes, and describing the constraints

	2962 it adds to the current specification.

	2963

	2964 <p>Invalidity is caused by a parsing error, e.g. an unrecognized token or a toke n

	2965 which is not allowed at the current parsing point.

	2966

	2967 <p>User agents must observe the rules for handling parsing errors:

	2968 <ul>

	2969 <li>a simple selector containing an undeclared namespace prefix is invalid</li >

	2970 <li>a selector containing an invalid simple selector, an invalid combinator

	2971 or an invalid token is invalid. </li>

	2972 <li>a group of selectors containing an invalid selector is invalid.</li>

	2973 </ul>

	2974

	2975 <p class="foo test10 bar">Specifications reusing Selectors must define how to ha ndle parsing

	2976 errors. (In the case of CSS, the entire rule in which the selector is

	2977 used is dropped.)</p>

	2978

	2979 <!-- Apparently all these references are out of date:

	2980 <p>Implementations of this specification must behave as

	2981 "recipients of text data" as defined by <a href="#refsCWWW">[CWWW]</a>

	2982 when parsing selectors and attempting matches. (In particular,

	2983 implementations must assume the data is normalized and must not

	2984 normalize it.) Normative rules for matching strings are defined in

	2985 <a href="#refsCWWW">[CWWW]</a> and <a

	2986 href="#refsUNICODE">[UNICODE]</a> and apply to implementations of this

	2987 specification.</p>-->

	2988

	2989 <h2><a name=Tests></a>14. Tests</h2>

	2990

	2991 <p>This specification has <a

	2992 href="http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/">a test

	2993 suite</a> allowing user agents to verify their basic conformance to

	2994 the specification. This test suite does not pretend to be exhaustive

	2995 and does not cover all possible combined cases of Selectors.</p>

	2996

	2997 <h2><a name=ACKS></a>15. Acknowledgements</h2>

	2998

	2999 <p>The CSS working group would like to thank everyone who has sent

	3000 comments on this specification over the years.</p>

	3001

	3002 <p>The working group would like to extend special thanks to Donna

	3003 McManus, Justin Baker, Joel Sklar, and Molly Ives Brower who perfermed

	3004 the final editorial review.</p>

	3005

	3006 <h2><a name=references>16. References</a></h2>

	3007

	3008 <dl class="refs">

	3009

	3010 <dt>[CSS1]

	3011 <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

	3012 <dd>(<code><a href="http://www.w3.org/TR/REC-CSS1">http://www.w3.org/TR/REC-CS S1</a></code>)

	3013

	3014 <dt>[CSS21]

	3015 <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

	3016 <dd>(<code><a href="http://www.w3.org/TR/CSS21">http://www.w3.org/TR/CSS21</a> </code>)

	3017

	3018 <dt>[CWWW]

	3019 <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

	3020 <dd>(<code><a href="http://www.w3.org/TR/charmod/">http://www.w3.org/TR/charmo d/</a></code>)

	3021

	3022 <dt>[FLEX]

	3023 <dd><a name="refsFLEX"></a> "<cite>Flex: The Lexical Scanner Generator</cite>" , Version 2.3.7, ISBN 1882114213

	3024

	3025 <dt>[HTML4]

	3026 <dd><a name="refsHTML4"></a> Dave Ragget, Arnaud Le Hors, Ian Jacobs, editors; "<cite>HTML 4.01 Specification</cite>", W3C Recommendation, 24 December 1999

	3027 <dd>(<a href="http://www.w3.org/TR/html4/"><code>http://www.w3.org/TR/html4/</ code></a>)

	3028

	3029 <dt>[MATH]

	3030 <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

	3031 <dd>(<code><a href="http://www.w3.org/TR/REC-MathML/">http://www.w3.org/TR/REC -MathML/</a></code>)

	3032

	3033 <dt>[RFC3066]

	3034 <dd><a name="refsRFC3066"></a> H. Alvestrand; "<cite>Tags for the Identificati on of Languages</cite>", Request for Comments 3066, January 2001

	3035 <dd>(<a href="http://www.ietf.org/rfc/rfc3066.txt"><code>http://www.ietf.org/r fc/rfc3066.txt</code></a>)

	3036

	3037 <dt>[STTS]

	3038 <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

	3039 <dd>(<code><a href="http://www.w3.org/TR/NOTE-STTS3">http://www.w3.org/TR/NOTE -STTS3</a></code>)

	3040

	3041 <dt>[SVG]

	3042 <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

	3043 <dd>(<code><a href="http://www.w3.org/TR/SVG/">http://www.w3.org/TR/SVG/</a></ code>)

	3044

	3045 <dt>[UNICODE]</dt>

	3046 <dd><a name="refsUNICODE"></a> <cite><a

	3047 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>.

	3048 <dd>(<code><a href="http://www.unicode.org/versions/">http://www.unicode.org/v ersions/</a></code>)</dd>

	3049

	3050 <dt>[XML10]

	3051 <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

	3052 <dd>(<a href="http://www.w3.org/TR/REC-xml/"><code>http://www.w3.org/TR/REC-xm l/</code></a>)

	3053

	3054 <dt>[XMLNAMES]

	3055 <dd><a name="refsXMLNAMES"></a> Tim Bray, Dave Hollander, Andrew Layman, edito rs; "<cite>Namespaces in XML</cite>", W3C Recommendation, 14 January 1999

	3056 <dd>(<a href="http://www.w3.org/TR/REC-xml-names/"><code>http://www.w3.org/TR/ REC-xml-names/</code></a>)

	3057

	3058 <dt>[YACC]

	3059 <dd><a name="refsYACC"></a> S. C. Johnson; "<cite>YACC — Yet another com piler compiler</cite>", Technical Report, Murray Hill, 1975

	3060

	3061 </dl>

	3062 </body>

	3063 </html>

OLD	NEW

« no previous file with comments | « chrome/test/data/dromaeo/tests/MANIFEST.json ('k') | chrome/test/data/dromaeo/tests/cssquery-ext.html » ('j') | no next file with comments »