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

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

	5 <script src="../lib/yui-dom.js"></script>

	6 <script src="../lib/yui-selector.js"></script>

	7 <script>

	8 window.onload = function(){

	9 startTest("cssquery-yui", '');

	10

	11 // Try to force real results

	12 var ret, tmp;

	13

	14 var html = document.body.innerHTML;

	15 var query = YAHOO.util.Selector.query;

	16

	17 prep(function(){

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

	19 div.innerHTML = html;

	20 document.body.appendChild( div );

	21 });

	22

	23 test("YUI - *", function(){

	24 query("*");

	25 });

	26

	27 test("YUI - div:only-child", function(){

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

	29 });

	30

	31 test("YUI - div:first-child", function(){

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

	33 });

	34

	35 test("YUI - div:nth-child(even)", function(){

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

	37 });

	38

	39 test("YUI - div:nth-child(2n)", function(){

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

	41 });

	42

	43 test("YUI - div:nth-child(odd)", function(){

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

	45 });

	46

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

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

	49 });

	50

	51 test("YUI - div:nth-child(n)", function(){

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

	53 });

	54

	55 test("YUI - div:last-child", function(){

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

	57 });

	58

	59 test("YUI - div > div", function(){

	60 query("div > div");

	61 });

	62

	63 test("YUI - div + div", function(){

	64 query("div + div");

	65 });

	66

	67 test("YUI - div ~ div", function(){

	68 query("div ~ div");

	69 });

	70

	71 test("YUI - body", function(){

	72 query("body");

	73 });

	74

	75 test("YUI - body div", function(){

	76 query("body div");

	77 });

	78

	79 test("YUI - div", function(){

	80 query("div");

	81 });

	82

	83 test("YUI - div div", function(){

	84 query("div div");

	85 });

	86

	87 test("YUI - div div div", function(){

	88 query("div div div");

	89 });

	90

	91 test("YUI - div, div, div", function(){

	92 query("div, div, div");

	93 });

	94

	95 test("YUI - div, a, span", function(){

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

	97 });

	98

	99 test("YUI - .dialog", function(){

	100 query(".dialog");

	101 });

	102

	103 test("YUI - div.dialog", function(){

	104 query("div.dialog");

	105 });

	106

	107 test("YUI - div .dialog", function(){

	108 query("div .dialog");

	109 });

	110

	111 test("YUI - div.character, div.dialog", function(){

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

	113 });

	114

	115 test("YUI - #speech5", function(){

	116 query("#speech5");

	117 });

	118

	119 test("YUI - div#speech5", function(){

	120 query("div#speech5");

	121 });

	122

	123 test("YUI - div #speech5", function(){

	124 query("div #speech5");

	125 });

	126

	127 test("YUI - div.scene div.dialog", function(){

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

	129 });

	130

	131 test("YUI - div#scene1 div.dialog div", function(){

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

	133 });

	134

	135 test("YUI - #scene1 #speech1", function(){

	136 query("#scene1 #speech1");

	137 });

	138

	139 test("YUI - div[class]", function(){

	140 query("div[class]");

	141 });

	142

	143 test("YUI - div[class=dialog]", function(){

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

	145 });

	146

	147 test("YUI - div[class^=dia]", function(){

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

	149 });

	150

	151 test("YUI - div[class$=log]", function(){

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

	153 });

	154

	155 test("YUI - div[class*=sce]", function(){

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

	157 });

	158

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

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

	161 });

	162

	163 test("YUI - div[class~=dialog]", function(){

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

	165 });

	166

	167 endTest();

	168 };

	169 </script>

	170 </head>

	171 <body>

	172 <div class="head">

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

	174

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

	176

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

	178

	179 <dl>

	180

	181 <dt>This version:

	182

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

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

	185

	186 <dt>Latest version:

	187

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

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

	190

	191 <dt>Previous version:

	192

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

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

	195

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

	197

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

	199

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

	201

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

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

	204

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

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

	207

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

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

	210

	211 </dl>

	212

	213 <p class="copyright"><a

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

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

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

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

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

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

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

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

	222 <a

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

	224 <a

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

	226 <a

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

	228 use</a> rules apply.

	229

	230 <hr title="Separator for header">

	231

	232 </div>

	233

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

	235

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

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

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

	239

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

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

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

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

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

	245 style properties to elements in the document. This document

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

	247 extended selectors will be used by CSS level 3.

	248

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

	250

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

	252

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

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

	255

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

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

	258 evaluating the expression across all the elements in a

	259 subtree. <acronym title="Simple Tree Transformation

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

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

	262

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

	264

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

	266 time of its publication. Other documents may supersede this

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

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

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

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

	271

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

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

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

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

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

	277

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

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

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

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

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

	283

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

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

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

	287 document is a revision of the <a

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

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

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

	291 expected that this last call will proceed straight to Proposed

	292 Recommendation stage since it is believed that interoperability will

	293 be demonstrable.</p>

	294

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

	296 specification and return comments to the (<a

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

	298 public mailing list <a

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

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

	301 Members can also send comments directly to the CSS Working

	302 Group.

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

	304

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

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

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

	308

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

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

	311 The English version of this specification is the only normative

	312 version.

	313

	314 <div class="subtoc">

	315

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

	317

	318 <ul class="toc">

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

	320 <ul>

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

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

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

	324 </ul>

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

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

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

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

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

	330 <ul class="toc">

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

	332 <ul class="toc">

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

	334 </ul>

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

	336 <ul>

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

	338 </ul>

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

	340 <ul class="toc">

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

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

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

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

	345 </ul>

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

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

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

	349 <ul class="toc">

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

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

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

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

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

	355 <ul>

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

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

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

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

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

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

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

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

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

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

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

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

	368 </ul>

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

	370 </ul>

	371 </li>

	372 </ul>

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

	374 <ul>

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

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

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

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

	379 </ul>

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

	381 <ul class="toc">

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

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

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

	385 <ul class="toc">

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

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

	388 </ul>

	389 </li>

	390 </ul>

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

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

	393 <ul class="toc">

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

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

	396 </ul>

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

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

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

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

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

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

	403 </ul>

	404

	405 </div>

	406

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

	408

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

	410

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

	412 particular limitations or rules specific to CSS. In this

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

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

	415

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

	417

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

	419 examples, notes, and sections explicitly marked as

	420 non-normative.</p>

	421

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

	423

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

	425

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

	427 Selectors are:

	428

	429 <ul>

	430

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

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

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

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

	435 the components of this sequence</li>

	436

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

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

	439

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

	441

	442 <li>new simple selectors including substring matching attribute

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

	444

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

	446 for pseudo-elements</li>

	447

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

	449

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

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

	452 each specification</li>

	453

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

	455 specification; other specifications can now refer to this document

	456 independently of CSS</li>

	457

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

	459

	460 </ul>

	461

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

	463

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

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

	466

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

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

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

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

	471

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

	473 representations.</p>

	474

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

	476

	477 <table class="selectorsReview">

	478 <thead>

	479 <tr>

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

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

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

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

	484 <tbody>

	485 <tr>

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

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

	488 <td class="described"><a

	489 href="#universal-selector">Universal

	490 selector</a></td>

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

	492 <tr>

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

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

	495 <td class="described"><a

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

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

	498 <tr>

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

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

	501 <td class="described"><a

	502 href="#attribute-selectors">Attribute

	503 selectors</a></td>

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

	505 <tr>

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

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

	508 equal to "bar"</td>

	509 <td class="described"><a

	510 href="#attribute-selectors">Attribute

	511 selectors</a></td>

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

	513 <tr>

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

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

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

	517 <td class="described"><a

	518 href="#attribute-selectors">Attribute

	519 selectors</a></td>

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

	521 <tr>

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

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

	524 with the string "bar"</td>

	525 <td class="described"><a

	526 href="#attribute-selectors">Attribute

	527 selectors</a></td>

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

	529 <tr>

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

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

	532 with the string "bar"</td>

	533 <td class="described"><a

	534 href="#attribute-selectors">Attribute

	535 selectors</a></td>

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

	537 <tr>

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

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

	540 substring "bar"</td>

	541 <td class="described"><a

	542 href="#attribute-selectors">Attribute

	543 selectors</a></td>

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

	545 <tr>

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

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

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

	549 <td class="described"><a

	550 href="#attribute-selectors">Attribute

	551 selectors</a></td>

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

	553 <tr>

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

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

	556 <td class="described"><a

	557 href="#structural-pseudos">Structural

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

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

	560 <tr>

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

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

	563 <td class="described"><a

	564 href="#structural-pseudos">Structural

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

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

	567 <tr>

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

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

	570 from the last one</td>

	571 <td class="described"><a

	572 href="#structural-pseudos">Structural

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

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

	575 <tr>

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

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

	578 <td class="described"><a

	579 href="#structural-pseudos">Structural

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

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

	582 <tr>

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

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

	585 from the last one</td>

	586 <td class="described"><a

	587 href="#structural-pseudos">Structural

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

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

	590 <tr>

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

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

	593 <td class="described"><a

	594 href="#structural-pseudos">Structural

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

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

	597 <tr>

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

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

	600 <td class="described"><a

	601 href="#structural-pseudos">Structural

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

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

	604 <tr>

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

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

	607 <td class="described"><a

	608 href="#structural-pseudos">Structural

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

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

	611 <tr>

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

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

	614 <td class="described"><a

	615 href="#structural-pseudos">Structural

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

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

	618 <tr>

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

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

	621 <td class="described"><a

	622 href="#structural-pseudos">Structural

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

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

	625 <tr>

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

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

	628 <td class="described"><a

	629 href="#structural-pseudos">Structural

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

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

	632 <tr>

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

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

	635 nodes)</td>

	636 <td class="described"><a

	637 href="#structural-pseudos">Structural

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

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

	640 <tr>

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

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

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

	644 (:visited)</td>

	645 <td class="described"><a

	646 href="#link">The link

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

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

	649 <tr>

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

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

	652 <td class="described"><a

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

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

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

	656 <tr>

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

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

	659 <td class="described"><a

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

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

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

	663 <tr>

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

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

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

	667 <td class="described"><a

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

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

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

	671 <tr>

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

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

	674 disabled</td>

	675 <td class="described"><a

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

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

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

	679 <tr>

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

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

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

	683 <td class="described"><a

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

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

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

	687 <tr>

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

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

	690 <td class="described"><a

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

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

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

	694 <tr>

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

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

	697 <td class="described"><a

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

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

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

	701 <tr>

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

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

	704 selected/highlighted by the user</td>

	705 <td class="described"><a

	706 href="#UIfragments">The UI element

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

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

	709 <tr>

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

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

	712 <td class="described"><a

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

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

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

	716 <tr>

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

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

	719 <td class="described"><a

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

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

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

	723 <tr>

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

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

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

	727 <td class="described"><a

	728 href="#class-html">Class

	729 selectors</a></td>

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

	731 <tr>

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

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

	734 <td class="described"><a

	735 href="#id-selectors">ID

	736 selectors</a></td>

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

	738 <tr>

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

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

	741 <td class="described"><a

	742 href="#negation">Negation

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

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

	745 <tr>

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

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

	748 <td class="described"><a

	749 href="#descendant-combinators">Descendant

	750 combinator</a></td>

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

	752 <tr>

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

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

	755 <td class="described"><a

	756 href="#child-combinators">Child

	757 combinator</a></td>

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

	759 <tr>

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

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

	762 <td class="described"><a

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

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

	765 <tr>

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

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

	768 <td class="described"><a

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

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

	771

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

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

	774 column.</p>

	775

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

	777

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

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

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

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

	782

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

	784

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

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

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

	788

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

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

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

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

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

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

	795

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

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

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

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

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

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

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

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

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

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

	806 sequence of simple selectors.</p>

	807

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

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

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

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

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

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

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

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

	816 never part of white space.</p>

	817

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

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

	820 selector consisting of a single sequence of simple selectors

	821 represents any element satisfying its requirements. Prepending another

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

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

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

	825 simple selectors.</p>

	826

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

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

	829 selector</a>.</p>

	830

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

	832

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

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

	835

	836 <div class="example">

	837 <p>CSS examples:</p>

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

	839 declarations into one. Thus,</p>

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

	841 h2 { font-family: sans-serif }

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

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

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

	845 </div>

	846

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

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

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

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

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

	852 heading rules would be invalidated.</p>

	853

	854

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

	856

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

	858

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

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

	861 type in the document tree.</p>

	862

	863 <div class="example">

	864 <p>Example:</p>

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

	866 <pre>h1</pre>

	867 </div>

	868

	869

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

	871

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

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

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

	875 separated by the namespace separator "vertical bar"

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

	877

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

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

	880

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

	882 the selector represents elements in any namespace (including elements

	883 with no namespace).</p>

	884

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

	886 namespace separator), represent elements without regard to the

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

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

	889 the selector will represent only elements in the default

	890 namespace.</p>

	891

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

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

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

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

	896 in the General Syntax module.</p>

	897

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

	899 against the <a

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

	901 of the element's <a

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

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

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

	905

	906 <p>In summary:</p>

	907

	908 <dl>

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

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

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

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

	913 declared namespace</dd>

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

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

	916 <dt><code>E</code></dt>

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

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

	919 </dl>

	920

	921 <div class="example">

	922 <p>CSS examples:</p>

	923

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

	925 foo\|h1 { color: blue }

	926 foo\|* { color: yellow }

	927 \|h1 { color: red }

	928 *\|h1 { color: green }

	929 h1 { color: green }</pre>

	930

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

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

	933

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

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

	936

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

	938 any declared namespace.</p>

	939

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

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

	942

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

	944 namespace has been defined.</p>

	945

	946 </div>

	947

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

	949

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

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

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

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

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

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

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

	957

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

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

	960

	961 <div class="example">

	962 <p>Examples:</p>

	963 <ul>

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

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

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

	967 </ul>

	968 </div>

	969

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

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

	972 omitted.</p>

	973

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

	975

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

	977 is used as follows:</p>

	978

	979 <dl>

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

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

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

	983 <dd>all elements</dd>

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

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

	986 <dt><code>*</code></dt>

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

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

	989 </dl>

	990

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

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

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

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

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

	996

	997

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

	999

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

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

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

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

	1004 attribute selector.</p>

	1005

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

	1007 selectors</a></h4>

	1008

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

	1010

	1011 <dl>

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

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

	1014 the attribute.</dd>

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

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

	1017 "val".</dd>

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

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

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

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

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

	1023 spaces).</dd>

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

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

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

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

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

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

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

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

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

	1033 </dl>

	1034

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

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

	1037 the document language.</p>

	1038

	1039 <div class="example">

	1040

	1041 <p>Examples:</p>

	1042

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

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

	1045 value:</p>

	1046

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

	1048

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

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

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

	1052

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

	1054

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

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

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

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

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

	1060 "Columbus":</p>

	1061

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

	1063

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

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

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

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

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

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

	1070

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

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

	1073

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

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

	1076

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

	1078

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

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

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

	1082

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

	1084

	1085 <p>Similarly, the following selectors represents a

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

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

	1088

	1089 <pre>DIALOGUE[character=romeo]

	1090 DIALOGUE[character=juliet]</pre>

	1091

	1092 </div>

	1093

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

	1095 selectors</h4>

	1096

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

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

	1099

	1100 <dl>

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

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

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

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

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

	1106 the suffix "val".</dd>

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

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

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

	1110 </dl>

	1111

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

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

	1114 document language.</p>

	1115

	1116 <div class="example">

	1117 <p>Examples:</p>

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

	1119 image:</p>

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

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

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

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

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

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

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

	1127 </div>

	1128

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

	1130

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

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

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

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

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

	1136 apply to attributes, therefore attribute selectors without a namespace

	1137 component apply only to attributes that have no declared namespace

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

	1139 namespace prefix indicating that the selector is to match all

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

	1141

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

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

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

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

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

	1147

	1148 <div class="example">

	1149 <p>CSS examples:</p>

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

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

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

	1153 [\|att] { color: green }

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

	1155

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

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

	1158 value "val".</p>

	1159

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

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

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

	1163

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

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

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

	1167

	1168 </div>

	1169

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

	1171

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

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

	1174 elsewhere, but cannot always be selected by attribute

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

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

	1177

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

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

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

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

	1182

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

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

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

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

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

	1188

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

	1190 choose to ignore external subsets.</p>

	1191

	1192 <div class="example">

	1193 <p>Example:</p>

	1194

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

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

	1197

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

	1199

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

	1201

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

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

	1204

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

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

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

	1208

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

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

	1211

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

	1213 more specific than the tag

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

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

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

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

	1218 cases' style rules.</p>

	1219

	1220 </div>

	1221

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

	1223

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

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

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

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

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

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

	1230

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

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

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

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

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

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

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

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

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

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

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

	1242

	1243 <div class="example">

	1244 <p>CSS examples:</p>

	1245

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

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

	1248

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

	1250

	1251 <p>or just</p>

	1252

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

	1254

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

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

	1257

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

	1259

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

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

	1262

	1263 <pre><H1>Not green</H1>

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

	1265

	1266 </div>

	1267

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

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

	1270

	1271 <div class="example">

	1272

	1273 <p>CSS example:</p>

	1274

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

	1276 has been assigned a list of <a

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

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

	1279

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

	1281

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

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

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

	1285

	1286 </div>

	1287

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

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

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

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

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

	1293 practice since the structural elements of a document language often

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

	1295 not.</p>

	1296

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

	1298 class attributes, their values must be concatenated with spaces

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

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

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

	1302 this specification.</p>

	1303

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

	1305

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

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

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

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

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

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

	1312 may name ID attributes differently, but the same restriction

	1313 applies.</p>

	1314

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

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

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

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

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

	1320 identifier.</p>

	1321

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

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

	1324 information hard-coded or ask the user.

	1325

	1326 <div class="example">

	1327 <p>Examples:</p>

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

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

	1330 <pre>h1#chapter1</pre>

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

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

	1333 <pre>#chapter1</pre>

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

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

	1336 <pre>*#z98y</pre>

	1337 </div>

	1338

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

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

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

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

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

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

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

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

	1347 should use normal attribute selectors instead:

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

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

	1350

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

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

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

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

	1355

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

	1357

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

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

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

	1361

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

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

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

	1365

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

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

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

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

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

	1371 others can be applied simultaneously to the same

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

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

	1374 document.</p>

	1375

	1376

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

	1378

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

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

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

	1382

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

	1384 document tree.</p>

	1385

	1386

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

	1388

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

	1390 previously visited ones. Selectors

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

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

	1393

	1394 <ul>

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

	1396 not yet been visited.</li>

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

	1398 been visited by the user. </li>

	1399 </ul>

	1400

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

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

	1403

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

	1405

	1406 <div class="example">

	1407

	1408 <p>Example:</p>

	1409

	1410 <p>The following selector represents links carrying class

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

	1412

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

	1414

	1415 </div>

	1416

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

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

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

	1420

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

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

	1423 and unvisited links differently.</p>

	1424

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

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

	1427

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

	1429 to user actions. Selectors provides

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

	1431 acting on.</p>

	1432

	1433 <ul>

	1434

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

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

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

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

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

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

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

	1442 user agents that support <a

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

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

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

	1446

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

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

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

	1450

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

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

	1453 input). </li>

	1454

	1455 </ul>

	1456

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

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

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

	1460

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

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

	1463

	1464 <p>Selectors doesn't define if the parent of an element that is

	1465 ':active' or ':hover' is also in that state.</p>

	1466

	1467 <div class="example">

	1468 <p>Examples:</p>

	1469 <pre>a:link /* unvisited links */

	1470 a:visited /* visited links */

	1471 a:hover /* user hovers */

	1472 a:active /* active links */</pre>

	1473 <p>An example of combining dynamic pseudo-classes:</p>

	1474 <pre>a:focus

	1475 a:focus:hover</pre>

	1476 <p>The last selector matches <code>a</code> elements that are in

	1477 the pseudo-class :focus and in the pseudo-class :hover.</p>

	1478 </div>

	1479

	1480 <p class="note"><strong>Note:</strong> An element can be both ':visited'

	1481 and ':active' (or ':link' and ':active').</p>

	1482

	1483 <h4><a name=target-pseudo>6.6.2. The target pseudo-class :target</a></h4>

	1484

	1485 <p>Some URIs refer to a location within a resource. This kind of URI

	1486 ends with a "number sign" (#) followed by an anchor

	1487 identifier (called the fragment identifier).</p>

	1488

	1489 <p>URIs with fragment identifiers link to a certain element within the

	1490 document, known as the target element. For instance, here is a URI

	1491 pointing to an anchor named <code>section_2</code> in an HTML

	1492 document:</p>

	1493

	1494 <pre>http://example.com/html/top.html#section_2</pre>

	1495

	1496 <p>A target element can be represented by the <code>:target</code>

	1497 pseudo-class. If the document's URI has no fragment identifier, then

	1498 the document has no target element.</p>

	1499

	1500 <div class="example">

	1501 <p>Example:</p>

	1502 <pre>p.note:target</pre>

	1503 <p>This selector represents a <code>p</code> element of class

	1504 <code>note</code> that is the target element of the referring

	1505 URI.</p>

	1506 </div>

	1507

	1508 <div class="example">

	1509 <p>CSS example:</p>

	1510 <p>Here, the <code>:target</code> pseudo-class is used to make the

	1511 target element red and place an image before it, if there is one:</p>

	1512 <pre>*:target { color : red }

	1513 *:target::before { content : url(target.png) }</pre>

	1514 </div>

	1515

	1516 <h4><a name=lang-pseudo>6.6.3. The language pseudo-class :lang</a></h4>

	1517

	1518 <p>If the document language specifies how the human language of an

	1519 element is determined, it is possible to write selectors that

	1520 represent an element based on its language. For example, in HTML <a

	1521 href="#refsHTML4">[HTML4]</a>, the language is determined by a

	1522 combination of the <code>lang</code> attribute, the <code>meta</code>

	1523 element, and possibly by information from the protocol (such as HTTP

	1524 headers). XML uses an attribute called <code>xml:lang</code>, and

	1525 there may be other document language-specific methods for determining

	1526 the language.</p>

	1527

	1528 <p>The pseudo-class <code>:lang(C)</code> represents an element that

	1529 is in language C. Whether an element is represented by a

	1530 <code>:lang()</code> selector is based solely on the identifier C

	1531 being either equal to, or a hyphen-separated substring of, the

	1532 element's language value, in the same way as if performed by the <a

	1533 href="#attribute-representation">'\|='</a> operator in attribute

	1534 selectors. The identifier C does not have to be a valid language

	1535 name.</p>

	1536

	1537 <p>C must not be empty. (If it is, the selector is invalid.)</p>

	1538

	1539 <p class="note"><strong>Note:</strong> It is recommended that

	1540 documents and protocols indicate language using codes from RFC 3066 <a

	1541 href="#refsRFC3066">[RFC3066]</a> or its successor, and by means of

	1542 "xml:lang" attributes in the case of XML-based documents <a

	1543 href="#refsXML10">[XML10]</a>. See <a

	1544 href="http://www.w3.org/International/questions/qa-lang-2or3.html">

	1545 "FAQ: Two-letter or three-letter language codes."</a></p>

	1546

	1547 <div class="example">

	1548 <p>Examples:</p>

	1549 <p>The two following selectors represent an HTML document that is in

	1550 Belgian, French, or German. The two next selectors represent

	1551 <code>q</code> quotations in an arbitrary element in Belgian, French,

	1552 or German.</p>

	1553 <pre>html:lang(fr-be)

	1554 html:lang(de)

	1555 :lang(fr-be) > q

	1556 :lang(de) > q</pre>

	1557 </div>

	1558

	1559 <h4><a name=UIstates>6.6.4. The UI element states pseudo-classes</a></h4>

	1560

	1561 <h5><a name=enableddisabled>The :enabled and :disabled pseudo-classes</a></h5>

	1562

	1563 <p>The <code>:enabled</code> pseudo-class allows authors to customize

	1564 the look of user interface elements that are enabled — which the

	1565 user can select or activate in some fashion (e.g. clicking on a button

	1566 with a mouse). There is a need for such a pseudo-class because there

	1567 is no way to programmatically specify the default appearance of say,

	1568 an enabled <code>input</code> element without also specifying what it

	1569 would look like when it was disabled.</p>

	1570

	1571 <p>Similar to <code>:enabled</code>, <code>:disabled</code> allows the

	1572 author to specify precisely how a disabled or inactive user interface

	1573 element should look.</p>

	1574

	1575 <p>Most elements will be neither enabled nor disabled. An element is

	1576 enabled if the user can either activate it or transfer the focus to

	1577 it. An element is disabled if it could be enabled, but the user cannot

	1578 presently activate it or transfer focus to it.</p>

	1579

	1580

	1581 <h5><a name=checked>The :checked pseudo-class</a></h5>

	1582

	1583 <p>Radio and checkbox elements can be toggled by the user. Some menu

	1584 items are "checked" when the user selects them. When such elements are

	1585 toggled "on" the <code>:checked</code> pseudo-class applies. The

	1586 <code>:checked</code> pseudo-class initially applies to such elements

	1587 that have the HTML4 <code>selected</code> and <code>checked</code>

	1588 attributes as described in <a

	1589 href="http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.2.1">Section

	1590 17.2.1 of HTML4</a>, but of course the user can toggle "off" such

	1591 elements in which case the <code>:checked</code> pseudo-class would no

	1592 longer apply. While the <code>:checked</code> pseudo-class is dynamic

	1593 in nature, and is altered by user action, since it can also be based

	1594 on the presence of the semantic HTML4 <code>selected</code> and

	1595 <code>checked</code> attributes, it applies to all media.

	1596

	1597

	1598 <h5><a name=indeterminate>The :indeterminate pseudo-class</a></h5>

	1599

	1600 <div class="note">

	1601

	1602 <p>Radio and checkbox elements can be toggled by the user, but are

	1603 sometimes in an indeterminate state, neither checked nor unchecked.

	1604 This can be due to an element attribute, or DOM manipulation.</p>

	1605

	1606 <p>A future version of this specification may introduce an

	1607 <code>:indeterminate</code> pseudo-class that applies to such elements.

	1608 <!--While the <code>:indeterminate</code> pseudo-class is dynamic in

	1609 nature, and is altered by user action, since it can also be based on

	1610 the presence of an element attribute, it applies to all media.</p>

	1611

	1612 <p>Components of a radio-group initialized with no pre-selected choice

	1613 are an example of :indeterminate state.--></p>

	1614

	1615 </div>

	1616

	1617

	1618 <h4><a name=structural-pseudos>6.6.5. Structural pseudo-classes</a></h4>

	1619

	1620 <p>Selectors introduces the concept of <dfn>structural

	1621 pseudo-classes</dfn> to permit selection based on extra information that lies in

	1622 the document tree but cannot be represented by other simple selectors or

	1623 combinators.

	1624

	1625 <p>Note that standalone pieces of PCDATA (text nodes in the DOM) are

	1626 not counted when calculating the position of an element in the list of

	1627 children of its parent. When calculating the position of an element in

	1628 the list of children of its parent, the index numbering starts at 1.

	1629

	1630

	1631 <h5><a name=root-pseudo>:root pseudo-class</a></h5>

	1632

	1633 <p>The <code>:root</code> pseudo-class represents an element that is

	1634 the root of the document. In HTML 4, this is always the

	1635 <code>HTML</code> element.

	1636

	1637

	1638 <h5><a name=nth-child-pseudo>:nth-child() pseudo-class</a></h5>

	1639

	1640 <p>The

	1641 <code>:nth-child(<var>a</var><code>n</code>+<var>b</var>)</code>

	1642 pseudo-class notation represents an element that has

	1643 <var>a</var><code>n</code>+<var>b</var>-1 siblings

	1644 <strong>before</strong> it in the document tree, for a given positive

	1645 integer or zero value of <code>n</code>, and has a parent element. In

	1646 other words, this matches the <var>b</var>th child of an element after

	1647 all the children have been split into groups of <var>a</var> elements

	1648 each. For example, this allows the selectors to address every other

	1649 row in a table, and could be used to alternate the color

	1650 of paragraph text in a cycle of four. The <var>a</var> and

	1651 <var>b</var> values must be zero, negative integers or positive

	1652 integers. The index of the first child of an element is 1.

	1653

	1654 <p>In addition to this, <code>:nth-child()</code> can take

	1655 '<code>odd</code>' and '<code>even</code>' as arguments instead.

	1656 '<code>odd</code>' has the same signification as <code>2n+1</code>,

	1657 and '<code>even</code>' has the same signification as <code>2n</code>.

	1658

	1659

	1660 <div class="example">

	1661 <p>Examples:</p>

	1662 <pre>tr:nth-child(2n+1) /* represents every odd row of an HTML table */

	1663 tr:nth-child(odd) /* same */

	1664 tr:nth-child(2n) /* represents every even row of an HTML table */

	1665 tr:nth-child(even) /* same */

	1666

	1667 /* Alternate paragraph colours in CSS */

	1668 p:nth-child(4n+1) { color: navy; }

	1669 p:nth-child(4n+2) { color: green; }

	1670 p:nth-child(4n+3) { color: maroon; }

	1671 p:nth-child(4n+4) { color: purple; }</pre>

	1672 </div>

	1673

	1674 <p>When <var>a</var>=0, no repeating is used, so for example

	1675 <code>:nth-child(0n+5)</code> matches only the fifth child. When

	1676 <var>a</var>=0, the <var>a</var><code>n</code> part need not be

	1677 included, so the syntax simplifies to

	1678 <code>:nth-child(<var>b</var>)</code> and the last example simplifies

	1679 to <code>:nth-child(5)</code>.

	1680

	1681 <div class="example">

	1682 <p>Examples:</p>

	1683 <pre>foo:nth-child(0n+1) /* represents an element foo, first child of its pare nt element */

	1684 foo:nth-child(1) /* same */</pre>

	1685 </div>

	1686

	1687 <p>When <var>a</var>=1, the number may be omitted from the rule.

	1688

	1689 <div class="example">

	1690 <p>Examples:</p>

	1691 <p>The following selectors are therefore equivalent:</p>

	1692 <pre>bar:nth-child(1n+0) /* represents all bar elements, specificity (0,1,1) * /

	1693 bar:nth-child(n+0) /* same */

	1694 bar:nth-child(n) /* same */

	1695 bar /* same but lower specificity (0,0,1) */</pre>

	1696 </div>

	1697

	1698 <p>If <var>b</var>=0, then every <var>a</var>th element is picked. In

	1699 such a case, the <var>b</var> part may be omitted.

	1700

	1701 <div class="example">

	1702 <p>Examples:</p>

	1703 <pre>tr:nth-child(2n+0) /* represents every even row of an HTML table */

	1704 tr:nth-child(2n) /* same */</pre>

	1705 </div>

	1706

	1707 <p>If both <var>a</var> and <var>b</var> are equal to zero, the

	1708 pseudo-class represents no element in the document tree.</p>

	1709

	1710 <p>The value <var>a</var> can be negative, but only the positive

	1711 values of <var>a</var><code>n</code>+<var>b</var>, for

	1712 <code>n</code>≥0, may represent an element in the document

	1713 tree.</p>

	1714

	1715 <div class="example">

	1716 <p>Example:</p>

	1717 <pre>html\|tr:nth-child(-n+6) /* represents the 6 first rows of XHTML tables */< /pre>

	1718 </div>

	1719

	1720 <p>When the value <var>b</var> is negative, the "+" character in the

	1721 expression must be removed (it is effectively replaced by the "-"

	1722 character indicating the negative value of <var>b</var>).</p>

	1723

	1724 <div class="example">

	1725 <p>Examples:</p>

	1726 <pre>:nth-child(10n-1) /* represents the 9th, 19th, 29th, etc, element */

	1727 :nth-child(10n+9) /* Same */

	1728 :nth-child(10n+-1) /* Syntactically invalid, and would be ignored */</pre>

	1729 </div>

	1730

	1731

	1732 <h5><a name=nth-last-child-pseudo>:nth-last-child() pseudo-class</a></h5>

	1733

	1734 <p>The <code>:nth-last-child(<var>a</var>n+<var>b</var>)</code>

	1735 pseudo-class notation represents an element that has

	1736 <var>a</var><code>n</code>+<var>b</var>-1 siblings

	1737 <strong>after</strong> it in the document tree, for a given positive

	1738 integer or zero value of <code>n</code>, and has a parent element. See

	1739 <code>:nth-child()</code> pseudo-class for the syntax of its argument.

	1740 It also accepts the '<code>even</code>' and '<code>odd</code>' values

	1741 as arguments.

	1742

	1743

	1744 <div class="example">

	1745 <p>Examples:</p>

	1746 <pre>tr:nth-last-child(-n+2) /* represents the two last rows of an HTML table */

	1747

	1748 foo:nth-last-child(odd) /* represents all odd foo elements in their parent el ement,

	1749 counting from the last one */</pre>

	1750 </div>

	1751

	1752

	1753 <h5><a name=nth-of-type-pseudo>:nth-of-type() pseudo-class</a></h5>

	1754

	1755 <p>The <code>:nth-of-type(<var>a</var>n+<var>b</var>)</code>

	1756 pseudo-class notation represents an element that has

	1757 <var>a</var><code>n</code>+<var>b</var>-1 siblings with the same

	1758 element name <strong>before</strong> it in the document tree, for a

	1759 given zero or positive integer value of <code>n</code>, and has a

	1760 parent element. In other words, this matches the <var>b</var>th child

	1761 of that type after all the children of that type have been split into

	1762 groups of a elements each. See <code>:nth-child()</code> pseudo-class

	1763 for the syntax of its argument. It also accepts the

	1764 '<code>even</code>' and '<code>odd</code>' values.

	1765

	1766

	1767 <div class="example">

	1768 <p>CSS example:</p>

	1769 <p>This allows an author to alternate the position of floated images:</p>

	1770 <pre>img:nth-of-type(2n+1) { float: right; }

	1771 img:nth-of-type(2n) { float: left; }</pre>

	1772 </div>

	1773

	1774

	1775 <h5><a name=nth-last-of-type-pseudo>:nth-last-of-type() pseudo-class</a></h5>

	1776

	1777 <p>The <code>:nth-last-of-type(<var>a</var>n+<var>b</var>)</code>

	1778 pseudo-class notation represents an element that has

	1779 <var>a</var><code>n</code>+<var>b</var>-1 siblings with the same

	1780 element name <strong>after</strong> it in the document tree, for a

	1781 given zero or positive integer value of <code>n</code>, and has a

	1782 parent element. See <code>:nth-child()</code> pseudo-class for the

	1783 syntax of its argument. It also accepts the '<code>even</code>' and '<code>odd</ code>' values.

	1784

	1785

	1786 <div class="example">

	1787 <p>Example:</p>

	1788 <p>To represent all <code>h2</code> children of an XHTML

	1789 <code>body</code> except the first and last, one could use the

	1790 following selector:</p>

	1791 <pre>body > h2:nth-of-type(n+2):nth-last-of-type(n+2)</pre>

	1792 <p>In this case, one could also use <code>:not()</code>, although the

	1793 selector ends up being just as long:</p>

	1794 <pre>body > h2:not(:first-of-type):not(:last-of-type)</pre>

	1795 </div>

	1796

	1797

	1798 <h5><a name=first-child-pseudo>:first-child pseudo-class</a></h5>

	1799

	1800 <p>Same as <code>:nth-child(1)</code>. The <code>:first-child</code> pseudo-clas s

	1801 represents an element that is the first child of some other element.

	1802

	1803

	1804 <div class="example">

	1805 <p>Examples:</p>

	1806 <p>The following selector represents a <code>p</code> element that is

	1807 the first child of a <code>div</code> element:</p>

	1808 <pre>div > p:first-child</pre>

	1809 <p>This selector can represent the <code>p</code> inside the

	1810 <code>div</code> of the following fragment:</p>

	1811 <pre><p> The last P before the note.</p>

	1812 <div class="note">

	1813 <p> The first P inside the note.</p>

	1814 </div></pre>but cannot represent the second <code>p</code> in the followin g

	1815 fragment:

	1816 <pre><p> The last P before the note.</p>

	1817 <div class="note">

	1818 <h2> Note </h2>

	1819 <p> The first P inside the note.</p>

	1820 </div></pre>

	1821 <p>The following two selectors are usually equivalent:</p>

	1822 <pre>* > a:first-child /* a is first child of any element */

	1823 a:first-child /* Same (assuming a is not the root element) */</pre>

	1824 </div>

	1825

	1826 <h5><a name=last-child-pseudo>:last-child pseudo-class</a></h5>

	1827

	1828 <p>Same as <code>:nth-last-child(1)</code>. The <code>:last-child</code> pseudo- class

	1829 represents an element that is the last child of some other element.

	1830

	1831 <div class="example">

	1832 <p>Example:</p>

	1833 <p>The following selector represents a list item <code>li</code> that

	1834 is the last child of an ordered list <code>ol</code>.

	1835 <pre>ol > li:last-child</pre>

	1836 </div>

	1837

	1838 <h5><a name=first-of-type-pseudo>:first-of-type pseudo-class</a></h5>

	1839

	1840 <p>Same as <code>:nth-of-type(1)</code>. The <code>:first-of-type</code> pseudo- class

	1841 represents an element that is the first sibling of its type in the list of

	1842 children of its parent element.

	1843

	1844 <div class="example">

	1845 <p>Example:</p>

	1846 <p>The following selector represents a definition title

	1847 <code>dt</code> inside a definition list <code>dl</code>, this

	1848 <code>dt</code> being the first of its type in the list of children of

	1849 its parent element.</p>

	1850 <pre>dl dt:first-of-type</pre>

	1851 <p>It is a valid description for the first two <code>dt</code>

	1852 elements in the following example but not for the third one:</p>

	1853 <pre><dl>

	1854 <dt>gigogne</dt>

	1855 <dd>

	1856 <dl>

	1857 <dt>fusée</dt>

	1858 <dd>multistage rocket</dd>

	1859 <dt>table</dt>

	1860 <dd>nest of tables</dd>

	1861 </dl>

	1862 </dd>

	1863 </dl></pre>

	1864 </div>

	1865

	1866 <h5><a name=last-of-type-pseudo>:last-of-type pseudo-class</a></h5>

	1867

	1868 <p>Same as <code>:nth-last-of-type(1)</code>. The

	1869 <code>:last-of-type</code> pseudo-class represents an element that is

	1870 the last sibling of its type in the list of children of its parent

	1871 element.</p>

	1872

	1873 <div class="example">

	1874 <p>Example:</p>

	1875 <p>The following selector represents the last data cell

	1876 <code>td</code> of a table row.</p>

	1877 <pre>tr > td:last-of-type</pre>

	1878 </div>

	1879

	1880 <h5><a name=only-child-pseudo>:only-child pseudo-class</a></h5>

	1881

	1882 <p>Represents an element that has a parent element and whose parent

	1883 element has no other element children. Same as

	1884 <code>:first-child:last-child</code> or

	1885 <code>:nth-child(1):nth-last-child(1)</code>, but with a lower

	1886 specificity.</p>

	1887

	1888 <h5><a name=only-of-type-pseudo>:only-of-type pseudo-class</a></h5>

	1889

	1890 <p>Represents an element that has a parent element and whose parent

	1891 element has no other element children with the same element name. Same

	1892 as <code>:first-of-type:last-of-type</code> or

	1893 <code>:nth-of-type(1):nth-last-of-type(1)</code>, but with a lower

	1894 specificity.</p>

	1895

	1896

	1897 <h5><a name=empty-pseudo></a>:empty pseudo-class</h5>

	1898

	1899 <p>The <code>:empty</code> pseudo-class represents an element that has

	1900 no children at all. In terms of the DOM, only element nodes and text

	1901 nodes (including CDATA nodes and entity references) whose data has a

	1902 non-zero length must be considered as affecting emptiness; comments,

	1903 PIs, and other nodes must not affect whether an element is considered

	1904 empty or not.</p>

	1905

	1906 <div class="example">

	1907 <p>Examples:</p>

	1908 <p><code>p:empty</code> is a valid representation of the following fragment:</p >

	1909 <pre><p></p></pre>

	1910 <p><code>foo:empty</code> is not a valid representation for the

	1911 following fragments:</p>

	1912 <pre><foo>bar</foo></pre>

	1913 <pre><foo><bar>bla</bar></foo></pre>

	1914 <pre><foo>this is not <bar>:empty</bar></foo></pre>

	1915 </div>

	1916

	1917 <h4><a name=content-selectors>6.6.6. Blank</a></h4> <!-- It's the Return of Appe ndix H!!! Run away! -->

	1918

	1919 <p>This section intentionally left blank.</p>

	1920 <!-- (used to be :contains()) -->

	1921

	1922 <h4><a name=negation></a>6.6.7. The negation pseudo-class</h4>

	1923

	1924 <p>The negation pseudo-class, <code>:not(<var>X</var>)</code>, is a

	1925 functional notation taking a <a href="#simple-selectors-dfn">simple

	1926 selector</a> (excluding the negation pseudo-class itself and

	1927 pseudo-elements) as an argument. It represents an element that is not

	1928 represented by the argument.

	1929

	1930 <!-- pseudo-elements are not simple selectors, so the above paragraph

	1931 may be a bit confusing -->

	1932

	1933 <div class="example">

	1934 <p>Examples:</p>

	1935 <p>The following CSS selector matches all <code>button</code>

	1936 elements in an HTML document that are not disabled.</p>

	1937 <pre>button:not([DISABLED])</pre>

	1938 <p>The following selector represents all but <code>FOO</code>

	1939 elements.</p>

	1940 <pre>*:not(FOO)</pre>

	1941 <p>The following group of selectors represents all HTML elements

	1942 except links.</p>

	1943 <pre>html\|*:not(:link):not(:visited)</pre>

	1944 </div>

	1945

	1946 <p>Default namespace declarations do not affect the argument of the

	1947 negation pseudo-class unless the argument is a universal selector or a

	1948 type selector.</p>

	1949

	1950 <div class="example">

	1951 <p>Examples:</p>

	1952 <p>Assuming that the default namespace is bound to

	1953 "http://example.com/", the following selector represents all

	1954 elements that are not in that namespace:</p>

	1955 <pre>\|:not(*)</pre>

	1956 <p>The following CSS selector matches any element being hovered,

	1957 regardless of its namespace. In particular, it is not limited to

	1958 only matching elements in the default namespace that are not being

	1959 hovered, and elements not in the default namespace don't match the

	1960 rule when they <em>are</em> being hovered.</p>

	1961 <pre>\|:not(:hover)</pre>

	1962 </div>

	1963

	1964 <p class="note"><strong>Note</strong>: the :not() pseudo allows

	1965 useless selectors to be written. For instance <code>:not(\|)</code>,

	1966 which represents no element at all, or <code>foo:not(bar)</code>,

	1967 which is equivalent to <code>foo</code> but with a higher

	1968 specificity.</p>

	1969

	1970 <h3><a name=pseudo-elements>7. Pseudo-elements</a></h3>

	1971

	1972 <p>Pseudo-elements create abstractions about the document tree beyond

	1973 those specified by the document language. For instance, document

	1974 languages do not offer mechanisms to access the first letter or first

	1975 line of an element's content. Pseudo-elements allow designers to refer

	1976 to this otherwise inaccessible information. Pseudo-elements may also

	1977 provide designers a way to refer to content that does not exist in the

	1978 source document (e.g., the <code>::before</code> and

	1979 <code>::after</code> pseudo-elements give access to generated

	1980 content).</p>

	1981

	1982 <p>A pseudo-element is made of two colons (<code>::</code>) followed

	1983 by the name of the pseudo-element.</p>

	1984

	1985 <p>This <code>::</code> notation is introduced by the current document

	1986 in order to establish a discrimination between pseudo-classes and

	1987 pseudo-elements. For compatibility with existing style sheets, user

	1988 agents must also accept the previous one-colon notation for

	1989 pseudo-elements introduced in CSS levels 1 and 2 (namely,

	1990 <code>:first-line</code>, <code>:first-letter</code>,

	1991 <code>:before</code> and <code>:after</code>). This compatibility is

	1992 not allowed for the new pseudo-elements introduced in CSS level 3.</p>

	1993

	1994 <p>Only one pseudo-element may appear per selector, and if present it

	1995 must appear after the sequence of simple selectors that represents the

	1996 <a href="#subject">subjects</a> of the selector. <span class="note">A

	1997 future version of this specification may allow multiple

	1998 pesudo-elements per selector.</span></p>

	1999

	2000 <h4><a name=first-line>7.1. The ::first-line pseudo-element</a></h4>

	2001

	2002 <p>The <code>::first-line</code> pseudo-element describes the contents

	2003 of the first formatted line of an element.

	2004

	2005 <div class="example">

	2006 <p>CSS example:</p>

	2007 <pre>p::first-line { text-transform: uppercase }</pre>

	2008 <p>The above rule means "change the letters of the first line of every

	2009 paragraph to uppercase".</p>

	2010 </div>

	2011

	2012 <p>The selector <code>p::first-line</code> does not match any real

	2013 HTML element. It does match a pseudo-element that conforming user

	2014 agents will insert at the beginning of every paragraph.</p>

	2015

	2016 <p>Note that the length of the first line depends on a number of

	2017 factors, including the width of the page, the font size, etc. Thus,

	2018 an ordinary HTML paragraph such as:</p>

	2019

	2020 <pre>

	2021 <P>This is a somewhat long HTML

	2022 paragraph that will be broken into several

	2023 lines. The first line will be identified

	2024 by a fictional tag sequence. The other lines

	2025 will be treated as ordinary lines in the

	2026 paragraph.</P>

	2027 </pre>

	2028

	2029 <p>the lines of which happen to be broken as follows:

	2030

	2031 <pre>

	2032 THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT

	2033 will be broken into several lines. The first

	2034 line will be identified by a fictional tag

	2035 sequence. The other lines will be treated as

	2036 ordinary lines in the paragraph.

	2037 </pre>

	2038

	2039 <p>This paragraph might be "rewritten" by user agents to include the

	2040 <em>fictional tag sequence</em> for <code>::first-line</code>. This

	2041 fictional tag sequence helps to show how properties are inherited.</p>

	2042

	2043 <pre>

	2044 <P><b><P::first-line></b> This is a somewhat long HTML

	2045 paragraph that <b></P::first-line></b> will be broken into several

	2046 lines. The first line will be identified

	2047 by a fictional tag sequence. The other lines

	2048 will be treated as ordinary lines in the

	2049 paragraph.</P>

	2050 </pre>

	2051

	2052 <p>If a pseudo-element breaks up a real element, the desired effect

	2053 can often be described by a fictional tag sequence that closes and

	2054 then re-opens the element. Thus, if we mark up the previous paragraph

	2055 with a <code>span</code> element:</p>

	2056

	2057 <pre>

	2058 <P><b><SPAN class="test"></b> This is a somewhat long HTML

	2059 paragraph that will be broken into several

	2060 lines.<b></SPAN></b> The first line will be identified

	2061 by a fictional tag sequence. The other lines

	2062 will be treated as ordinary lines in the

	2063 paragraph.</P>

	2064 </pre>

	2065

	2066 <p>the user agent could simulate start and end tags for

	2067 <code>span</code> when inserting the fictional tag sequence for

	2068 <code>::first-line</code>.

	2069

	2070 <pre>

	2071 <P><P::first-line><b><SPAN class="test"></b> This is a

	2072 somewhat long HTML

	2073 paragraph that will <b></SPAN></b></P::first-line><b><SPAN class= "test"></b> be

	2074 broken into several

	2075 lines.<b></SPAN></b> The first line will be identified

	2076 by a fictional tag sequence. The other lines

	2077 will be treated as ordinary lines in the

	2078 paragraph.</P>

	2079 </pre>

	2080

	2081 <p>In CSS, the <code>::first-line</code> pseudo-element can only be

	2082 attached to a block-level element, an inline-block, a table-caption,

	2083 or a table-cell.</p>

	2084

	2085 <p><a name="first-formatted-line"></a>The "first formatted line" of an

	2086 element may occur inside a

	2087 block-level descendant in the same flow (i.e., a block-level

	2088 descendant that is not positioned and not a float). E.g., the first

	2089 line of the <code>div</code> in <code><DIV><P>This

	2090 line...</P>&lt/DIV></code> is the first line of the <code>p</code> (assuming

	2091 that both <code>p</code> and <code>div</code> are block-level).

	2092

	2093 <p>The first line of a table-cell or inline-block cannot be the first

	2094 formatted line of an ancestor element. Thus, in <code><DIV><P

	2095 STYLE="display: inline-block">Hello<BR>Goodbye</P>

	2096 etcetera</DIV></code> the first formatted line of the

	2097 <code>div</code> is not the line "Hello".

	2098

	2099 <p class="note">Note that the first line of the <code>p</code> in this

	2100 fragment: <code><p&gt<br>First...</code> doesn't contain any

	2101 letters (assuming the default style for <code>br</code> in HTML

	2102 4). The word "First" is not on the first formatted line.

	2103

	2104 <p>A UA should act as if the fictional start tags of the

	2105 <code>::first-line</code> pseudo-elements were nested just inside the

	2106 innermost enclosing block-level element. (Since CSS1 and CSS2 were

	2107 silent on this case, authors should not rely on this behavior.) Here

	2108 is an example. The fictional tag sequence for</p>

	2109

	2110 <pre>

	2111 <DIV>

	2112 <P>First paragraph</P>

	2113 <P>Second paragraph</P>

	2114 </DIV>

	2115 </pre>

	2116

	2117 <p>is</p>

	2118

	2119 <pre>

	2120 <DIV>

	2121 <P><DIV::first-line><P::first-line>First paragraph</P::first-line> </DIV::first-line></P>

	2122 <P><P::first-line>Second paragraph</P::first-line></P>

	2123 </DIV>

	2124 </pre>

	2125

	2126 <p>The <code>::first-line</code> pseudo-element is similar to an

	2127 inline-level element, but with certain restrictions. In CSS, the

	2128 following properties apply to a <code>::first-line</code>

	2129 pseudo-element: font properties, color property, background

	2130 properties, 'word-spacing', 'letter-spacing', 'text-decoration',

	2131 'vertical-align', 'text-transform', 'line-height'. UAs may apply other

	2132 properties as well.</p>

	2133

	2134

	2135 <h4><a name=first-letter>7.2. The ::first-letter pseudo-element</a></h4>

	2136

	2137 <p>The <code>::first-letter</code> pseudo-element represents the first

	2138 letter of the first line of a block, if it is not preceded by any

	2139 other content (such as images or inline tables) on its line. The

	2140 ::first-letter pseudo-element may be used for "initial caps" and "drop

	2141 caps", which are common typographical effects. This type of initial

	2142 letter is similar to an inline-level element if its 'float' property

	2143 is 'none'; otherwise, it is similar to a floated element.</p>

	2144

	2145 <p>In CSS, these are the properties that apply to <code>::first-letter</code>

	2146 pseudo-elements: font properties, 'text-decoration', 'text-transform',

	2147 'letter-spacing', 'word-spacing' (when appropriate), 'line-height',

	2148 'float', 'vertical-align' (only if 'float' is 'none'), margin

	2149 properties, padding properties, border properties, color property,

	2150 background properties. UAs may apply other properties as well. To

	2151 allow UAs to render a typographically correct drop cap or initial cap,

	2152 the UA may choose a line-height, width and height based on the shape

	2153 of the letter, unlike for normal elements.</p>

	2154

	2155 <div class="example">

	2156 <p>Example:</p>

	2157 <p>This example shows a possible rendering of an initial cap. Note

	2158 that the 'line-height' that is inherited by the <code>::first-letter</code>

	2159 pseudo-element is 1.1, but the UA in this example has computed the

	2160 height of the first letter differently, so that it doesn't cause any

	2161 unnecessary space between the first two lines. Also note that the

	2162 fictional start tag of the first letter is inside the <span>span</span>, and thu s

	2163 the font weight of the first letter is normal, not bold as the <span>span</span> :

	2164 <pre>

	2165 p { line-height: 1.1 }

	2166 p::first-letter { font-size: 3em; font-weight: normal }

	2167 span { font-weight: bold }

	2168 ...

	2169 <p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br >

	2170 Erbarremt over my en mijn benaeuwde vesten<br>

	2171 En arme burgery, en op mijn volcx gebed<br>

	2172 En dagelix geschrey de bange stad ontzet.

	2173 </pre>

	2174 <div class="figure">

	2175 <p><img src="initial-cap.png" alt="Image illustrating the ::first-letter pseudo- element">

	2176 </div>

	2177 </div>

	2178

	2179 <div class="example">

	2180 <p>The following CSS will make a drop cap initial letter span about two lines:</ p>

	2181

	2182 <pre>

	2183 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

	2184 <HTML>

	2185 <HEAD>

	2186 <TITLE>Drop cap initial letter</TITLE>

	2187 <STYLE type="text/css">

	2188 P { font-size: 12pt; line-height: 1.2 }

	2189 P::first-letter { font-size: 200%; font-weight: bold; float: left }

	2190 SPAN { text-transform: uppercase }

	2191 </STYLE>

	2192 </HEAD>

	2193 <BODY>

	2194 <P><SPAN>The first</SPAN> few words of an article

	2195 in The Economist.</P>

	2196 </BODY>

	2197 </HTML>

	2198 </pre>

	2199

	2200 <p>This example might be formatted as follows:</p>

	2201

	2202 <div class="figure">

	2203 <P><img src="first-letter.gif" alt="Image illustrating the combined effect of th e ::first-letter and ::first-line pseudo-elements"></p>

	2204 </div>

	2205

	2206 <p>The <span class="index-inst" title="fictional tag

	2207 sequence">fictional tag sequence</span> is:</p>

	2208

	2209 <pre>

	2210 <P>

	2211 <SPAN>

	2212 <P::first-letter>

	2213 T

	2214 </P::first-letter>he first

	2215 </SPAN>

	2216 few words of an article in the Economist.

	2217 </P>

	2218 </pre>

	2219

	2220 <p>Note that the <code>::first-letter</code> pseudo-element tags abut

	2221 the content (i.e., the initial character), while the ::first-line

	2222 pseudo-element start tag is inserted right after the start tag of the

	2223 block element.</p> </div>

	2224

	2225 <p>In order to achieve traditional drop caps formatting, user agents

	2226 may approximate font sizes, for example to align baselines. Also, the

	2227 glyph outline may be taken into account when formatting.</p>

	2228

	2229 <p>Punctuation (i.e, characters defined in Unicode in the "open" (Ps),

	2230 "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po)

	2231 punctuation classes), that precedes or follows the first letter should

	2232 be included. <a href="#refsUNICODE">[UNICODE]</a></p>

	2233

	2234 <div class="figure">

	2235 <P><img src="first-letter2.gif" alt="Quotes that precede the

	2236 first letter should be included."></p>

	2237 </div>

	2238

	2239 <p>The <code>::first-letter</code> also applies if the first letter is

	2240 in fact a digit, e.g., the "6" in "67 million dollars is a lot of

	2241 money."</p>

	2242

	2243 <p>In CSS, the <code>::first-letter</code> pseudo-element applies to

	2244 block, list-item, table-cell, table-caption, and inline-block

	2245 elements. <span class="note">A future version of this specification

	2246 may allow this pesudo-element to apply to more element

	2247 types.</span></p>

	2248

	2249 <p>The <code>::first-letter</code> pseudo-element can be used with all

	2250 such elements that contain text, or that have a descendant in the same

	2251 flow that contains text. A UA should act as if the fictional start tag

	2252 of the ::first-letter pseudo-element is just before the first text of

	2253 the element, even if that first text is in a descendant.</p>

	2254

	2255 <div class="example">

	2256 <p>Example:</p>

	2257 <p>The fictional tag sequence for this HTMLfragment:

	2258 <pre><div>

	2259 <p>The first text.</pre>

	2260 <p>is:

	2261 <pre><div>

	2262 <p><div::first-letter><p::first-letter>T</...></...>he first text .</pre>

	2263 </div>

	2264

	2265 <p>The first letter of a table-cell or inline-block cannot be the

	2266 first letter of an ancestor element. Thus, in <code><DIV><P

	2267 STYLE="display: inline-block">Hello<BR>Goodbye</P>

	2268 etcetera</DIV></code> the first letter of the <code>div</code> is not the

	2269 letter "H". In fact, the <code>div</code> doesn't have a first letter.

	2270

	2271 <p>The first letter must occur on the <a

	2272 href="#first-formatted-line">first formatted line.</a> For example, in

	2273 this fragment: <code><p&gt<br>First...</code> the first line

	2274 doesn't contain any letters and <code>::first-letter</code> doesn't

	2275 match anything (assuming the default style for <code>br</code> in HTML

	2276 4). In particular, it does not match the "F" of "First."

	2277

	2278 <p>In CSS, if an element is a list item ('display: list-item'), the

	2279 <code>::first-letter</code> applies to the first letter in the

	2280 principal box after the marker. UAs may ignore

	2281 <code>::first-letter</code> on list items with 'list-style-position:

	2282 inside'. If an element has <code>::before</code> or

	2283 <code>::after</code> content, the <code>::first-letter</code> applies

	2284 to the first letter of the element <em>including</em> that content.

	2285

	2286 <div class="example">

	2287 <p>Example:</p>

	2288 <p>After the rule 'p::before {content: "Note: "}', the selector

	2289 'p::first-letter' matches the "N" of "Note".</p>

	2290 </div>

	2291

	2292 <p>Some languages may have specific rules about how to treat certain

	2293 letter combinations. In Dutch, for example, if the letter combination

	2294 "ij" appears at the beginning of a word, both letters should be

	2295 considered within the <code>::first-letter</code> pseudo-element.

	2296

	2297 <p>If the letters that would form the ::first-letter are not in the

	2298 same element, such as "'T" in <code><p>'<em>T...</code>, the UA

	2299 may create a ::first-letter pseudo-element from one of the elements,

	2300 both elements, or simply not create a pseudo-element.</p>

	2301

	2302 <p>Similarly, if the first letter(s) of the block are not at the start

	2303 of the line (for example due to bidirectional reordering), then the UA

	2304 need not create the pseudo-element(s).

	2305

	2306 <div class="example">

	2307 <p>Example:</p>

	2308 <p><a name="overlapping-example">The following example</a> illustrates

	2309 how overlapping pseudo-elements may interact. The first letter of

	2310 each P element will be green with a font size of '24pt'. The rest of

	2311 the first formatted line will be 'blue' while the rest of the

	2312 paragraph will be 'red'.</p>

	2313

	2314 <pre>p { color: red; font-size: 12pt }

	2315 p::first-letter { color: green; font-size: 200% }

	2316 p::first-line { color: blue }

	2317

	2318 <P>Some text that ends up on two lines</P></pre>

	2319

	2320 <p>Assuming that a line break will occur before the word "ends", the

	2321 <span class="index-inst" title="fictional tag sequence">fictional tag

	2322 sequence</span> for this fragment might be:</p>

	2323

	2324 <pre><P>

	2325 <P::first-line>

	2326 <P::first-letter>

	2327 S

	2328 </P::first-letter>ome text that

	2329 </P::first-line>

	2330 ends up on two lines

	2331 </P></pre>

	2332

	2333 <p>Note that the <code>::first-letter</code> element is inside the <code>::first -line</code>

	2334 element. Properties set on <code>::first-line</code> are inherited by

	2335 <code>::first-letter</code>, but are overridden if the same property is set on

	2336 <code>::first-letter</code>.</p>

	2337 </div>

	2338

	2339

	2340 <h4><a name=UIfragments>7.3.</a> <a name=selection>The ::selection pseudo-elemen t</a></h4>

	2341

	2342 <p>The <code>::selection</code> pseudo-element applies to the portion

	2343 of a document that has been highlighted by the user. This also

	2344 applies, for example, to selected text within an editable text

	2345 field. This pseudo-element should not be confused with the <code><a

	2346 href="#checked">:checked</a></code> pseudo-class (which used to be

	2347 named <code>:selected</code>)

	2348

	2349 <p>Although the <code>::selection</code> pseudo-element is dynamic in

	2350 nature, and is altered by user action, it is reasonable to expect that

	2351 when a UA re-renders to a static medium (such as a printed page, see

	2352 <a href="#refsCSS21">[CSS21]</a>) which was originally rendered to a

	2353 dynamic medium (like screen), the UA may wish to transfer the current

	2354 <code>::selection</code> state to that other medium, and have all the

	2355 appropriate formatting and rendering take effect as well. This is not

	2356 required — UAs may omit the <code>::selection</code>

	2357 pseudo-element for static media.

	2358

	2359 <p>These are the CSS properties that apply to <code>::selection</code>

	2360 pseudo-elements: color, background, cursor (optional), outline

	2361 (optional). The computed value of the 'background-image' property on

	2362 <code>::selection</code> may be ignored.

	2363

	2364

	2365 <h4><a name=gen-content>7.4. The ::before and ::after pseudo-elements</a></h4>

	2366

	2367 <p>The <code>::before</code> and <code>::after</code> pseudo-elements

	2368 can be used to describe generated content before or after an element's

	2369 content. They are explained in CSS 2.1 <a

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

	2371

	2372 <p>When the <code>::first-letter</code> and <code>::first-line</code>

	2373 pseudo-elements are combined with <code>::before</code> and

	2374 <code>::after</code>, they apply to the first letter or line of the

	2375 element including the inserted text.</p>

	2376

	2377 <h2><a name=combinators>8. Combinators</a></h2>

	2378

	2379 <h3><a name=descendant-combinators>8.1. Descendant combinator</a></h3>

	2380

	2381 <p>At times, authors may want selectors to describe an element that is

	2382 the descendant of another element in the document tree (e.g., "an

	2383 <code>EM</code> element that is contained within an <code>H1</code>

	2384 element"). Descendant combinators express such a relationship. A

	2385 descendant combinator is <a href="#whitespace">white space</a> that

	2386 separates two sequences of simple selectors. A selector of the form

	2387 "<code>A B</code>" represents an element <code>B</code> that is an

	2388 arbitrary descendant of some ancestor element <code>A</code>.

	2389

	2390 <div class="example">

	2391 <p>Examples:</p>

	2392 <p>For example, consider the following selector:</p>

	2393 <pre>h1 em</pre>

	2394 <p>It represents an <code>em</code> element being the descendant of

	2395 an <code>h1</code> element. It is a correct and valid, but partial,

	2396 description of the following fragment:</p>

	2397 <pre><h1>This <span class="myclass">headline

	2398 is <em>very</em> important</span></h1></pre>

	2399 <p>The following selector:</p>

	2400 <pre>div * p</pre>

	2401 <p>represents a <code>p</code> element that is a grandchild or later

	2402 descendant of a <code>div</code> element. Note the whitespace on

	2403 either side of the "*" is not part of the universal selector; the

	2404 whitespace is a combinator indicating that the DIV must be the

	2405 ancestor of some element, and that that element must be an ancestor

	2406 of the P.</p>

	2407 <p>The following selector, which combines descendant combinators and

	2408 <a href="#attribute-selectors">attribute selectors</a>, represents an

	2409 element that (1) has the <code>href</code> attribute set and (2) is

	2410 inside a <code>p</code> that is itself inside a <code>div</code>:</p>

	2411 <pre>div p *[href]</pre>

	2412 </div>

	2413

	2414 <h3><a name=child-combinators>8.2. Child combinators</a></h3>

	2415

	2416 <p>A <dfn>child combinator</dfn> describes a childhood relationship

	2417 between two elements. A child combinator is made of the

	2418 "greater-than sign" (<code>></code>) character and

	2419 separates two sequences of simple selectors.

	2420

	2421

	2422 <div class="example">

	2423 <p>Examples:</p>

	2424 <p>The following selector represents a <code>p</code> element that is

	2425 child of <code>body</code>:</p>

	2426 <pre>body > p</pre>

	2427 <p>The following example combines descendant combinators and child

	2428 combinators.</p>

	2429 <pre>div ol>li p</pre><!-- LEAVE THOSE SPACES OUT! see below -->

	2430 <p>It represents a <code>p</code> element that is a descendant of an

	2431 <code>li</code> element; the <code>li</code> element must be the

	2432 child of an <code>ol</code> element; the <code>ol</code> element must

	2433 be a descendant of a <code>div</code>. Notice that the optional white

	2434 space around the ">" combinator has been left out.</p>

	2435 </div>

	2436

	2437 <p>For information on selecting the first child of an element, please

	2438 see the section on the <code><a

	2439 href="#structural-pseudos">:first-child</a></code> pseudo-class

	2440 above.</p>

	2441

	2442 <h3><a name=sibling-combinators>8.3. Sibling combinators</a></h3>

	2443

	2444 <p>There are two different sibling combinators: the adjacent sibling

	2445 combinator and the general sibling combinator. In both cases,

	2446 non-element nodes (e.g. text between elements) are ignored when

	2447 considering adjacency of elements.</p>

	2448

	2449 <h4><a name=adjacent-sibling-combinators>8.3.1. Adjacent sibling combinator</a>< /h4>

	2450

	2451 <p>The adjacent sibling combinator is made of the "plus

	2452 sign" (U+002B, <code>+</code>) character that separates two

	2453 sequences of simple selectors. The elements represented by the two

	2454 sequences share the same parent in the document tree and the element

	2455 represented by the first sequence immediately precedes the element

	2456 represented by the second one.</p>

	2457

	2458 <div class="example">

	2459 <p>Examples:</p>

	2460 <p>The following selector represents a <code>p</code> element

	2461 immediately following a <code>math</code> element:</p>

	2462 <pre>math + p</pre>

	2463 <p>The following selector is conceptually similar to the one in the

	2464 previous example, except that it adds an attribute selector — it

	2465 adds a constraint to the <code>h1</code> element, that it must have

	2466 <code>class="opener"</code>:</p>

	2467 <pre>h1.opener + h2</pre>

	2468 </div>

	2469

	2470

	2471 <h4><a name=general-sibling-combinators>8.3.2. General sibling combinator</a></h 4>

	2472

	2473 <p>The general sibling combinator is made of the "tilde"

	2474 (U+007E, <code>~</code>) character that separates two sequences of

	2475 simple selectors. The elements represented by the two sequences share

	2476 the same parent in the document tree and the element represented by

	2477 the first sequence precedes (not necessarily immediately) the element

	2478 represented by the second one.</p>

	2479

	2480 <div class="example">

	2481 <p>Example:</p>

	2482 <pre>h1 ~ pre</pre>

	2483 <p>represents a <code>pre</code> element following an <code>h1</code>. It

	2484 is a correct and valid, but partial, description of:</p>

	2485 <pre><h1>Definition of the function a</h1>

	2486 <p>Function a(x) has to be applied to all figures in the table.</p>

	2487 <pre>function a(x) = 12x/13.5</pre></pre>

	2488 </div>

	2489

	2490 <h2><a name=specificity>9. Calculating a selector's specificity</a></h2>

	2491

	2492 <p>A selector's specificity is calculated as follows:</p>

	2493

	2494 <ul>

	2495 <li>count the number of ID selectors in the selector (= a)</li>

	2496 <li>count the number of class selectors, attributes selectors, and pseudo-clas ses in the selector (= b)</li>

	2497 <li>count the number of element names in the selector (= c)</li>

	2498 <li>ignore pseudo-elements</li>

	2499 </ul>

	2500

	2501 <p>Selectors inside <a href="#negation">the negation pseudo-class</a>

	2502 are counted like any other, but the negation itself does not count as

	2503 a pseudo-class.</p>

	2504

	2505 <p>Concatenating the three numbers a-b-c (in a number system with a

	2506 large base) gives the specificity.</p>

	2507

	2508 <div class="example">

	2509 <p>Examples:</p>

	2510 <pre>* /* a=0 b=0 c=0 -> specificity = 0 */

	2511 LI /* a=0 b=0 c=1 -> specificity = 1 */

	2512 UL LI /* a=0 b=0 c=2 -> specificity = 2 */

	2513 UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */

	2514 H1 + [REL=up] / a=0 b=1 c=1 -> specificity = 11 */

	2515 UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */

	2516 LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */

	2517 #x34y /* a=1 b=0 c=0 -> specificity = 100 */

	2518 #s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */

	2519 </pre>

	2520 </div>

	2521

	2522 <p class="note"><strong>Note:</strong> the specificity of the styles

	2523 specified in an HTML <code>style</code> attribute is described in CSS

	2524 2.1. <a href="#refsCSS21">[CSS21]</a>.</p>

	2525

	2526 <h2><a name=w3cselgrammar>10. The grammar of Selectors</a></h2>

	2527

	2528 <h3><a name=grammar>10.1. Grammar</a></h3>

	2529

	2530 <p>The grammar below defines the syntax of Selectors. It is globally

	2531 LL(1) and can be locally LL(2) (but note that most UA's should not use

	2532 it directly, since it doesn't express the parsing conventions). The

	2533 format of the productions is optimized for human consumption and some

	2534 shorthand notations beyond Yacc (see <a href="#refsYACC">[YACC]</a>)

	2535 are used:</p>

	2536

	2537 <ul>

	2538 <li><b>*</b>: 0 or more

	2539 <li><b>+</b>: 1 or more

	2540 <li><b>?</b>: 0 or 1

	2541 <li><b>\|</b>: separates alternatives

	2542 <li><b>[ ]</b>: grouping </li>

	2543 </ul>

	2544

	2545 <p>The productions are:</p>

	2546

	2547 <pre>selectors_group

	2548 : selector [ COMMA S* selector ]*

	2549 ;

	2550

	2551 selector

	2552 : simple_selector_sequence [ combinator simple_selector_sequence ]*

	2553 ;

	2554

	2555 combinator

	2556 /* combinators can be surrounded by white space */

	2557 : PLUS S* \| GREATER S* \| TILDE S* \| S+

	2558 ;

	2559

	2560 simple_selector_sequence

	2561 : [ type_selector \| universal ]

	2562 [ HASH \| class \| attrib \| pseudo \| negation ]*

	2563 \| [ HASH \| class \| attrib \| pseudo \| negation ]+

	2564 ;

	2565

	2566 type_selector

	2567 : [ namespace_prefix ]? element_name

	2568 ;

	2569

	2570 namespace_prefix

	2571 : [ IDENT \| '*' ]? '\|'

	2572 ;

	2573

	2574 element_name

	2575 : IDENT

	2576 ;

	2577

	2578 universal

	2579 : [ namespace_prefix ]? '*'

	2580 ;

	2581

	2582 class

	2583 : '.' IDENT

	2584 ;

	2585

	2586 attrib

	2587 : '[' S* [ namespace_prefix ]? IDENT S*

	2588 [ [ PREFIXMATCH \|

	2589 SUFFIXMATCH \|

	2590 SUBSTRINGMATCH \|

	2591 '=' \|

	2592 INCLUDES \|

	2593 DASHMATCH ] S* [ IDENT \| STRING ] S*

	2594 ]? ']'

	2595 ;

	2596

	2597 pseudo

	2598 /* '::' starts a pseudo-element, ':' a pseudo-class */

	2599 /* Exceptions: :first-line, :first-letter, :before and :after. */

	2600 /* Note that pseudo-elements are restricted to one per selector and */

	2601 /* occur only in the last simple_selector_sequence. */

	2602 : ':' ':'? [ IDENT \| functional_pseudo ]

	2603 ;

	2604

	2605 functional_pseudo

	2606 : FUNCTION S* expression ')'

	2607 ;

	2608

	2609 expression

	2610 /* In CSS3, the expressions are identifiers, strings, */

	2611 /* or of the form "an+b" */

	2612 : [ [ PLUS \| '-' \| DIMENSION \| NUMBER \| STRING \| IDENT ] S* ]+

	2613 ;

	2614

	2615 negation

	2616 : NOT S* negation_arg S* ')'

	2617 ;

	2618

	2619 negation_arg

	2620 : type_selector \| universal \| HASH \| class \| attrib \| pseudo

	2621 ;</pre>

	2622

	2623

	2624 <h3><a name=lex>10.2. Lexical scanner</a></h3>

	2625

	2626 <p>The following is the <a name=x3>tokenizer</a>, written in Flex (see

	2627 <a href="#refsFLEX">[FLEX]</a>) notation. The tokenizer is

	2628 case-insensitive.</p>

	2629

	2630 <p>The two occurrences of "\377" represent the highest character

	2631 number that current versions of Flex can deal with (decimal 255). They

	2632 should be read as "\4177777" (decimal 1114111), which is the highest

	2633 possible code point in Unicode/ISO-10646. <a

	2634 href="#refsUNICODE">[UNICODE]</a></p>

	2635

	2636 <pre>%option case-insensitive

	2637

	2638 ident [-]?{nmstart}{nmchar}*

	2639 name {nmchar}+

	2640 nmstart [_a-z]\|{nonascii}\|{escape}

	2641 nonascii [^\0-\177]

	2642 unicode \\[0-9a-f]{1,6}(\r\n\|[ \n\r\t\f])?

	2643 escape {unicode}\|\\[^\n\r\f0-9a-f]

	2644 nmchar [_a-z0-9-]\|{nonascii}\|{escape}

	2645 num [0-9]+\|[0-9]*\.[0-9]+

	2646 string {string1}\|{string2}

	2647 string1 \"([^\n\r\f\\"]\|\\{nl}\|{nonascii}\|{escape})*\"

	2648 string2 \'([^\n\r\f\\']\|\\{nl}\|{nonascii}\|{escape})*\'

	2649 invalid {invalid1}\|{invalid2}

	2650 invalid1 \"([^\n\r\f\\"]\|\\{nl}\|{nonascii}\|{escape})*

	2651 invalid2 \'([^\n\r\f\\']\|\\{nl}\|{nonascii}\|{escape})*

	2652 nl \n\|\r\n\|\r\|\f

	2653 w [ \t\r\n\f]*

	2654

	2655 %%

	2656

	2657 [ \t\r\n\f]+ return S;

	2658

	2659 "~=" return INCLUDES;

	2660 "\|=" return DASHMATCH;

	2661 "^=" return PREFIXMATCH;

	2662 "$=" return SUFFIXMATCH;

	2663 "*=" return SUBSTRINGMATCH;

	2664 {ident} return IDENT;

	2665 {string} return STRING;

	2666 {ident}"(" return FUNCTION;

	2667 {num} return NUMBER;

	2668 "#"{name} return HASH;

	2669 {w}"+" return PLUS;

	2670 {w}">" return GREATER;

	2671 {w}"," return COMMA;

	2672 {w}"~" return TILDE;

	2673 ":not(" return NOT;

	2674 @{ident} return ATKEYWORD;

	2675 {invalid} return INVALID;

	2676 {num}% return PERCENTAGE;

	2677 {num}{ident} return DIMENSION;

	2678 "<!--" return CDO;

	2679 "-->" return CDC;

	2680

	2681 "url("{w}{string}{w}")" return URI;

	2682 "url("{w}([!#$%&-~]\|{nonascii}\|{escape}){w}")" return URI;

	2683 U\+[0-9a-f?]{1,6}(-[0-9a-f]{1,6})? return UNICODE_RANGE;

	2684

	2685 \/\[^]\+([^/][^]\+)\/ / ignore comments */

	2686

	2687 . return *yytext;</pre>

	2688

	2689

	2690

	2691 <h2><a name=downlevel>11. Namespaces and down-level clients</a></h2>

	2692

	2693 <p>An important issue is the interaction of CSS selectors with XML

	2694 documents in web clients that were produced prior to this

	2695 document. Unfortunately, due to the fact that namespaces must be

	2696 matched based on the URI which identifies the namespace, not the

	2697 namespace prefix, some mechanism is required to identify namespaces in

	2698 CSS by their URI as well. Without such a mechanism, it is impossible

	2699 to construct a CSS style sheet which will properly match selectors in

	2700 all cases against a random set of XML documents. However, given

	2701 complete knowledge of the XML document to which a style sheet is to be

	2702 applied, and a limited use of namespaces within the XML document, it

	2703 is possible to construct a style sheet in which selectors would match

	2704 elements and attributes correctly.</p>

	2705

	2706 <p>It should be noted that a down-level CSS client will (if it

	2707 properly conforms to CSS forward compatible parsing rules) ignore all

	2708 <code>@namespace</code> at-rules, as well as all style rules that make

	2709 use of namespace qualified element type or attribute selectors. The

	2710 syntax of delimiting namespace prefixes in CSS was deliberately chosen

	2711 so that down-level CSS clients would ignore the style rules rather

	2712 than possibly match them incorrectly.</p>

	2713

	2714 <p>The use of default namespaces in CSS makes it possible to write

	2715 element type selectors that will function in both namespace aware CSS

	2716 clients as well as down-level clients. It should be noted that

	2717 down-level clients may incorrectly match selectors against XML

	2718 elements in other namespaces.</p>

	2719

	2720 <p>The following are scenarios and examples in which it is possible to

	2721 construct style sheets which would function properly in web clients

	2722 that do not implement this proposal.</p>

	2723

	2724 <ol>

	2725 <li>

	2726

	2727 <p>The XML document does not use namespaces.</p>

	2728

	2729 <ul>

	2730

	2731 <li>In this case, it is obviously not necessary to declare or use

	2732 namespaces in the style sheet. Standard CSS element type and

	2733 attribute selectors will function adequately in a down-level

	2734 client.</li>

	2735

	2736 <li>In a CSS namespace aware client, the default behavior of

	2737 element selectors matching without regard to namespace will

	2738 function properly against all elements, since no namespaces are

	2739 present. However, the use of specific element type selectors that

	2740 match only elements that have no namespace ("<code>\|name</code>")

	2741 will guarantee that selectors will match only XML elements that do

	2742 not have a declared namespace. </li>

	2743

	2744 </ul>

	2745

	2746 </li>

	2747

	2748 <li>

	2749

	2750 <p>The XML document defines a single, default namespace used

	2751 throughout the document. No namespace prefixes are used in element

	2752 names.</p>

	2753

	2754 <ul>

	2755

	2756 <li>In this case, a down-level client will function as if

	2757 namespaces were not used in the XML document at all. Standard CSS

	2758 element type and attribute selectors will match against all

	2759 elements. </li>

	2760

	2761 </ul>

	2762

	2763 </li>

	2764

	2765 <li>

	2766

	2767 <p>The XML document does <b>not</b> use a default namespace, all

	2768 namespace prefixes used are known to the style sheet author, and

	2769 there is a direct mapping between namespace prefixes and namespace

	2770 URIs. (A given prefix may only be mapped to one namespace URI

	2771 throughout the XML document; there may be multiple prefixes mapped

	2772 to the same URI).</p>

	2773

	2774 <ul>

	2775

	2776 <li>In this case, the down-level client will view and match

	2777 element type and attribute selectors based on their fully

	2778 qualified name, not the local part as outlined in the <a

	2779 href="#typenmsp">Type selectors and Namespaces</a> section. CSS

	2780 selectors may be declared using an escaped colon "<code>\:</code>"

	2781 to describe the fully qualified names, e.g.

	2782 "<code>html\:h1</code>" will match

	2783 <code><html:h1></code>. Selectors using the qualified name

	2784 will only match XML elements that use the same prefix. Other

	2785 namespace prefixes used in the XML that are mapped to the same URI

	2786 will not match as expected unless additional CSS style rules are

	2787 declared for them.</li>

	2788

	2789 <li>Note that selectors declared in this fashion will

	2790 <em>only</em> match in down-level clients. A CSS namespace aware

	2791 client will match element type and attribute selectors based on

	2792 the name's local part. Selectors declared with the fully

	2793 qualified name will not match (unless there is no namespace prefix

	2794 in the fully qualified name).</li>

	2795

	2796 </ul>

	2797

	2798 </li>

	2799

	2800 </ol>

	2801

	2802 <p>In other scenarios: when the namespace prefixes used in the XML are

	2803 not known in advance by the style sheet author; or a combination of

	2804 elements with no namespace are used in conjunction with elements using

	2805 a default namespace; or the same namespace prefix is mapped to

	2806 <em>different</em> namespace URIs within the same document, or in

	2807 different documents; it is impossible to construct a CSS style sheet

	2808 that will function properly against all elements in those documents,

	2809 unless, the style sheet is written using a namespace URI syntax (as

	2810 outlined in this document or similar) and the document is processed by

	2811 a CSS and XML namespace aware client.</p>

	2812

	2813 <h2><a name=profiling>12. Profiles</a></h2>

	2814

	2815 <p>Each specification using Selectors must define the subset of W3C

	2816 Selectors it allows and excludes, and describe the local meaning of

	2817 all the components of that subset.</p>

	2818

	2819 <p>Non normative examples:

	2820

	2821 <div class="profile">

	2822 <table class="tprofile">

	2823 <tbody>

	2824 <tr>

	2825 <th class="title" colspan=2>Selectors profile</th></tr>

	2826 <tr>

	2827 <th>Specification</th>

	2828 <td>CSS level 1</td></tr>

	2829 <tr>

	2830 <th>Accepts</th>

	2831 <td>type selectors<br>class selectors<br>ID selectors<br>:link,

	2832 :visited and :active pseudo-classes<br>descendant combinator

	2833 <br>::first-line and ::first-letter pseudo-elements</td></tr>

	2834 <tr>

	2835 <th>Excludes</th>

	2836 <td>

	2837

	2838 <p>universal selector<br>attribute selectors<br>:hover and :focus

	2839 pseudo-classes<br>:target pseudo-class<br>:lang() pseudo-class<br>all UI

	2840 element states pseudo-classes<br>all structural

	2841 pseudo-classes<br>negation pseudo-class<br>all

	2842 UI element fragments pseudo-elements<br>::before and ::after

	2843 pseudo-elements<br>child combinators<br>sibling combinators

	2844

	2845 <p>namespaces</td></tr>

	2846 <tr>

	2847 <th>Extra constraints</th>

	2848 <td>only one class selector allowed per sequence of simple

	2849 selectors</td></tr></tbody></table><br><br>

	2850 <table class="tprofile">

	2851 <tbody>

	2852 <tr>

	2853 <th class="title" colspan=2>Selectors profile</th></tr>

	2854 <tr>

	2855 <th>Specification</th>

	2856 <td>CSS level 2</td></tr>

	2857 <tr>

	2858 <th>Accepts</th>

	2859 <td>type selectors<br>universal selector<br>attribute presence and

	2860 values selectors<br>class selectors<br>ID selectors<br>:link, :visited,

	2861 :active, :hover, :focus, :lang() and :first-child pseudo-classes

	2862 <br>descendant combinator<br>child combinator<br>adjacent sibling

	2863 combinator<br>::first-line and ::first-letter pseudo-elements<br>::before

	2864 and ::after pseudo-elements</td></tr>

	2865 <tr>

	2866 <th>Excludes</th>

	2867 <td>

	2868

	2869 <p>content selectors<br>substring matching attribute

	2870 selectors<br>:target pseudo-classes<br>all UI element

	2871 states pseudo-classes<br>all structural pseudo-classes other

	2872 than :first-child<br>negation pseudo-class<br>all UI element

	2873 fragments pseudo-elements<br>general sibling combinators

	2874

	2875 <p>namespaces</td></tr>

	2876 <tr>

	2877 <th>Extra constraints</th>

	2878 <td>more than one class selector per sequence of simple selectors (CSS1

	2879 constraint) allowed</td></tr></tbody></table>

	2880

	2881 <p>In CSS, selectors express pattern matching rules that determine which style

	2882 rules apply to elements in the document tree.

	2883

	2884 <p>The following selector (CSS level 2) will <b>match</b> all anchors <code>a</c ode>

	2885 with attribute <code>name</code> set inside a section 1 header <code>h1</code>:

	2886 <pre>h1 a[name]</pre>

	2887

	2888 <p>All CSS declarations attached to such a selector are applied to elements

	2889 matching it. </div>

	2890

	2891 <div class="profile">

	2892 <table class="tprofile">

	2893 <tbody>

	2894 <tr>

	2895 <th class="title" colspan=2>Selectors profile</th></tr>

	2896 <tr>

	2897 <th>Specification</th>

	2898 <td>STTS 3</td>

	2899 </tr>

	2900 <tr>

	2901 <th>Accepts</th>

	2902 <td>

	2903

	2904 <p>type selectors<br>universal selectors<br>attribute selectors<br>class

	2905 selectors<br>ID selectors<br>all structural pseudo-classes<br>

	2906 all combinators

	2907

	2908 <p>namespaces</td></tr>

	2909 <tr>

	2910 <th>Excludes</th>

	2911 <td>non-accepted pseudo-classes<br>pseudo-elements<br></td></tr>

	2912 <tr>

	2913 <th>Extra constraints</th>

	2914 <td>some selectors and combinators are not allowed in fragment

	2915 descriptions on the right side of STTS declarations.</td></tr></tbody></ta ble>

	2916 <form>

	2917 <input type="text" name="test10"/>

	2918 <input type="text" name="foo"/>

	2919 <input type="text" name="foo"/>

	2920 <input type="text" name="foo"/>

	2921 <input type="text" name="foo"/>

	2922 <input type="text" name="foo"/>

	2923 <input type="text" name="foo"/>

	2924 <input type="text" name="foo"/>

	2925 <input type="text" name="foo"/>

	2926 <input type="text" name="foo"/>

	2927 <input type="text" name="foo"/>

	2928 <input type="text" name="foo"/>

	2929 <input type="text" name="foo"/>

	2930 <input type="text" name="foo"/>

	2931 <input type="text" name="foo"/>

	2932 <input type="text" name="foo"/>

	2933 <input type="text" name="foo"/>

	2934 <input type="text" name="foo"/>

	2935 <input type="text" name="foo"/>

	2936 <input type="text" name="foo"/>

	2937 <input type="text" name="foo"/>

	2938 <input type="text" name="foo"/>

	2939 <input type="text" name="foo"/>

	2940 <input type="text" name="foo"/>

	2941 <input type="text" name="foo"/>

	2942 </form>

	2943

	2944 <p>Selectors can be used in STTS 3 in two different

	2945 manners:

	2946 <ol>

	2947 <li>a selection mechanism equivalent to CSS selection mechanism: declarations

	2948 attached to a given selector are applied to elements matching that selector,

	2949 <li>fragment descriptions that appear on the right side of declarations.

	2950 </li></ol></div>

	2951

	2952 <h2><a name=Conformance></a>13. Conformance and requirements</h2>

	2953

	2954 <p>This section defines conformance with the present specification only.

	2955

	2956 <p>The inability of a user agent to implement part of this specification due to

	2957 the limitations of a particular device (e.g., non interactive user agents will

	2958 probably not implement dynamic pseudo-classes because they make no sense without

	2959 interactivity) does not imply non-conformance.

	2960

	2961 <p>All specifications reusing Selectors must contain a <a

	2962 href="#profiling">Profile</a> listing the

	2963 subset of Selectors it accepts or excludes, and describing the constraints

	2964 it adds to the current specification.

	2965

	2966 <p>Invalidity is caused by a parsing error, e.g. an unrecognized token or a toke n

	2967 which is not allowed at the current parsing point.

	2968

	2969 <p>User agents must observe the rules for handling parsing errors:

	2970 <ul>

	2971 <li>a simple selector containing an undeclared namespace prefix is invalid</li >

	2972 <li>a selector containing an invalid simple selector, an invalid combinator

	2973 or an invalid token is invalid. </li>

	2974 <li>a group of selectors containing an invalid selector is invalid.</li>

	2975 </ul>

	2976

	2977 <p class="foo test10 bar">Specifications reusing Selectors must define how to ha ndle parsing

	2978 errors. (In the case of CSS, the entire rule in which the selector is

	2979 used is dropped.)</p>

	2980

	2981 <!-- Apparently all these references are out of date:

	2982 <p>Implementations of this specification must behave as

	2983 "recipients of text data" as defined by <a href="#refsCWWW">[CWWW]</a>

	2984 when parsing selectors and attempting matches. (In particular,

	2985 implementations must assume the data is normalized and must not

	2986 normalize it.) Normative rules for matching strings are defined in

	2987 <a href="#refsCWWW">[CWWW]</a> and <a

	2988 href="#refsUNICODE">[UNICODE]</a> and apply to implementations of this

	2989 specification.</p>-->

	2990

	2991 <h2><a name=Tests></a>14. Tests</h2>

	2992

	2993 <p>This specification has <a

	2994 href="http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/">a test

	2995 suite</a> allowing user agents to verify their basic conformance to

	2996 the specification. This test suite does not pretend to be exhaustive

	2997 and does not cover all possible combined cases of Selectors.</p>

	2998

	2999 <h2><a name=ACKS></a>15. Acknowledgements</h2>

	3000

	3001 <p>The CSS working group would like to thank everyone who has sent

	3002 comments on this specification over the years.</p>

	3003

	3004 <p>The working group would like to extend special thanks to Donna

	3005 McManus, Justin Baker, Joel Sklar, and Molly Ives Brower who perfermed

	3006 the final editorial review.</p>

	3007

	3008 <h2><a name=references>16. References</a></h2>

	3009

	3010 <dl class="refs">

	3011

	3012 <dt>[CSS1]

	3013 <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

	3014 <dd>(<code><a href="http://www.w3.org/TR/REC-CSS1">http://www.w3.org/TR/REC-CS S1</a></code>)

	3015

	3016 <dt>[CSS21]

	3017 <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

	3018 <dd>(<code><a href="http://www.w3.org/TR/CSS21">http://www.w3.org/TR/CSS21</a> </code>)

	3019

	3020 <dt>[CWWW]

	3021 <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

	3022 <dd>(<code><a href="http://www.w3.org/TR/charmod/">http://www.w3.org/TR/charmo d/</a></code>)

	3023

	3024 <dt>[FLEX]

	3025 <dd><a name="refsFLEX"></a> "<cite>Flex: The Lexical Scanner Generator</cite>" , Version 2.3.7, ISBN 1882114213

	3026

	3027 <dt>[HTML4]

	3028 <dd><a name="refsHTML4"></a> Dave Ragget, Arnaud Le Hors, Ian Jacobs, editors; "<cite>HTML 4.01 Specification</cite>", W3C Recommendation, 24 December 1999

	3029 <dd>(<a href="http://www.w3.org/TR/html4/"><code>http://www.w3.org/TR/html4/</ code></a>)

	3030

	3031 <dt>[MATH]

	3032 <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

	3033 <dd>(<code><a href="http://www.w3.org/TR/REC-MathML/">http://www.w3.org/TR/REC -MathML/</a></code>)

	3034

	3035 <dt>[RFC3066]

	3036 <dd><a name="refsRFC3066"></a> H. Alvestrand; "<cite>Tags for the Identificati on of Languages</cite>", Request for Comments 3066, January 2001

	3037 <dd>(<a href="http://www.ietf.org/rfc/rfc3066.txt"><code>http://www.ietf.org/r fc/rfc3066.txt</code></a>)

	3038

	3039 <dt>[STTS]

	3040 <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

	3041 <dd>(<code><a href="http://www.w3.org/TR/NOTE-STTS3">http://www.w3.org/TR/NOTE -STTS3</a></code>)

	3042

	3043 <dt>[SVG]

	3044 <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

	3045 <dd>(<code><a href="http://www.w3.org/TR/SVG/">http://www.w3.org/TR/SVG/</a></ code>)

	3046

	3047 <dt>[UNICODE]</dt>

	3048 <dd><a name="refsUNICODE"></a> <cite><a

	3049 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>.

	3050 <dd>(<code><a href="http://www.unicode.org/versions/">http://www.unicode.org/v ersions/</a></code>)</dd>

	3051

	3052 <dt>[XML10]

	3053 <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

	3054 <dd>(<a href="http://www.w3.org/TR/REC-xml/"><code>http://www.w3.org/TR/REC-xm l/</code></a>)

	3055

	3056 <dt>[XMLNAMES]

	3057 <dd><a name="refsXMLNAMES"></a> Tim Bray, Dave Hollander, Andrew Layman, edito rs; "<cite>Namespaces in XML</cite>", W3C Recommendation, 14 January 1999

	3058 <dd>(<a href="http://www.w3.org/TR/REC-xml-names/"><code>http://www.w3.org/TR/ REC-xml-names/</code></a>)

	3059

	3060 <dt>[YACC]

	3061 <dd><a name="refsYACC"></a> S. C. Johnson; "<cite>YACC — Yet another com piler compiler</cite>", Technical Report, Murray Hill, 1975

	3062

	3063 </dl>

	3064 </body>

	3065 </html>

OLD	NEW

« no previous file with comments | « chrome/test/data/dromaeo/tests/cssquery-prototype.html ('k') | chrome/test/data/dromaeo/tests/dom-attr.html » ('j') | no next file with comments »