1 <html> 2 <head> 3 <script src="../htmlrunner.js"></script> 4 <script src="../lib/prototype-1.7.js"></script> 5 <script> 6 window.onload = function(){ 7 startTest("cssquery-prototype", 'a6eb02e3'); 8 9 // Try to force real results 10 var ret, tmp; 11 12 var html = document.body.innerHTML; 13 14 prep(function(){ 15 var div = document.createElement("div"); 16 div.innerHTML = html; 17 document.body.appendChild( div ); 18 }); 19 20 test("Prototype - *", function(){ 21 $$("*"); 22 }); 23 24 test("Prototype - div:only-child", function(){ 25 $$("div:only-child"); 26 }); 27 28 test("Prototype - div:first-child", function(){ 29 $$("div:first-child"); 30 }); 31 32 test("Prototype - div:nth-child(even)", function(){ 33 $$("div:nth-child(even)"); 34 }); 35 36 test("Prototype - div:nth-child(2n)", function(){ 37 $$("div:nth-child(2n)"); 38 }); 39 40 test("Prototype - div:nth-child(odd)", function(){ 41 $$("div:nth-child(odd)"); 42 }); 43 44 test("Prototype - div:nth-child(2n+1)", function(){ 45 $$("div:nth-child(2n+1)"); 46 }); 47 48 test("Prototype - div:nth-child(n)", function(){ 49 $$("div:nth-child(n)"); 50 }); 51 52 test("Prototype - div:last-child", function(){ 53 $$("div:last-child"); 54 }); 55 56 test("Prototype - div > div", function(){ 57 $$("div > div"); 58 }); 59 60 test("Prototype - div + div", function(){ 61 $$("div + div"); 62 }); 63 64 test("Prototype - div ~ div", function(){ 65 $$("div ~ div"); 66 }); 67 68 test("Prototype - body", function(){ 69 $$("body"); 70 }); 71 72 test("Prototype - body div", function(){ 73 $$("body div"); 74 }); 75 76 test("Prototype - div", function(){ 77 $$("div"); 78 }); 79 80 test("Prototype - div div", function(){ 81 $$("div div"); 82 }); 83 84 test("Prototype - div div div", function(){ 85 $$("div div div"); 86 }); 87 88 test("Prototype - div, div, div", function(){ 89 $$("div, div, div"); 90 }); 91 92 test("Prototype - div, a, span", function(){ 93 $$("div, a, span"); 94 }); 95 96 test("Prototype - .dialog", function(){ 97 $$(".dialog"); 98 }); 99 100 test("Prototype - div.dialog", function(){ 101 $$("div.dialog"); 102 }); 103 104 test("Prototype - div .dialog", function(){ 105 $$("div .dialog"); 106 }); 107 108 test("Prototype - div.character, div.dialog", function(){ 109 $$("div.character, div.dialog"); 110 }); 111 112 test("Prototype - #speech5", function(){ 113 $$("#speech5"); 114 }); 115 116 test("Prototype - div#speech5", function(){ 117 $$("div#speech5"); 118 }); 119 120 test("Prototype - div #speech5", function(){ 121 $$("div #speech5"); 122 }); 123 124 test("Prototype - div.scene div.dialog", function(){ 125 $$("div.scene div.dialog"); 126 }); 127 128 test("Prototype - div#scene1 div.dialog div", function(){ 129 $$("div#scene1 div.dialog div"); 130 }); 131 132 test("Prototype - #scene1 #speech1", function(){ 133 $$("#scene1 #speech1"); 134 }); 135 136 test("Prototype - div[class]", function(){ 137 $$("div[class]"); 138 }); 139 140 test("Prototype - div[class=dialog]", function(){ 141 $$("div[class=dialog]"); 142 }); 143 144 test("Prototype - div[class^=dia]", function(){ 145 $$("div[class^=dia]"); 146 }); 147 148 test("Prototype - div[class$=log]", function(){ 149 $$("div[class$=log]"); 150 }); 151 152 test("Prototype - div[class*=sce]", function(){ 153 $$("div[class*=sce]"); 154 }); 155 156 test("Prototype - div[class|=dialog]", function(){ 157 $$("div[class|=dialog]"); 158 }); 159 160 test("Prototype - div[class~=dialog]", function(){ 161 $$("div[class~=dialog]"); 162 }); 163 164 endTest(); 165 }; 166 </script> 167 </head> 168 <body> 169 <div class="head"> 170 <p><a href="http://www.w3.org/"><img height=48 alt=W3C src="72px.png" width=72></a> 171 172 <h1 id="title">Selectors</h1> 173 174 <h2>W3C Working Draft 15 December 2005</h2> 175 176 <dl> 177 178 <dt>This version: 179 180 <dd><a href="http://www.w3.org/TR/2005/WD-css3-selectors-20051215"> 181 http://www.w3.org/TR/2005/WD-css3-selectors-20051215</a> 182 183 <dt>Latest version: 184 185 <dd><a href="http://www.w3.org/TR/css3-selectors"> 186 http://www.w3.org/TR/css3-selectors</a> 187 188 <dt>Previous version: 189 190 <dd><a href="http://www.w3.org/TR/2001/CR-css3-selectors-20011113"> 191 http://www.w3.org/TR/2001/CR-css3-selectors-20011113</a> 192 193 <dt><a name=editors-list></a>Editors: 194 195 <dd class="vcard"><span class="fn">Daniel Glazman</span> (Invited Expert)</dd> 196 197 <dd class="vcard"><a lang="tr" class="url fn" href="http://www.tantek.com/">Tantek Çelik</a> (Invited Expert) 198 199 <dd class="vcard"><a href="mailto:ian (a] hixie.ch" class="url fn">Ian Hickson</a> (<span 200 class="company"><a href="http://www.google.com/">Google</a></span>) 201 202 <dd class="vcard"><span class="fn">Peter Linss</span> (former editor, <span class="company"><a 203 href="http://www.netscape.com/">Netscape/AOL</a></span>) 204 205 <dd class="vcard"><span class="fn">John Williams</span> (former editor, <span class="company"><a 206 href="http://www.quark.com/">Quark, Inc.</a></span>) 207 208 </dl> 209 210 <p class="copyright"><a 211 href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"> 212 Copyright</a> © 2005 <a href="http://www.w3.org/"><abbr 213 title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> 214 (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts 215 Institute of Technology">MIT</abbr></a>, <a 216 href="http://www.ercim.org/"><acronym title="European Research 217 Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a 218 href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C 219 <a 220 href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, 221 <a 222 href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>, 223 <a 224 href="http://www.w3.org/Consortium/Legal/copyright-documents">document 225 use</a> rules apply. 226 227 <hr title="Separator for header"> 228 229 </div> 230 231 <h2><a name=abstract></a>Abstract</h2> 232 233 <p><em>Selectors</em> are patterns that match against elements in a 234 tree. Selectors have been optimized for use with HTML and XML, and 235 are designed to be usable in performance-critical code.</p> 236 237 <p><acronym title="Cascading Style Sheets">CSS</acronym> (Cascading 238 Style Sheets) is a language for describing the rendering of <acronym 239 title="Hypertext Markup Language">HTML</acronym> and <acronym 240 title="Extensible Markup Language">XML</acronym> documents on 241 screen, on paper, in speech, etc. CSS uses Selectors for binding 242 style properties to elements in the document. This document 243 describes extensions to the selectors defined in CSS level 2. These 244 extended selectors will be used by CSS level 3. 245 246 <p>Selectors define the following function:</p> 247 248 <pre>expression ∗ element → boolean</pre> 249 250 <p>That is, given an element and a selector, this specification 251 defines whether that element matches the selector.</p> 252 253 <p>These expressions can also be used, for instance, to select a set 254 of elements, or a single element from a set of elements, by 255 evaluating the expression across all the elements in a 256 subtree. <acronym title="Simple Tree Transformation 257 Sheets">STTS</acronym> (Simple Tree Transformation Sheets), a 258 language for transforming XML trees, uses this mechanism. <a href="#refsSTTS">[STTS]</a></p> 259 260 <h2><a name=status></a>Status of this document</h2> 261 262 <p><em>This section describes the status of this document at the 263 time of its publication. Other documents may supersede this 264 document. A list of current W3C publications and the latest revision 265 of this technical report can be found in the <a 266 href="http://www.w3.org/TR/">W3C technical reports index at 267 http://www.w3.org/TR/.</a></em></p> 268 269 <p>This document describes the selectors that already exist in <a 270 href="#refsCSS1"><abbr title="CSS level 1">CSS1</abbr></a> and <a 271 href="#refsCSS21"><abbr title="CSS level 2">CSS2</abbr></a>, and 272 also proposes new selectors for <abbr title="CSS level 273 3">CSS3</abbr> and other languages that may need them.</p> 274 275 <p>The CSS Working Group doesn't expect that all implementations of 276 CSS3 will have to implement all selectors. Instead, there will 277 probably be a small number of variants of CSS3, called profiles. For 278 example, it may be that only a profile for interactive user agents 279 will include all of the selectors.</p> 280 281 <p>This specification is a last call working draft for the the <a 282 href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> 283 (<a href="/Style/">Style Activity</a>). This 284 document is a revision of the <a 285 href="http://www.w3.org/TR/2001/CR-css3-selectors-20011113/">Candidate 286 Recommendation dated 2001 November 13</a>, and has incorporated 287 implementation feedback received in the past few years. It is 288 expected that this last call will proceed straight to Proposed 289 Recommendation stage since it is believed that interoperability will 290 be demonstrable.</p> 291 292 <p>All persons are encouraged to review and implement this 293 specification and return comments to the (<a 294 href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) 295 public mailing list <a 296 href="http://www.w3.org/Mail/Lists.html#www-style">www-style</a> 297 (see <a href="http://www.w3.org/Mail/Request">instructions</a>). W3C 298 Members can also send comments directly to the CSS Working 299 Group. 300 The deadline for comments is 14 January 2006.</p> 301 302 <p>This is still a draft document and may be updated, replaced, or 303 obsoleted by other documents at any time. It is inappropriate to 304 cite a W3C Working Draft as other than "work in progress". 305 306 <p>This document may be available in <a 307 href="http://www.w3.org/Style/css3-selectors-updates/translations">translation</a>. 308 The English version of this specification is the only normative 309 version. 310 311 <div class="subtoc"> 312 313 <h2 id="test10"><a name=contents>Table of contents</a></h2> 314 315 <ul class="toc"> 316 <li class="tocline2"><a href="#context">1. Introduction</a> 317 <ul> 318 <li><a href="#dependencies">1.1. Dependencies</a> </li> 319 <li><a href="#terminology">1.2. Terminology</a> </li> 320 <li><a href="#changesFromCSS2">1.3. Changes from CSS2</a> </li> 321 </ul> 322 <li class="tocline2"><a href="#selectors">2. Selectors</a> 323 <li class="tocline2"><a href="#casesens">3. Case sensitivity</a> 324 <li class="tocline2"><a href="#selector-syntax">4. Selector syntax</a> 325 <li class="tocline2"><a href="#grouping">5. Groups of selectors</a> 326 <li class="tocline2"><a href="#simple-selectors">6. Simple selectors</a> 327 <ul class="toc"> 328 <li class="tocline3"><a href="#type-selectors">6.1. Type selectors</a> 329 <ul class="toc"> 330 <li class="tocline4"><a href="#typenmsp">6.1.1. Type selectors and namespaces</a></li> 331 </ul> 332 <li class="tocline3"><a href="#universal-selector">6.2. Universal selector</a> 333 <ul> 334 <li><a href="#univnmsp">6.2.1. Universal selector and namespaces</a></li> 335 </ul> 336 <li class="tocline3"><a href="#attribute-selectors">6.3. Attribute selectors</a> 337 <ul class="toc"> 338 <li class="tocline4"><a href="#attribute-representation">6.3.1. Representation of attributes and attributes values</a> 339 <li><a href="#attribute-substrings">6.3.2. Substring matching attribute selectors</a> 340 <li class="tocline4"><a href="#attrnmsp">6.3.3. Attribute selectors and namespaces</a> 341 <li class="tocline4"><a href="#def-values">6.3.4. Default attribute values in DTDs</a></li> 342 </ul> 343 <li class="tocline3"><a href="#class-html">6.4. Class selectors</a> 344 <li class="tocline3"><a href="#id-selectors">6.5. ID selectors</a> 345 <li class="tocline3"><a href="#pseudo-classes">6.6. Pseudo-classes</a> 346 <ul class="toc"> 347 <li class="tocline4"><a href="#dynamic-pseudos">6.6.1. Dynamic pseudo-classes</a> 348 <li class="tocline4"><a href="#target-pseudo">6.6.2. The :target pseudo-class</a> 349 <li class="tocline4"><a href="#lang-pseudo">6.6.3. The :lang() pseudo-class</a> 350 <li class="tocline4"><a href="#UIstates">6.6.4. UI element states pseudo-classes</a> 351 <li class="tocline4"><a href="#structural-pseudos">6.6.5. Structural pseudo-classes</a> 352 <ul> 353 <li><a href="#root-pseudo">:root pseudo-class</a> 354 <li><a href="#nth-child-pseudo">:nth-child() pseudo-class</a> 355 <li><a href="#nth-last-child-pseudo">:nth-last-child()</a> 356 <li><a href="#nth-of-type-pseudo">:nth-of-type() pseudo-class</a> 357 <li><a href="#nth-last-of-type-pseudo">:nth-last-of-type()</a> 358 <li><a href="#first-child-pseudo">:first-child pseudo-class</a> 359 <li><a href="#last-child-pseudo">:last-child pseudo-class</a> 360 <li><a href="#first-of-type-pseudo">:first-of-type pseudo-class</a> 361 <li><a href="#last-of-type-pseudo">:last-of-type pseudo-class</a> 362 <li><a href="#only-child-pseudo">:only-child pseudo-class</a> 363 <li><a href="#only-of-type-pseudo">:only-of-type pseudo-class</a> 364 <li><a href="#empty-pseudo">:empty pseudo-class</a></li> 365 </ul> 366 <li class="tocline4"><a href="#negation">6.6.7. The negation pseudo-class</a></li> 367 </ul> 368 </li> 369 </ul> 370 <li><a href="#pseudo-elements">7. Pseudo-elements</a> 371 <ul> 372 <li><a href="#first-line">7.1. The ::first-line pseudo-element</a> 373 <li><a href="#first-letter">7.2. The ::first-letter pseudo-element</a> 374 <li><a href="#UIfragments">7.3. The ::selection pseudo-element</a> 375 <li><a href="#gen-content">7.4. The ::before and ::after pseudo-elements</a></li> 376 </ul> 377 <li class="tocline2"><a href="#combinators">8. Combinators</a> 378 <ul class="toc"> 379 <li class="tocline3"><a href="#descendant-combinators">8.1. Descendant combinators</a> 380 <li class="tocline3"><a href="#child-combinators">8.2. Child combinators</a> 381 <li class="tocline3"><a href="#sibling-combinators">8.3. Sibling combinators</a> 382 <ul class="toc"> 383 <li class="tocline4"><a href="#adjacent-sibling-combinators">8.3.1. Adjacent sibling combinator</a> 384 <li class="tocline4"><a href="#general-sibling-combinators">8.3.2. General sibling combinator</a></li> 385 </ul> 386 </li> 387 </ul> 388 <li class="tocline2"><a href="#specificity">9. Calculating a selector's specificity</a> 389 <li class="tocline2"><a href="#w3cselgrammar">10. The grammar of Selectors</a> 390 <ul class="toc"> 391 <li class="tocline3"><a href="#grammar">10.1. Grammar</a> 392 <li class="tocline3"><a href="#lex">10.2. Lexical scanner</a></li> 393 </ul> 394 <li class="tocline2"><a href="#downlevel">11. Namespaces and down-level clients</a> 395 <li class="tocline2"><a href="#profiling">12. Profiles</a> 396 <li><a href="#Conformance">13. Conformance and requirements</a> 397 <li><a href="#Tests">14. Tests</a> 398 <li><a href="#ACKS">15. Acknowledgements</a> 399 <li class="tocline2"><a href="#references">16. References</a> 400 </ul> 401 402 </div> 403 404 <h2><a name=context>1. Introduction</a></h2> 405 406 <h3><a name=dependencies></a>1.1. Dependencies</h3> 407 408 <p>Some features of this specification are specific to CSS, or have 409 particular limitations or rules specific to CSS. In this 410 specification, these have been described in terms of CSS2.1. <a 411 href="#refsCSS21">[CSS21]</a></p> 412 413 <h3><a name=terminology></a>1.2. Terminology</h3> 414 415 <p>All of the text of this specification is normative except 416 examples, notes, and sections explicitly marked as 417 non-normative.</p> 418 419 <h3><a name=changesFromCSS2></a>1.3. Changes from CSS2</h3> 420 421 <p><em>This section is non-normative.</em></p> 422 423 <p>The main differences between the selectors in CSS2 and those in 424 Selectors are: 425 426 <ul> 427 428 <li>the list of basic definitions (selector, group of selectors, 429 simple selector, etc.) has been changed; in particular, what was 430 referred to in CSS2 as a simple selector is now called a sequence 431 of simple selectors, and the term "simple selector" is now used for 432 the components of this sequence</li> 433 434 <li>an optional namespace component is now allowed in type element 435 selectors, the universal selector and attribute selectors</li> 436 437 <li>a <a href="#general-sibling-combinators">new combinator</a> has been introduced</li> 438 439 <li>new simple selectors including substring matching attribute 440 selectors, and new pseudo-classes</li> 441 442 <li>new pseudo-elements, and introduction of the "::" convention 443 for pseudo-elements</li> 444 445 <li>the grammar has been rewritten</li> 446 447 <li>profiles to be added to specifications integrating Selectors 448 and defining the set of selectors which is actually supported by 449 each specification</li> 450 451 <li>Selectors are now a CSS3 Module and an independent 452 specification; other specifications can now refer to this document 453 independently of CSS</li> 454 455 <li>the specification now has its own test suite</li> 456 457 </ul> 458 459 <h2><a name=selectors></a>2. Selectors</h2> 460 461 <p><em>This section is non-normative, as it merely summarizes the 462 following sections.</em></p> 463 464 <p>A Selector represents a structure. This structure can be used as a 465 condition (e.g. in a CSS rule) that determines which elements a 466 selector matches in the document tree, or as a flat description of the 467 HTML or XML fragment corresponding to that structure.</p> 468 469 <p>Selectors may range from simple element names to rich contextual 470 representations.</p> 471 472 <p>The following table summarizes the Selector syntax:</p> 473 474 <table class="selectorsReview"> 475 <thead> 476 <tr> 477 <th class="pattern">Pattern</th> 478 <th class="meaning">Meaning</th> 479 <th class="described">Described in section</th> 480 <th class="origin">First defined in CSS level</th></tr> 481 <tbody> 482 <tr> 483 <td class="pattern">*</td> 484 <td class="meaning">any element</td> 485 <td class="described"><a 486 href="#universal-selector">Universal 487 selector</a></td> 488 <td class="origin">2</td></tr> 489 <tr> 490 <td class="pattern">E</td> 491 <td class="meaning">an element of type E</td> 492 <td class="described"><a 493 href="#type-selectors">Type selector</a></td> 494 <td class="origin">1</td></tr> 495 <tr> 496 <td class="pattern">E[foo]</td> 497 <td class="meaning">an E element with a "foo" attribute</td> 498 <td class="described"><a 499 href="#attribute-selectors">Attribute 500 selectors</a></td> 501 <td class="origin">2</td></tr> 502 <tr> 503 <td class="pattern">E[foo="bar"]</td> 504 <td class="meaning">an E element whose "foo" attribute value is exactly 505 equal to "bar"</td> 506 <td class="described"><a 507 href="#attribute-selectors">Attribute 508 selectors</a></td> 509 <td class="origin">2</td></tr> 510 <tr> 511 <td class="pattern">E[foo~="bar"]</td> 512 <td class="meaning">an E element whose "foo" attribute value is a list of 513 space-separated values, one of which is exactly equal to "bar"</td> 514 <td class="described"><a 515 href="#attribute-selectors">Attribute 516 selectors</a></td> 517 <td class="origin">2</td></tr> 518 <tr> 519 <td class="pattern">E[foo^="bar"]</td> 520 <td class="meaning">an E element whose "foo" attribute value begins exactly 521 with the string "bar"</td> 522 <td class="described"><a 523 href="#attribute-selectors">Attribute 524 selectors</a></td> 525 <td class="origin">3</td></tr> 526 <tr> 527 <td class="pattern">E[foo$="bar"]</td> 528 <td class="meaning">an E element whose "foo" attribute value ends exactly 529 with the string "bar"</td> 530 <td class="described"><a 531 href="#attribute-selectors">Attribute 532 selectors</a></td> 533 <td class="origin">3</td></tr> 534 <tr> 535 <td class="pattern">E[foo*="bar"]</td> 536 <td class="meaning">an E element whose "foo" attribute value contains the 537 substring "bar"</td> 538 <td class="described"><a 539 href="#attribute-selectors">Attribute 540 selectors</a></td> 541 <td class="origin">3</td></tr> 542 <tr> 543 <td class="pattern">E[hreflang|="en"]</td> 544 <td class="meaning">an E element whose "hreflang" attribute has a hyphen-separated 545 list of values beginning (from the left) with "en"</td> 546 <td class="described"><a 547 href="#attribute-selectors">Attribute 548 selectors</a></td> 549 <td class="origin">2</td></tr> 550 <tr> 551 <td class="pattern">E:root</td> 552 <td class="meaning">an E element, root of the document</td> 553 <td class="described"><a 554 href="#structural-pseudos">Structural 555 pseudo-classes</a></td> 556 <td class="origin">3</td></tr> 557 <tr> 558 <td class="pattern">E:nth-child(n)</td> 559 <td class="meaning">an E element, the n-th child of its parent</td> 560 <td class="described"><a 561 href="#structural-pseudos">Structural 562 pseudo-classes</a></td> 563 <td class="origin">3</td></tr> 564 <tr> 565 <td class="pattern">E:nth-last-child(n)</td> 566 <td class="meaning">an E element, the n-th child of its parent, counting 567 from the last one</td> 568 <td class="described"><a 569 href="#structural-pseudos">Structural 570 pseudo-classes</a></td> 571 <td class="origin">3</td></tr> 572 <tr> 573 <td class="pattern">E:nth-of-type(n)</td> 574 <td class="meaning">an E element, the n-th sibling of its type</td> 575 <td class="described"><a 576 href="#structural-pseudos">Structural 577 pseudo-classes</a></td> 578 <td class="origin">3</td></tr> 579 <tr> 580 <td class="pattern">E:nth-last-of-type(n)</td> 581 <td class="meaning">an E element, the n-th sibling of its type, counting 582 from the last one</td> 583 <td class="described"><a 584 href="#structural-pseudos">Structural 585 pseudo-classes</a></td> 586 <td class="origin">3</td></tr> 587 <tr> 588 <td class="pattern">E:first-child</td> 589 <td class="meaning">an E element, first child of its parent</td> 590 <td class="described"><a 591 href="#structural-pseudos">Structural 592 pseudo-classes</a></td> 593 <td class="origin">2</td></tr> 594 <tr> 595 <td class="pattern">E:last-child</td> 596 <td class="meaning">an E element, last child of its parent</td> 597 <td class="described"><a 598 href="#structural-pseudos">Structural 599 pseudo-classes</a></td> 600 <td class="origin">3</td></tr> 601 <tr> 602 <td class="pattern">E:first-of-type</td> 603 <td class="meaning">an E element, first sibling of its type</td> 604 <td class="described"><a 605 href="#structural-pseudos">Structural 606 pseudo-classes</a></td> 607 <td class="origin">3</td></tr> 608 <tr> 609 <td class="pattern">E:last-of-type</td> 610 <td class="meaning">an E element, last sibling of its type</td> 611 <td class="described"><a 612 href="#structural-pseudos">Structural 613 pseudo-classes</a></td> 614 <td class="origin">3</td></tr> 615 <tr> 616 <td class="pattern">E:only-child</td> 617 <td class="meaning">an E element, only child of its parent</td> 618 <td class="described"><a 619 href="#structural-pseudos">Structural 620 pseudo-classes</a></td> 621 <td class="origin">3</td></tr> 622 <tr> 623 <td class="pattern">E:only-of-type</td> 624 <td class="meaning">an E element, only sibling of its type</td> 625 <td class="described"><a 626 href="#structural-pseudos">Structural 627 pseudo-classes</a></td> 628 <td class="origin">3</td></tr> 629 <tr> 630 <td class="pattern">E:empty</td> 631 <td class="meaning">an E element that has no children (including text 632 nodes)</td> 633 <td class="described"><a 634 href="#structural-pseudos">Structural 635 pseudo-classes</a></td> 636 <td class="origin">3</td></tr> 637 <tr> 638 <td class="pattern">E:link<br>E:visited</td> 639 <td class="meaning">an E element being the source anchor of a hyperlink of 640 which the target is not yet visited (:link) or already visited 641 (:visited)</td> 642 <td class="described"><a 643 href="#link">The link 644 pseudo-classes</a></td> 645 <td class="origin">1</td></tr> 646 <tr> 647 <td class="pattern">E:active<br>E:hover<br>E:focus</td> 648 <td class="meaning">an E element during certain user actions</td> 649 <td class="described"><a 650 href="#useraction-pseudos">The user 651 action pseudo-classes</a></td> 652 <td class="origin">1 and 2</td></tr> 653 <tr> 654 <td class="pattern">E:target</td> 655 <td class="meaning">an E element being the target of the referring URI</td> 656 <td class="described"><a 657 href="#target-pseudo">The target 658 pseudo-class</a></td> 659 <td class="origin">3</td></tr> 660 <tr> 661 <td class="pattern">E:lang(fr)</td> 662 <td class="meaning">an element of type E in language "fr" (the document 663 language specifies how language is determined)</td> 664 <td class="described"><a 665 href="#lang-pseudo">The :lang() 666 pseudo-class</a></td> 667 <td class="origin">2</td></tr> 668 <tr> 669 <td class="pattern">E:enabled<br>E:disabled</td> 670 <td class="meaning">a user interface element E which is enabled or 671 disabled</td> 672 <td class="described"><a 673 href="#UIstates">The UI element states 674 pseudo-classes</a></td> 675 <td class="origin">3</td></tr> 676 <tr> 677 <td class="pattern">E:checked<!--<br>E:indeterminate--></td> 678 <td class="meaning">a user interface element E which is checked<!-- or in an 679 indeterminate state--> (for instance a radio-button or checkbox)</td> 680 <td class="described"><a 681 href="#UIstates">The UI element states 682 pseudo-classes</a></td> 683 <td class="origin">3</td></tr> 684 <tr> 685 <td class="pattern">E::first-line</td> 686 <td class="meaning">the first formatted line of an E element</td> 687 <td class="described"><a 688 href="#first-line">The ::first-line 689 pseudo-element</a></td> 690 <td class="origin">1</td></tr> 691 <tr> 692 <td class="pattern">E::first-letter</td> 693 <td class="meaning">the first formatted letter of an E element</td> 694 <td class="described"><a 695 href="#first-letter">The ::first-letter 696 pseudo-element</a></td> 697 <td class="origin">1</td></tr> 698 <tr> 699 <td class="pattern">E::selection</td> 700 <td class="meaning">the portion of an E element that is currently 701 selected/highlighted by the user</td> 702 <td class="described"><a 703 href="#UIfragments">The UI element 704 fragments pseudo-elements</a></td> 705 <td class="origin">3</td></tr> 706 <tr> 707 <td class="pattern">E::before</td> 708 <td class="meaning">generated content before an E element</td> 709 <td class="described"><a 710 href="#gen-content">The ::before 711 pseudo-element</a></td> 712 <td class="origin">2</td></tr> 713 <tr> 714 <td class="pattern">E::after</td> 715 <td class="meaning">generated content after an E element</td> 716 <td class="described"><a 717 href="#gen-content">The ::after 718 pseudo-element</a></td> 719 <td class="origin">2</td></tr> 720 <tr> 721 <td class="pattern">E.warning</td> 722 <td class="meaning">an E element whose class is 723 "warning" (the document language specifies how class is determined).</td> 724 <td class="described"><a 725 href="#class-html">Class 726 selectors</a></td> 727 <td class="origin">1</td></tr> 728 <tr> 729 <td class="pattern">E#myid</td> 730 <td class="meaning">an E element with ID equal to "myid".</td> 731 <td class="described"><a 732 href="#id-selectors">ID 733 selectors</a></td> 734 <td class="origin">1</td></tr> 735 <tr> 736 <td class="pattern">E:not(s)</td> 737 <td class="meaning">an E element that does not match simple selector s</td> 738 <td class="described"><a 739 href="#negation">Negation 740 pseudo-class</a></td> 741 <td class="origin">3</td></tr> 742 <tr> 743 <td class="pattern">E F</td> 744 <td class="meaning">an F element descendant of an E element</td> 745 <td class="described"><a 746 href="#descendant-combinators">Descendant 747 combinator</a></td> 748 <td class="origin">1</td></tr> 749 <tr> 750 <td class="pattern">E > F</td> 751 <td class="meaning">an F element child of an E element</td> 752 <td class="described"><a 753 href="#child-combinators">Child 754 combinator</a></td> 755 <td class="origin">2</td></tr> 756 <tr> 757 <td class="pattern">E + F</td> 758 <td class="meaning">an F element immediately preceded by an E element</td> 759 <td class="described"><a 760 href="#adjacent-sibling-combinators">Adjacent sibling combinator</a></td> 761 <td class="origin">2</td></tr> 762 <tr> 763 <td class="pattern">E ~ F</td> 764 <td class="meaning">an F element preceded by an E element</td> 765 <td class="described"><a 766 href="#general-sibling-combinators">General sibling combinator</a></td> 767 <td class="origin">3</td></tr></tbody></table> 768 769 <p>The meaning of each selector is derived from the table above by 770 prepending "matches" to the contents of each cell in the "Meaning" 771 column.</p> 772 773 <h2><a name=casesens>3. Case sensitivity</a></h2> 774 775 <p>The case sensitivity of document language element names, attribute 776 names, and attribute values in selectors depends on the document 777 language. For example, in HTML, element names are case-insensitive, 778 but in XML, they are case-sensitive.</p> 779 780 <h2><a name=selector-syntax>4. Selector syntax</a></h2> 781 782 <p>A <dfn><a name=selector>selector</a></dfn> is a chain of one 783 or more <a href="#sequence">sequences of simple selectors</a> 784 separated by <a href="#combinators">combinators</a>.</p> 785 786 <p>A <dfn><a name=sequence>sequence of simple selectors</a></dfn> 787 is a chain of <a href="#simple-selectors-dfn">simple selectors</a> 788 that are not separated by a <a href="#combinators">combinator</a>. It 789 always begins with a <a href="#type-selectors">type selector</a> or a 790 <a href="#universal-selector">universal selector</a>. No other type 791 selector or universal selector is allowed in the sequence.</p> 792 793 <p>A <dfn><a name=simple-selectors-dfn></a><a 794 href="#simple-selectors">simple selector</a></dfn> is either a <a 795 href="#type-selectors">type selector</a>, <a 796 href="#universal-selector">universal selector</a>, <a 797 href="#attribute-selectors">attribute selector</a>, <a 798 href="#class-html">class selector</a>, <a 799 href="#id-selectors">ID selector</a>, <a 800 href="#content-selectors">content selector</a>, or <a 801 href="#pseudo-classes">pseudo-class</a>. One <a 802 href="#pseudo-elements">pseudo-element</a> may be appended to the last 803 sequence of simple selectors.</p> 804 805 <p><dfn>Combinators</dfn> are: white space, "greater-than 806 sign" (U+003E, <code>></code>), "plus sign" (U+002B, 807 <code>+</code>) and "tilde" (U+007E, <code>~</code>). White 808 space may appear between a combinator and the simple selectors around 809 it. <a name=whitespace></a>Only the characters "space" (U+0020), "tab" 810 (U+0009), "line feed" (U+000A), "carriage return" (U+000D), and "form 811 feed" (U+000C) can occur in white space. Other space-like characters, 812 such as "em-space" (U+2003) and "ideographic space" (U+3000), are 813 never part of white space.</p> 814 815 <p>The elements of a document tree that are represented by a selector 816 are the <dfn><a name=subject></a>subjects of the selector</dfn>. A 817 selector consisting of a single sequence of simple selectors 818 represents any element satisfying its requirements. Prepending another 819 sequence of simple selectors and a combinator to a sequence imposes 820 additional matching constraints, so the subjects of a selector are 821 always a subset of the elements represented by the last sequence of 822 simple selectors.</p> 823 824 <p>An empty selector, containing no sequence of simple selectors and 825 no pseudo-element, is an <a href="#Conformance">invalid 826 selector</a>.</p> 827 828 <h2><a name=grouping>5. Groups of selectors</a></h2> 829 830 <p>When several selectors share the same declarations, they may be 831 grouped into a comma-separated list. (A comma is U+002C.)</p> 832 833 <div class="example"> 834 <p>CSS examples:</p> 835 <p>In this example, we condense three rules with identical 836 declarations into one. Thus,</p> 837 <pre>h1 { font-family: sans-serif } 838 h2 { font-family: sans-serif } 839 h3 { font-family: sans-serif }</pre> 840 <p>is equivalent to:</p> 841 <pre>h1, h2, h3 { font-family: sans-serif }</pre> 842 </div> 843 844 <p><strong>Warning</strong>: the equivalence is true in this example 845 because all the selectors are valid selectors. If just one of these 846 selectors were invalid, the entire group of selectors would be 847 invalid. This would invalidate the rule for all three heading 848 elements, whereas in the former case only one of the three individual 849 heading rules would be invalidated.</p> 850 851 852 <h2><a name=simple-selectors>6. Simple selectors</a></h2> 853 854 <h3><a name=type-selectors>6.1. Type selector</a></h3> 855 856 <p>A <dfn>type selector</dfn> is the name of a document language 857 element type. A type selector represents an instance of the element 858 type in the document tree.</p> 859 860 <div class="example"> 861 <p>Example:</p> 862 <p>The following selector represents an <code>h1</code> element in the document tree:</p> 863 <pre>h1</pre> 864 </div> 865 866 867 <h4><a name=typenmsp>6.1.1. Type selectors and namespaces</a></h4> 868 869 <p>Type selectors allow an optional namespace (<a 870 href="#refsXMLNAMES">[XMLNAMES]</a>) component. A namespace prefix 871 that has been previously declared may be prepended to the element name 872 separated by the namespace separator "vertical bar" 873 (U+007C, <code>|</code>).</p> 874 875 <p>The namespace component may be left empty to indicate that the 876 selector is only to represent elements with no declared namespace.</p> 877 878 <p>An asterisk may be used for the namespace prefix, indicating that 879 the selector represents elements in any namespace (including elements 880 with no namespace).</p> 881 882 <p>Element type selectors that have no namespace component (no 883 namespace separator), represent elements without regard to the 884 element's namespace (equivalent to "<code>*|</code>") unless a default 885 namespace has been declared. If a default namespace has been declared, 886 the selector will represent only elements in the default 887 namespace.</p> 888 889 <p>A type selector containing a namespace prefix that has not been 890 previously declared is an <a href="#Conformance">invalid</a> selector. 891 The mechanism for declaring a namespace prefix is left up to the 892 language implementing Selectors. In CSS, such a mechanism is defined 893 in the General Syntax module.</p> 894 895 <p>In a namespace-aware client, element type selectors will only match 896 against the <a 897 href="http://www.w3.org/TR/REC-xml-names/#NT-LocalPart">local part</a> 898 of the element's <a 899 href="http://www.w3.org/TR/REC-xml-names/#ns-qualnames">qualified 900 name</a>. See <a href="#downlevel">below</a> for notes about matching 901 behaviors in down-level clients.</p> 902 903 <p>In summary:</p> 904 905 <dl> 906 <dt><code>ns|E</code></dt> 907 <dd>elements with name E in namespace ns</dd> 908 <dt><code>*|E</code></dt> 909 <dd>elements with name E in any namespace, including those without any 910 declared namespace</dd> 911 <dt><code>|E</code></dt> 912 <dd>elements with name E without any declared namespace</dd> 913 <dt><code>E</code></dt> 914 <dd>if no default namespace has been specified, this is equivalent to *|E. 915 Otherwise it is equivalent to ns|E where ns is the default namespace.</dd> 916 </dl> 917 918 <div class="example"> 919 <p>CSS examples:</p> 920 921 <pre>@namespace foo url(http://www.example.com); 922 foo|h1 { color: blue } 923 foo|* { color: yellow } 924 |h1 { color: red } 925 *|h1 { color: green } 926 h1 { color: green }</pre> 927 928 <p>The first rule will match only <code>h1</code> elements in the 929 "http://www.example.com" namespace.</p> 930 931 <p>The second rule will match all elements in the 932 "http://www.example.com" namespace.</p> 933 934 <p>The third rule will match only <code>h1</code> elements without 935 any declared namespace.</p> 936 937 <p>The fourth rule will match <code>h1</code> elements in any 938 namespace (including those without any declared namespace).</p> 939 940 <p>The last rule is equivalent to the fourth rule because no default 941 namespace has been defined.</p> 942 943 </div> 944 945 <h3><a name=universal-selector>6.2. Universal selector</a> </h3> 946 947 <p>The <dfn>universal selector</dfn>, written "asterisk" 948 (<code>*</code>), represents the qualified name of any element 949 type. It represents any single element in the document tree in any 950 namespace (including those without any declared namespace) if no 951 default namespace has been specified. If a default namespace has been 952 specified, see <a href="#univnmsp">Universal selector and 953 Namespaces</a> below.</p> 954 955 <p>If the universal selector is not the only component of a sequence 956 of simple selectors, the <code>*</code> may be omitted.</p> 957 958 <div class="example"> 959 <p>Examples:</p> 960 <ul> 961 <li><code>*[hreflang|=en]</code> and <code>[hreflang|=en]</code> are equivalent,</li> 962 <li><code>*.warning</code> and <code>.warning</code> are equivalent,</li> 963 <li><code>*#myid</code> and <code>#myid</code> are equivalent.</li> 964 </ul> 965 </div> 966 967 <p class="note"><strong>Note:</strong> it is recommended that the 968 <code>*</code>, representing the universal selector, not be 969 omitted.</p> 970 971 <h4><a name=univnmsp>6.2.1. Universal selector and namespaces</a></h4> 972 973 <p>The universal selector allows an optional namespace component. It 974 is used as follows:</p> 975 976 <dl> 977 <dt><code>ns|*</code></dt> 978 <dd>all elements in namespace ns</dd> 979 <dt><code>*|*</code></dt> 980 <dd>all elements</dd> 981 <dt><code>|*</code></dt> 982 <dd>all elements without any declared namespace</dd> 983 <dt><code>*</code></dt> 984 <dd>if no default namespace has been specified, this is equivalent to *|*. 985 Otherwise it is equivalent to ns|* where ns is the default namespace.</dd> 986 </dl> 987 988 <p>A universal selector containing a namespace prefix that has not 989 been previously declared is an <a href="#Conformance">invalid</a> 990 selector. The mechanism for declaring a namespace prefix is left up 991 to the language implementing Selectors. In CSS, such a mechanism is 992 defined in the General Syntax module.</p> 993 994 995 <h3><a name=attribute-selectors>6.3. Attribute selectors</a></h3> 996 997 <p>Selectors allow the representation of an element's attributes. When 998 a selector is used as an expression to match against an element, 999 attribute selectors must be considered to match an element if that 1000 element has an attribute that matches the attribute represented by the 1001 attribute selector.</p> 1002 1003 <h4><a name=attribute-representation>6.3.1. Attribute presence and values 1004 selectors</a></h4> 1005 1006 <p>CSS2 introduced four attribute selectors:</p> 1007 1008 <dl> 1009 <dt><code>[att]</code> 1010 <dd>Represents an element with the <code>att</code> attribute, whatever the value of 1011 the attribute.</dd> 1012 <dt><code>[att=val]</code></dt> 1013 <dd>Represents an element with the <code>att</code> attribute whose value is exactly 1014 "val".</dd> 1015 <dt><code>[att~=val]</code></dt> 1016 <dd>Represents an element with the <code>att</code> attribute whose value is a <a 1017 href="#whitespace">whitespace</a>-separated list of words, one of 1018 which is exactly "val". If "val" contains whitespace, it will never 1019 represent anything (since the words are <em>separated</em> by 1020 spaces).</dd> 1021 <dt><code>[att|=val]</code> 1022 <dd>Represents an element with the <code>att</code> attribute, its value either 1023 being exactly "val" or beginning with "val" immediately followed by 1024 "-" (U+002D). This is primarily intended to allow language subcode 1025 matches (e.g., the <code>hreflang</code> attribute on the 1026 <code>link</code> element in HTML) as described in RFC 3066 (<a 1027 href="#refsRFC3066">[RFC3066]</a>). For <code>lang</code> (or 1028 <code>xml:lang</code>) language subcode matching, please see <a 1029 href="#lang-pseudo">the <code>:lang</code> pseudo-class</a>.</dd> 1030 </dl> 1031 1032 <p>Attribute values must be identifiers or strings. The 1033 case-sensitivity of attribute names and values in selectors depends on 1034 the document language.</p> 1035 1036 <div class="example"> 1037 1038 <p>Examples:</p> 1039 1040 <p>The following attribute selector represents an <code>h1</code> 1041 element that carries the <code>title</code> attribute, whatever its 1042 value:</p> 1043 1044 <pre>h1[title]</pre> 1045 1046 <p>In the following example, the selector represents a 1047 <code>span</code> element whose <code>class</code> attribute has 1048 exactly the value "example":</p> 1049 1050 <pre>span[class="example"]</pre> 1051 1052 <p>Multiple attribute selectors can be used to represent several 1053 attributes of an element, or several conditions on the same 1054 attribute. Here, the selector represents a <code>span</code> element 1055 whose <code>hello</code> attribute has exactly the value "Cleveland" 1056 and whose <code>goodbye</code> attribute has exactly the value 1057 "Columbus":</p> 1058 1059 <pre>span[hello="Cleveland"][goodbye="Columbus"]</pre> 1060 1061 <p>The following selectors illustrate the differences between "=" 1062 and "~=". The first selector will represent, for example, the value 1063 "copyright copyleft copyeditor" on a <code>rel</code> attribute. The 1064 second selector will only represent an <code>a</code> element with 1065 an <code>href</code> attribute having the exact value 1066 "http://www.w3.org/".</p> 1067 1068 <pre>a[rel~="copyright"] 1069 a[href="http://www.w3.org/"]</pre> 1070 1071 <p>The following selector represents a <code>link</code> element 1072 whose <code>hreflang</code> attribute is exactly "fr".</p> 1073 1074 <pre>link[hreflang=fr]</pre> 1075 1076 <p>The following selector represents a <code>link</code> element for 1077 which the values of the <code>hreflang</code> attribute begins with 1078 "en", including "en", "en-US", and "en-cockney":</p> 1079 1080 <pre>link[hreflang|="en"]</pre> 1081 1082 <p>Similarly, the following selectors represents a 1083 <code>DIALOGUE</code> element whenever it has one of two different 1084 values for an attribute <code>character</code>:</p> 1085 1086 <pre>DIALOGUE[character=romeo] 1087 DIALOGUE[character=juliet]</pre> 1088 1089 </div> 1090 1091 <h4><a name=attribute-substrings></a>6.3.2. Substring matching attribute 1092 selectors</h4> 1093 1094 <p>Three additional attribute selectors are provided for matching 1095 substrings in the value of an attribute:</p> 1096 1097 <dl> 1098 <dt><code>[att^=val]</code></dt> 1099 <dd>Represents an element with the <code>att</code> attribute whose value begins 1100 with the prefix "val".</dd> 1101 <dt><code>[att$=val]</code> 1102 <dd>Represents an element with the <code>att</code> attribute whose value ends with 1103 the suffix "val".</dd> 1104 <dt><code>[att*=val]</code> 1105 <dd>Represents an element with the <code>att</code> attribute whose value contains 1106 at least one instance of the substring "val".</dd> 1107 </dl> 1108 1109 <p>Attribute values must be identifiers or strings. The 1110 case-sensitivity of attribute names in selectors depends on the 1111 document language.</p> 1112 1113 <div class="example"> 1114 <p>Examples:</p> 1115 <p>The following selector represents an HTML <code>object</code>, referencing an 1116 image:</p> 1117 <pre>object[type^="image/"]</pre> 1118 <p>The following selector represents an HTML anchor <code>a</code> with an 1119 <code>href</code> attribute whose value ends with ".html".</p> 1120 <pre>a[href$=".html"]</pre> 1121 <p>The following selector represents an HTML paragraph with a <code>title</code> 1122 attribute whose value contains the substring "hello"</p> 1123 <pre>p[title*="hello"]</pre> 1124 </div> 1125 1126 <h4><a name=attrnmsp>6.3.3. Attribute selectors and namespaces</a></h4> 1127 1128 <p>Attribute selectors allow an optional namespace component to the 1129 attribute name. A namespace prefix that has been previously declared 1130 may be prepended to the attribute name separated by the namespace 1131 separator "vertical bar" (<code>|</code>). In keeping with 1132 the Namespaces in the XML recommendation, default namespaces do not 1133 apply to attributes, therefore attribute selectors without a namespace 1134 component apply only to attributes that have no declared namespace 1135 (equivalent to "<code>|attr</code>"). An asterisk may be used for the 1136 namespace prefix indicating that the selector is to match all 1137 attribute names without regard to the attribute's namespace. 1138 1139 <p>An attribute selector with an attribute name containing a namespace 1140 prefix that has not been previously declared is an <a 1141 href="#Conformance">invalid</a> selector. The mechanism for declaring 1142 a namespace prefix is left up to the language implementing Selectors. 1143 In CSS, such a mechanism is defined in the General Syntax module. 1144 1145 <div class="example"> 1146 <p>CSS examples:</p> 1147 <pre>@namespace foo "http://www.example.com"; 1148 [foo|att=val] { color: blue } 1149 [*|att] { color: yellow } 1150 [|att] { color: green } 1151 [att] { color: green }</pre> 1152 1153 <p>The first rule will match only elements with the attribute 1154 <code>att</code> in the "http://www.example.com" namespace with the 1155 value "val".</p> 1156 1157 <p>The second rule will match only elements with the attribute 1158 <code>att</code> regardless of the namespace of the attribute 1159 (including no declared namespace).</p> 1160 1161 <p>The last two rules are equivalent and will match only elements 1162 with the attribute <code>att</code> where the attribute is not 1163 declared to be in a namespace.</p> 1164 1165 </div> 1166 1167 <h4><a name=def-values>6.3.4. Default attribute values in DTDs</a></h4> 1168 1169 <p>Attribute selectors represent explicitly set attribute values in 1170 the document tree. Default attribute values may be defined in a DTD or 1171 elsewhere, but cannot always be selected by attribute 1172 selectors. Selectors should be designed so that they work even if the 1173 default values are not included in the document tree.</p> 1174 1175 <p>More precisely, a UA is <em>not</em> required to read an "external 1176 subset" of the DTD but <em>is</em> required to look for default 1177 attribute values in the document's "internal subset." (See <a 1178 href="#refsXML10">[XML10]</a> for definitions of these subsets.)</p> 1179 1180 <p>A UA that recognizes an XML namespace <a 1181 href="#refsXMLNAMES">[XMLNAMES]</a> is not required to use its 1182 knowledge of that namespace to treat default attribute values as if 1183 they were present in the document. (For example, an XHTML UA is not 1184 required to use its built-in knowledge of the XHTML DTD.)</p> 1185 1186 <p class="note"><strong>Note:</strong> Typically, implementations 1187 choose to ignore external subsets.</p> 1188 1189 <div class="example"> 1190 <p>Example:</p> 1191 1192 <p>Consider an element EXAMPLE with an attribute "notation" that has a 1193 default value of "decimal". The DTD fragment might be</p> 1194 1195 <pre class="dtd-example"><!ATTLIST EXAMPLE notation (decimal,octal) "decimal"></pre> 1196 1197 <p>If the style sheet contains the rules</p> 1198 1199 <pre>EXAMPLE[notation=decimal] { /*... default property settings ...*/ } 1200 EXAMPLE[notation=octal] { /*... other settings...*/ }</pre> 1201 1202 <p>the first rule will not match elements whose "notation" attribute 1203 is set by default, i.e. not set explicitly. To catch all cases, the 1204 attribute selector for the default value must be dropped:</p> 1205 1206 <pre>EXAMPLE { /*... default property settings ...*/ } 1207 EXAMPLE[notation=octal] { /*... other settings...*/ }</pre> 1208 1209 <p>Here, because the selector <code>EXAMPLE[notation=octal]</code> is 1210 more specific than the tag 1211 selector alone, the style declarations in the second rule will override 1212 those in the first for elements that have a "notation" attribute value 1213 of "octal". Care has to be taken that all property declarations that 1214 are to apply only to the default case are overridden in the non-default 1215 cases' style rules.</p> 1216 1217 </div> 1218 1219 <h3><a name=class-html>6.4. Class selectors</a></h3> 1220 1221 <p>Working with HTML, authors may use the period (U+002E, 1222 <code>.</code>) notation as an alternative to the <code>~=</code> 1223 notation when representing the <code>class</code> attribute. Thus, for 1224 HTML, <code>div.value</code> and <code>div[class~=value]</code> have 1225 the same meaning. The attribute value must immediately follow the 1226 "period" (<code>.</code>).</p> 1227 1228 <p>UAs may apply selectors using the period (.) notation in XML 1229 documents if the UA has namespace-specific knowledge that allows it to 1230 determine which attribute is the "class" attribute for the 1231 respective namespace. One such example of namespace-specific knowledge 1232 is the prose in the specification for a particular namespace (e.g. SVG 1233 1.0 <a href="#refsSVG">[SVG]</a> describes the <a 1234 href="http://www.w3.org/TR/2001/PR-SVG-20010719/styling.html#ClassAttribute">SVG 1235 "class" attribute</a> and how a UA should interpret it, and 1236 similarly MathML 1.01 <a href="#refsMATH">[MATH]</a> describes the <a 1237 href="http://www.w3.org/1999/07/REC-MathML-19990707/chapter2.html#sec2.3.4">MathML 1238 "class" attribute</a>.)</p> 1239 1240 <div class="example"> 1241 <p>CSS examples:</p> 1242 1243 <p>We can assign style information to all elements with 1244 <code>class~="pastoral"</code> as follows:</p> 1245 1246 <pre>*.pastoral { color: green } /* all elements with class~=pastoral */</pre> 1247 1248 <p>or just</p> 1249 1250 <pre>.pastoral { color: green } /* all elements with class~=pastoral */</pre> 1251 1252 <p>The following assigns style only to H1 elements with 1253 <code>class~="pastoral"</code>:</p> 1254 1255 <pre>H1.pastoral { color: green } /* H1 elements with class~=pastoral */</pre> 1256 1257 <p>Given these rules, the first H1 instance below would not have 1258 green text, while the second would:</p> 1259 1260 <pre><H1>Not green</H1> 1261 <H1 class="pastoral">Very green</H1></pre> 1262 1263 </div> 1264 1265 <p>To represent a subset of "class" values, each value must be preceded 1266 by a ".", in any order.</P> 1267 1268 <div class="example"> 1269 1270 <p>CSS example:</p> 1271 1272 <p>The following rule matches any P element whose "class" attribute 1273 has been assigned a list of <a 1274 href="#whitespace">whitespace</a>-separated values that includes 1275 "pastoral" and "marine":</p> 1276 1277 <pre>p.pastoral.marine { color: green }</pre> 1278 1279 <p>This rule matches when <code>class="pastoral blue aqua 1280 marine"</code> but does not match for <code>class="pastoral 1281 blue"</code>.</p> 1282 1283 </div> 1284 1285 <p class="note"><strong>Note:</strong> Because CSS gives considerable 1286 power to the "class" attribute, authors could conceivably design their 1287 own "document language" based on elements with almost no associated 1288 presentation (such as DIV and SPAN in HTML) and assigning style 1289 information through the "class" attribute. Authors should avoid this 1290 practice since the structural elements of a document language often 1291 have recognized and accepted meanings and author-defined classes may 1292 not.</p> 1293 1294 <p class="note"><strong>Note:</strong> If an element has multiple 1295 class attributes, their values must be concatenated with spaces 1296 between the values before searching for the class. As of this time the 1297 working group is not aware of any manner in which this situation can 1298 be reached, however, so this behavior is explicitly non-normative in 1299 this specification.</p> 1300 1301 <h3><a name=id-selectors>6.5. ID selectors</a></h3> 1302 1303 <p>Document languages may contain attributes that are declared to be 1304 of type ID. What makes attributes of type ID special is that no two 1305 such attributes can have the same value in a document, regardless of 1306 the type of the elements that carry them; whatever the document 1307 language, an ID typed attribute can be used to uniquely identify its 1308 element. In HTML all ID attributes are named "id"; XML applications 1309 may name ID attributes differently, but the same restriction 1310 applies.</p> 1311 1312 <p>An ID-typed attribute of a document language allows authors to 1313 assign an identifier to one element instance in the document tree. W3C 1314 ID selectors represent an element instance based on its identifier. An 1315 ID selector contains a "number sign" (U+0023, 1316 <code>#</code>) immediately followed by the ID value, which must be an 1317 identifier.</p> 1318 1319 <p>Selectors does not specify how a UA knows the ID-typed attribute of 1320 an element. The UA may, e.g., read a document's DTD, have the 1321 information hard-coded or ask the user. 1322 1323 <div class="example"> 1324 <p>Examples:</p> 1325 <p>The following ID selector represents an <code>h1</code> element 1326 whose ID-typed attribute has the value "chapter1":</p> 1327 <pre>h1#chapter1</pre> 1328 <p>The following ID selector represents any element whose ID-typed 1329 attribute has the value "chapter1":</p> 1330 <pre>#chapter1</pre> 1331 <p>The following selector represents any element whose ID-typed 1332 attribute has the value "z98y".</p> 1333 <pre>*#z98y</pre> 1334 </div> 1335 1336 <p class="note"><strong>Note.</strong> In XML 1.0 <a 1337 href="#refsXML10">[XML10]</a>, the information about which attribute 1338 contains an element's IDs is contained in a DTD or a schema. When 1339 parsing XML, UAs do not always read the DTD, and thus may not know 1340 what the ID of an element is (though a UA may have namespace-specific 1341 knowledge that allows it to determine which attribute is the ID 1342 attribute for that namespace). If a style sheet designer knows or 1343 suspects that a UA may not know what the ID of an element is, he 1344 should use normal attribute selectors instead: 1345 <code>[name=p371]</code> instead of <code>#p371</code>. Elements in 1346 XML 1.0 documents without a DTD do not have IDs at all.</p> 1347 1348 <p>If an element has multiple ID attributes, all of them must be 1349 treated as IDs for that element for the purposes of the ID 1350 selector. Such a situation could be reached using mixtures of xml:id, 1351 DOM3 Core, XML DTDs, and namespace-specific knowledge.</p> 1352 1353 <h3><a name=pseudo-classes>6.6. Pseudo-classes</a></h3> 1354 1355 <p>The pseudo-class concept is introduced to permit selection based on 1356 information that lies outside of the document tree or that cannot be 1357 expressed using the other simple selectors.</p> 1358 1359 <p>A pseudo-class always consists of a "colon" 1360 (<code>:</code>) followed by the name of the pseudo-class and 1361 optionally by a value between parentheses.</p> 1362 1363 <p>Pseudo-classes are allowed in all sequences of simple selectors 1364 contained in a selector. Pseudo-classes are allowed anywhere in 1365 sequences of simple selectors, after the leading type selector or 1366 universal selector (possibly omitted). Pseudo-class names are 1367 case-insensitive. Some pseudo-classes are mutually exclusive, while 1368 others can be applied simultaneously to the same 1369 element. Pseudo-classes may be dynamic, in the sense that an element 1370 may acquire or lose a pseudo-class while a user interacts with the 1371 document.</p> 1372 1373 1374 <h4><a name=dynamic-pseudos>6.6.1. Dynamic pseudo-classes</a></h4> 1375 1376 <p>Dynamic pseudo-classes classify elements on characteristics other 1377 than their name, attributes, or content, in principle characteristics 1378 that cannot be deduced from the document tree.</p> 1379 1380 <p>Dynamic pseudo-classes do not appear in the document source or 1381 document tree.</p> 1382 1383 1384 <h5>The <a name=link>link pseudo-classes: :link and :visited</a></h5> 1385 1386 <p>User agents commonly display unvisited links differently from 1387 previously visited ones. Selectors 1388 provides the pseudo-classes <code>:link</code> and 1389 <code>:visited</code> to distinguish them:</p> 1390 1391 <ul> 1392 <li>The <code>:link</code> pseudo-class applies to links that have 1393 not yet been visited.</li> 1394 <li>The <code>:visited</code> pseudo-class applies once the link has 1395 been visited by the user. </li> 1396 </ul> 1397 1398 <p>After some amount of time, user agents may choose to return a 1399 visited link to the (unvisited) ':link' state.</p> 1400 1401 <p>The two states are mutually exclusive.</p> 1402 1403 <div class="example"> 1404 1405 <p>Example:</p> 1406 1407 <p>The following selector represents links carrying class 1408 <code>external</code> and already visited:</p> 1409 1410 <pre>a.external:visited</pre> 1411 1412 </div> 1413 1414 <p class="note"><strong>Note:</strong> It is possible for style sheet 1415 authors to abuse the :link and :visited pseudo-classes to determine 1416 which sites a user has visited without the user's consent. 1417 1418 <p>UAs may therefore treat all links as unvisited links, or implement 1419 other measures to preserve the user's privacy while rendering visited 1420 and unvisited links differently.</p> 1421 1422 <h5>The <a name=useraction-pseudos>user action pseudo-classes 1423 :hover, :active, and :focus</a></h5> 1424 1425 <p>Interactive user agents sometimes change the rendering in response 1426 to user actions. Selectors provides 1427 three pseudo-classes for the selection of an element the user is 1428 acting on.</p> 1429 1430 <ul> 1431 1432 <li>The <code>:hover</code> pseudo-class applies while the user 1433 designates an element with a pointing device, but does not activate 1434 it. For example, a visual user agent could apply this pseudo-class 1435 when the cursor (mouse pointer) hovers over a box generated by the 1436 element. User agents not that do not support <a 1437 href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">interactive 1438 media</a> do not have to support this pseudo-class. Some conforming 1439 user agents that support <a 1440 href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">interactive 1441 media</a> may not be able to support this pseudo-class (e.g., a pen 1442 device that does not detect hovering).</li> 1443 1444 <li>The <code>:active</code> pseudo-class applies while an element 1445 is being activated by the user. For example, between the times the 1446 user presses the mouse button and releases it.</li> 1447 1448 <li>The <code>:focus</code> pseudo-class applies while an element 1449 has the focus (accepts keyboard or mouse events, or other forms of 1450 input). </li> 1451 1452 </ul> 1453 1454 <p>There may be document language or implementation specific limits on 1455 which elements can become <code>:active</code> or acquire 1456 <code>:focus</code>.</p> 1457 1458 <p>These pseudo-classes are not mutually exclusive. An element may 1459 match several pseudo-classes at the same time.</p> 1460 1461 <p>Selectors doesn't define if the parent of an element that is 1462 ':active' or ':hover' is also in that state.</p> 1463 1464 <div class="example"> 1465 <p>Examples:</p> 1466 <pre>a:link /* unvisited links */ 1467 a:visited /* visited links */ 1468 a:hover /* user hovers */ 1469 a:active /* active links */</pre> 1470 <p>An example of combining dynamic pseudo-classes:</p> 1471 <pre>a:focus 1472 a:focus:hover</pre> 1473 <p>The last selector matches <code>a</code> elements that are in 1474 the pseudo-class :focus and in the pseudo-class :hover.</p> 1475 </div> 1476 1477 <p class="note"><strong>Note:</strong> An element can be both ':visited' 1478 and ':active' (or ':link' and ':active').</p> 1479 1480 <h4><a name=target-pseudo>6.6.2. The target pseudo-class :target</a></h4> 1481 1482 <p>Some URIs refer to a location within a resource. This kind of URI 1483 ends with a "number sign" (#) followed by an anchor 1484 identifier (called the fragment identifier).</p> 1485 1486 <p>URIs with fragment identifiers link to a certain element within the 1487 document, known as the target element. For instance, here is a URI 1488 pointing to an anchor named <code>section_2</code> in an HTML 1489 document:</p> 1490 1491 <pre>http://example.com/html/top.html#section_2</pre> 1492 1493 <p>A target element can be represented by the <code>:target</code> 1494 pseudo-class. If the document's URI has no fragment identifier, then 1495 the document has no target element.</p> 1496 1497 <div class="example"> 1498 <p>Example:</p> 1499 <pre>p.note:target</pre> 1500 <p>This selector represents a <code>p</code> element of class 1501 <code>note</code> that is the target element of the referring 1502 URI.</p> 1503 </div> 1504 1505 <div class="example"> 1506 <p>CSS example:</p> 1507 <p>Here, the <code>:target</code> pseudo-class is used to make the 1508 target element red and place an image before it, if there is one:</p> 1509 <pre>*:target { color : red } 1510 *:target::before { content : url(target.png) }</pre> 1511 </div> 1512 1513 <h4><a name=lang-pseudo>6.6.3. The language pseudo-class :lang</a></h4> 1514 1515 <p>If the document language specifies how the human language of an 1516 element is determined, it is possible to write selectors that 1517 represent an element based on its language. For example, in HTML <a 1518 href="#refsHTML4">[HTML4]</a>, the language is determined by a 1519 combination of the <code>lang</code> attribute, the <code>meta</code> 1520 element, and possibly by information from the protocol (such as HTTP 1521 headers). XML uses an attribute called <code>xml:lang</code>, and 1522 there may be other document language-specific methods for determining 1523 the language.</p> 1524 1525 <p>The pseudo-class <code>:lang(C)</code> represents an element that 1526 is in language C. Whether an element is represented by a 1527 <code>:lang()</code> selector is based solely on the identifier C 1528 being either equal to, or a hyphen-separated substring of, the 1529 element's language value, in the same way as if performed by the <a 1530 href="#attribute-representation">'|='</a> operator in attribute 1531 selectors. The identifier C does not have to be a valid language 1532 name.</p> 1533 1534 <p>C must not be empty. (If it is, the selector is invalid.)</p> 1535 1536 <p class="note"><strong>Note:</strong> It is recommended that 1537 documents and protocols indicate language using codes from RFC 3066 <a 1538 href="#refsRFC3066">[RFC3066]</a> or its successor, and by means of 1539 "xml:lang" attributes in the case of XML-based documents <a 1540 href="#refsXML10">[XML10]</a>. See <a 1541 href="http://www.w3.org/International/questions/qa-lang-2or3.html"> 1542 "FAQ: Two-letter or three-letter language codes."</a></p> 1543 1544 <div class="example"> 1545 <p>Examples:</p> 1546 <p>The two following selectors represent an HTML document that is in 1547 Belgian, French, or German. The two next selectors represent 1548 <code>q</code> quotations in an arbitrary element in Belgian, French, 1549 or German.</p> 1550 <pre>html:lang(fr-be) 1551 html:lang(de) 1552 :lang(fr-be) > q 1553 :lang(de) > q</pre> 1554 </div> 1555 1556 <h4><a name=UIstates>6.6.4. The UI element states pseudo-classes</a></h4> 1557 1558 <h5><a name=enableddisabled>The :enabled and :disabled pseudo-classes</a></h5> 1559 1560 <p>The <code>:enabled</code> pseudo-class allows authors to customize 1561 the look of user interface elements that are enabled — which the 1562 user can select or activate in some fashion (e.g. clicking on a button 1563 with a mouse). There is a need for such a pseudo-class because there 1564 is no way to programmatically specify the default appearance of say, 1565 an enabled <code>input</code> element without also specifying what it 1566 would look like when it was disabled.</p> 1567 1568 <p>Similar to <code>:enabled</code>, <code>:disabled</code> allows the 1569 author to specify precisely how a disabled or inactive user interface 1570 element should look.</p> 1571 1572 <p>Most elements will be neither enabled nor disabled. An element is 1573 enabled if the user can either activate it or transfer the focus to 1574 it. An element is disabled if it could be enabled, but the user cannot 1575 presently activate it or transfer focus to it.</p> 1576 1577 1578 <h5><a name=checked>The :checked pseudo-class</a></h5> 1579 1580 <p>Radio and checkbox elements can be toggled by the user. Some menu 1581 items are "checked" when the user selects them. When such elements are 1582 toggled "on" the <code>:checked</code> pseudo-class applies. The 1583 <code>:checked</code> pseudo-class initially applies to such elements 1584 that have the HTML4 <code>selected</code> and <code>checked</code> 1585 attributes as described in <a 1586 href="http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.2.1">Section 1587 17.2.1 of HTML4</a>, but of course the user can toggle "off" such 1588 elements in which case the <code>:checked</code> pseudo-class would no 1589 longer apply. While the <code>:checked</code> pseudo-class is dynamic 1590 in nature, and is altered by user action, since it can also be based 1591 on the presence of the semantic HTML4 <code>selected</code> and 1592 <code>checked</code> attributes, it applies to all media. 1593 1594 1595 <h5><a name=indeterminate>The :indeterminate pseudo-class</a></h5> 1596 1597 <div class="note"> 1598 1599 <p>Radio and checkbox elements can be toggled by the user, but are 1600 sometimes in an indeterminate state, neither checked nor unchecked. 1601 This can be due to an element attribute, or DOM manipulation.</p> 1602 1603 <p>A future version of this specification may introduce an 1604 <code>:indeterminate</code> pseudo-class that applies to such elements. 1605 <!--While the <code>:indeterminate</code> pseudo-class is dynamic in 1606 nature, and is altered by user action, since it can also be based on 1607 the presence of an element attribute, it applies to all media.</p> 1608 1609 <p>Components of a radio-group initialized with no pre-selected choice 1610 are an example of :indeterminate state.--></p> 1611 1612 </div> 1613 1614 1615 <h4><a name=structural-pseudos>6.6.5. Structural pseudo-classes</a></h4> 1616 1617 <p>Selectors introduces the concept of <dfn>structural 1618 pseudo-classes</dfn> to permit selection based on extra information that lies in 1619 the document tree but cannot be represented by other simple selectors or 1620 combinators. 1621 1622 <p>Note that standalone pieces of PCDATA (text nodes in the DOM) are 1623 not counted when calculating the position of an element in the list of 1624 children of its parent. When calculating the position of an element in 1625 the list of children of its parent, the index numbering starts at 1. 1626 1627 1628 <h5><a name=root-pseudo>:root pseudo-class</a></h5> 1629 1630 <p>The <code>:root</code> pseudo-class represents an element that is 1631 the root of the document. In HTML 4, this is always the 1632 <code>HTML</code> element. 1633 1634 1635 <h5><a name=nth-child-pseudo>:nth-child() pseudo-class</a></h5> 1636 1637 <p>The 1638 <code>:nth-child(<var>a</var><code>n</code>+<var>b</var>)</code> 1639 pseudo-class notation represents an element that has 1640 <var>a</var><code>n</code>+<var>b</var>-1 siblings 1641 <strong>before</strong> it in the document tree, for a given positive 1642 integer or zero value of <code>n</code>, and has a parent element. In 1643 other words, this matches the <var>b</var>th child of an element after 1644 all the children have been split into groups of <var>a</var> elements 1645 each. For example, this allows the selectors to address every other 1646 row in a table, and could be used to alternate the color 1647 of paragraph text in a cycle of four. The <var>a</var> and 1648 <var>b</var> values must be zero, negative integers or positive 1649 integers. The index of the first child of an element is 1. 1650 1651 <p>In addition to this, <code>:nth-child()</code> can take 1652 '<code>odd</code>' and '<code>even</code>' as arguments instead. 1653 '<code>odd</code>' has the same signification as <code>2n+1</code>, 1654 and '<code>even</code>' has the same signification as <code>2n</code>. 1655 1656 1657 <div class="example"> 1658 <p>Examples:</p> 1659 <pre>tr:nth-child(2n+1) /* represents every odd row of an HTML table */ 1660 tr:nth-child(odd) /* same */ 1661 tr:nth-child(2n) /* represents every even row of an HTML table */ 1662 tr:nth-child(even) /* same */ 1663 1664 /* Alternate paragraph colours in CSS */ 1665 p:nth-child(4n+1) { color: navy; } 1666 p:nth-child(4n+2) { color: green; } 1667 p:nth-child(4n+3) { color: maroon; } 1668 p:nth-child(4n+4) { color: purple; }</pre> 1669 </div> 1670 1671 <p>When <var>a</var>=0, no repeating is used, so for example 1672 <code>:nth-child(0n+5)</code> matches only the fifth child. When 1673 <var>a</var>=0, the <var>a</var><code>n</code> part need not be 1674 included, so the syntax simplifies to 1675 <code>:nth-child(<var>b</var>)</code> and the last example simplifies 1676 to <code>:nth-child(5)</code>. 1677 1678 <div class="example"> 1679 <p>Examples:</p> 1680 <pre>foo:nth-child(0n+1) /* represents an element foo, first child of its parent element */ 1681 foo:nth-child(1) /* same */</pre> 1682 </div> 1683 1684 <p>When <var>a</var>=1, the number may be omitted from the rule. 1685 1686 <div class="example"> 1687 <p>Examples:</p> 1688 <p>The following selectors are therefore equivalent:</p> 1689 <pre>bar:nth-child(1n+0) /* represents all bar elements, specificity (0,1,1) */ 1690 bar:nth-child(n+0) /* same */ 1691 bar:nth-child(n) /* same */ 1692 bar /* same but lower specificity (0,0,1) */</pre> 1693 </div> 1694 1695 <p>If <var>b</var>=0, then every <var>a</var>th element is picked. In 1696 such a case, the <var>b</var> part may be omitted. 1697 1698 <div class="example"> 1699 <p>Examples:</p> 1700 <pre>tr:nth-child(2n+0) /* represents every even row of an HTML table */ 1701 tr:nth-child(2n) /* same */</pre> 1702 </div> 1703 1704 <p>If both <var>a</var> and <var>b</var> are equal to zero, the 1705 pseudo-class represents no element in the document tree.</p> 1706 1707 <p>The value <var>a</var> can be negative, but only the positive 1708 values of <var>a</var><code>n</code>+<var>b</var>, for 1709 <code>n</code>≥0, may represent an element in the document 1710 tree.</p> 1711 1712 <div class="example"> 1713 <p>Example:</p> 1714 <pre>html|tr:nth-child(-n+6) /* represents the 6 first rows of XHTML tables */</pre> 1715 </div> 1716 1717 <p>When the value <var>b</var> is negative, the "+" character in the 1718 expression must be removed (it is effectively replaced by the "-" 1719 character indicating the negative value of <var>b</var>).</p> 1720 1721 <div class="example"> 1722 <p>Examples:</p> 1723 <pre>:nth-child(10n-1) /* represents the 9th, 19th, 29th, etc, element */ 1724 :nth-child(10n+9) /* Same */ 1725 :nth-child(10n+-1) /* Syntactically invalid, and would be ignored */</pre> 1726 </div> 1727 1728 1729 <h5><a name=nth-last-child-pseudo>:nth-last-child() pseudo-class</a></h5> 1730 1731 <p>The <code>:nth-last-child(<var>a</var>n+<var>b</var>)</code> 1732 pseudo-class notation represents an element that has 1733 <var>a</var><code>n</code>+<var>b</var>-1 siblings 1734 <strong>after</strong> it in the document tree, for a given positive 1735 integer or zero value of <code>n</code>, and has a parent element. See 1736 <code>:nth-child()</code> pseudo-class for the syntax of its argument. 1737 It also accepts the '<code>even</code>' and '<code>odd</code>' values 1738 as arguments. 1739 1740 1741 <div class="example"> 1742 <p>Examples:</p> 1743 <pre>tr:nth-last-child(-n+2) /* represents the two last rows of an HTML table */ 1744 1745 foo:nth-last-child(odd) /* represents all odd foo elements in their parent element, 1746 counting from the last one */</pre> 1747 </div> 1748 1749 1750 <h5><a name=nth-of-type-pseudo>:nth-of-type() pseudo-class</a></h5> 1751 1752 <p>The <code>:nth-of-type(<var>a</var>n+<var>b</var>)</code> 1753 pseudo-class notation represents an element that has 1754 <var>a</var><code>n</code>+<var>b</var>-1 siblings with the same 1755 element name <strong>before</strong> it in the document tree, for a 1756 given zero or positive integer value of <code>n</code>, and has a 1757 parent element. In other words, this matches the <var>b</var>th child 1758 of that type after all the children of that type have been split into 1759 groups of a elements each. See <code>:nth-child()</code> pseudo-class 1760 for the syntax of its argument. It also accepts the 1761 '<code>even</code>' and '<code>odd</code>' values. 1762 1763 1764 <div class="example"> 1765 <p>CSS example:</p> 1766 <p>This allows an author to alternate the position of floated images:</p> 1767 <pre>img:nth-of-type(2n+1) { float: right; } 1768 img:nth-of-type(2n) { float: left; }</pre> 1769 </div> 1770 1771 1772 <h5><a name=nth-last-of-type-pseudo>:nth-last-of-type() pseudo-class</a></h5> 1773 1774 <p>The <code>:nth-last-of-type(<var>a</var>n+<var>b</var>)</code> 1775 pseudo-class notation represents an element that has 1776 <var>a</var><code>n</code>+<var>b</var>-1 siblings with the same 1777 element name <strong>after</strong> it in the document tree, for a 1778 given zero or positive integer value of <code>n</code>, and has a 1779 parent element. See <code>:nth-child()</code> pseudo-class for the 1780 syntax of its argument. It also accepts the '<code>even</code>' and '<code>odd</code>' values. 1781 1782 1783 <div class="example"> 1784 <p>Example:</p> 1785 <p>To represent all <code>h2</code> children of an XHTML 1786 <code>body</code> except the first and last, one could use the 1787 following selector:</p> 1788 <pre>body > h2:nth-of-type(n+2):nth-last-of-type(n+2)</pre> 1789 <p>In this case, one could also use <code>:not()</code>, although the 1790 selector ends up being just as long:</p> 1791 <pre>body > h2:not(:first-of-type):not(:last-of-type)</pre> 1792 </div> 1793 1794 1795 <h5><a name=first-child-pseudo>:first-child pseudo-class</a></h5> 1796 1797 <p>Same as <code>:nth-child(1)</code>. The <code>:first-child</code> pseudo-class 1798 represents an element that is the first child of some other element. 1799 1800 1801 <div class="example"> 1802 <p>Examples:</p> 1803 <p>The following selector represents a <code>p</code> element that is 1804 the first child of a <code>div</code> element:</p> 1805 <pre>div > p:first-child</pre> 1806 <p>This selector can represent the <code>p</code> inside the 1807 <code>div</code> of the following fragment:</p> 1808 <pre><p> The last P before the note.</p> 1809 <div class="note"> 1810 <p> The first P inside the note.</p> 1811 </div></pre>but cannot represent the second <code>p</code> in the following 1812 fragment: 1813 <pre><p> The last P before the note.</p> 1814 <div class="note"> 1815 <h2> Note </h2> 1816 <p> The first P inside the note.</p> 1817 </div></pre> 1818 <p>The following two selectors are usually equivalent:</p> 1819 <pre>* > a:first-child /* a is first child of any element */ 1820 a:first-child /* Same (assuming a is not the root element) */</pre> 1821 </div> 1822 1823 <h5><a name=last-child-pseudo>:last-child pseudo-class</a></h5> 1824 1825 <p>Same as <code>:nth-last-child(1)</code>. The <code>:last-child</code> pseudo-class 1826 represents an element that is the last child of some other element. 1827 1828 <div class="example"> 1829 <p>Example:</p> 1830 <p>The following selector represents a list item <code>li</code> that 1831 is the last child of an ordered list <code>ol</code>. 1832 <pre>ol > li:last-child</pre> 1833 </div> 1834 1835 <h5><a name=first-of-type-pseudo>:first-of-type pseudo-class</a></h5> 1836 1837 <p>Same as <code>:nth-of-type(1)</code>. The <code>:first-of-type</code> pseudo-class 1838 represents an element that is the first sibling of its type in the list of 1839 children of its parent element. 1840 1841 <div class="example"> 1842 <p>Example:</p> 1843 <p>The following selector represents a definition title 1844 <code>dt</code> inside a definition list <code>dl</code>, this 1845 <code>dt</code> being the first of its type in the list of children of 1846 its parent element.</p> 1847 <pre>dl dt:first-of-type</pre> 1848 <p>It is a valid description for the first two <code>dt</code> 1849 elements in the following example but not for the third one:</p> 1850 <pre><dl> 1851 <dt>gigogne</dt> 1852 <dd> 1853 <dl> 1854 <dt>fusée</dt> 1855 <dd>multistage rocket</dd> 1856 <dt>table</dt> 1857 <dd>nest of tables</dd> 1858 </dl> 1859 </dd> 1860 </dl></pre> 1861 </div> 1862 1863 <h5><a name=last-of-type-pseudo>:last-of-type pseudo-class</a></h5> 1864 1865 <p>Same as <code>:nth-last-of-type(1)</code>. The 1866 <code>:last-of-type</code> pseudo-class represents an element that is 1867 the last sibling of its type in the list of children of its parent 1868 element.</p> 1869 1870 <div class="example"> 1871 <p>Example:</p> 1872 <p>The following selector represents the last data cell 1873 <code>td</code> of a table row.</p> 1874 <pre>tr > td:last-of-type</pre> 1875 </div> 1876 1877 <h5><a name=only-child-pseudo>:only-child pseudo-class</a></h5> 1878 1879 <p>Represents an element that has a parent element and whose parent 1880 element has no other element children. Same as 1881 <code>:first-child:last-child</code> or 1882 <code>:nth-child(1):nth-last-child(1)</code>, but with a lower 1883 specificity.</p> 1884 1885 <h5><a name=only-of-type-pseudo>:only-of-type pseudo-class</a></h5> 1886 1887 <p>Represents an element that has a parent element and whose parent 1888 element has no other element children with the same element name. Same 1889 as <code>:first-of-type:last-of-type</code> or 1890 <code>:nth-of-type(1):nth-last-of-type(1)</code>, but with a lower 1891 specificity.</p> 1892 1893 1894 <h5><a name=empty-pseudo></a>:empty pseudo-class</h5> 1895 1896 <p>The <code>:empty</code> pseudo-class represents an element that has 1897 no children at all. In terms of the DOM, only element nodes and text 1898 nodes (including CDATA nodes and entity references) whose data has a 1899 non-zero length must be considered as affecting emptiness; comments, 1900 PIs, and other nodes must not affect whether an element is considered 1901 empty or not.</p> 1902 1903 <div class="example"> 1904 <p>Examples:</p> 1905 <p><code>p:empty</code> is a valid representation of the following fragment:</p> 1906 <pre><p></p></pre> 1907 <p><code>foo:empty</code> is not a valid representation for the 1908 following fragments:</p> 1909 <pre><foo>bar</foo></pre> 1910 <pre><foo><bar>bla</bar></foo></pre> 1911 <pre><foo>this is not <bar>:empty</bar></foo></pre> 1912 </div> 1913 1914 <h4><a name=content-selectors>6.6.6. Blank</a></h4> <!-- It's the Return of Appendix H!!! Run away! --> 1915 1916 <p>This section intentionally left blank.</p> 1917 <!-- (used to be :contains()) --> 1918 1919 <h4><a name=negation></a>6.6.7. The negation pseudo-class</h4> 1920 1921 <p>The negation pseudo-class, <code>:not(<var>X</var>)</code>, is a 1922 functional notation taking a <a href="#simple-selectors-dfn">simple 1923 selector</a> (excluding the negation pseudo-class itself and 1924 pseudo-elements) as an argument. It represents an element that is not 1925 represented by the argument. 1926 1927 <!-- pseudo-elements are not simple selectors, so the above paragraph 1928 may be a bit confusing --> 1929 1930 <div class="example"> 1931 <p>Examples:</p> 1932 <p>The following CSS selector matches all <code>button</code> 1933 elements in an HTML document that are not disabled.</p> 1934 <pre>button:not([DISABLED])</pre> 1935 <p>The following selector represents all but <code>FOO</code> 1936 elements.</p> 1937 <pre>*:not(FOO)</pre> 1938 <p>The following group of selectors represents all HTML elements 1939 except links.</p> 1940 <pre>html|*:not(:link):not(:visited)</pre> 1941 </div> 1942 1943 <p>Default namespace declarations do not affect the argument of the 1944 negation pseudo-class unless the argument is a universal selector or a 1945 type selector.</p> 1946 1947 <div class="example"> 1948 <p>Examples:</p> 1949 <p>Assuming that the default namespace is bound to 1950 "http://example.com/", the following selector represents all 1951 elements that are not in that namespace:</p> 1952 <pre>*|*:not(*)</pre> 1953 <p>The following CSS selector matches any element being hovered, 1954 regardless of its namespace. In particular, it is not limited to 1955 only matching elements in the default namespace that are not being 1956 hovered, and elements not in the default namespace don't match the 1957 rule when they <em>are</em> being hovered.</p> 1958 <pre>*|*:not(:hover)</pre> 1959 </div> 1960 1961 <p class="note"><strong>Note</strong>: the :not() pseudo allows 1962 useless selectors to be written. For instance <code>:not(*|*)</code>, 1963 which represents no element at all, or <code>foo:not(bar)</code>, 1964 which is equivalent to <code>foo</code> but with a higher 1965 specificity.</p> 1966 1967 <h3><a name=pseudo-elements>7. Pseudo-elements</a></h3> 1968 1969 <p>Pseudo-elements create abstractions about the document tree beyond 1970 those specified by the document language. For instance, document 1971 languages do not offer mechanisms to access the first letter or first 1972 line of an element's content. Pseudo-elements allow designers to refer 1973 to this otherwise inaccessible information. Pseudo-elements may also 1974 provide designers a way to refer to content that does not exist in the 1975 source document (e.g., the <code>::before</code> and 1976 <code>::after</code> pseudo-elements give access to generated 1977 content).</p> 1978 1979 <p>A pseudo-element is made of two colons (<code>::</code>) followed 1980 by the name of the pseudo-element.</p> 1981 1982 <p>This <code>::</code> notation is introduced by the current document 1983 in order to establish a discrimination between pseudo-classes and 1984 pseudo-elements. For compatibility with existing style sheets, user 1985 agents must also accept the previous one-colon notation for 1986 pseudo-elements introduced in CSS levels 1 and 2 (namely, 1987 <code>:first-line</code>, <code>:first-letter</code>, 1988 <code>:before</code> and <code>:after</code>). This compatibility is 1989 not allowed for the new pseudo-elements introduced in CSS level 3.</p> 1990 1991 <p>Only one pseudo-element may appear per selector, and if present it 1992 must appear after the sequence of simple selectors that represents the 1993 <a href="#subject">subjects</a> of the selector. <span class="note">A 1994 future version of this specification may allow multiple 1995 pesudo-elements per selector.</span></p> 1996 1997 <h4><a name=first-line>7.1. The ::first-line pseudo-element</a></h4> 1998 1999 <p>The <code>::first-line</code> pseudo-element describes the contents 2000 of the first formatted line of an element. 2001 2002 <div class="example"> 2003 <p>CSS example:</p> 2004 <pre>p::first-line { text-transform: uppercase }</pre> 2005 <p>The above rule means "change the letters of the first line of every 2006 paragraph to uppercase".</p> 2007 </div> 2008 2009 <p>The selector <code>p::first-line</code> does not match any real 2010 HTML element. It does match a pseudo-element that conforming user 2011 agents will insert at the beginning of every paragraph.</p> 2012 2013 <p>Note that the length of the first line depends on a number of 2014 factors, including the width of the page, the font size, etc. Thus, 2015 an ordinary HTML paragraph such as:</p> 2016 2017 <pre> 2018 <P>This is a somewhat long HTML 2019 paragraph that will be broken into several 2020 lines. The first line will be identified 2021 by a fictional tag sequence. The other lines 2022 will be treated as ordinary lines in the 2023 paragraph.</P> 2024 </pre> 2025 2026 <p>the lines of which happen to be broken as follows: 2027 2028 <pre> 2029 THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT 2030 will be broken into several lines. The first 2031 line will be identified by a fictional tag 2032 sequence. The other lines will be treated as 2033 ordinary lines in the paragraph. 2034 </pre> 2035 2036 <p>This paragraph might be "rewritten" by user agents to include the 2037 <em>fictional tag sequence</em> for <code>::first-line</code>. This 2038 fictional tag sequence helps to show how properties are inherited.</p> 2039 2040 <pre> 2041 <P><b><P::first-line></b> This is a somewhat long HTML 2042 paragraph that <b></P::first-line></b> will be broken into several 2043 lines. The first line will be identified 2044 by a fictional tag sequence. The other lines 2045 will be treated as ordinary lines in the 2046 paragraph.</P> 2047 </pre> 2048 2049 <p>If a pseudo-element breaks up a real element, the desired effect 2050 can often be described by a fictional tag sequence that closes and 2051 then re-opens the element. Thus, if we mark up the previous paragraph 2052 with a <code>span</code> element:</p> 2053 2054 <pre> 2055 <P><b><SPAN class="test"></b> This is a somewhat long HTML 2056 paragraph that will be broken into several 2057 lines.<b></SPAN></b> The first line will be identified 2058 by a fictional tag sequence. The other lines 2059 will be treated as ordinary lines in the 2060 paragraph.</P> 2061 </pre> 2062 2063 <p>the user agent could simulate start and end tags for 2064 <code>span</code> when inserting the fictional tag sequence for 2065 <code>::first-line</code>. 2066 2067 <pre> 2068 <P><P::first-line><b><SPAN class="test"></b> This is a 2069 somewhat long HTML 2070 paragraph that will <b></SPAN></b></P::first-line><b><SPAN class="test"></b> be 2071 broken into several 2072 lines.<b></SPAN></b> The first line will be identified 2073 by a fictional tag sequence. The other lines 2074 will be treated as ordinary lines in the 2075 paragraph.</P> 2076 </pre> 2077 2078 <p>In CSS, the <code>::first-line</code> pseudo-element can only be 2079 attached to a block-level element, an inline-block, a table-caption, 2080 or a table-cell.</p> 2081 2082 <p><a name="first-formatted-line"></a>The "first formatted line" of an 2083 element may occur inside a 2084 block-level descendant in the same flow (i.e., a block-level 2085 descendant that is not positioned and not a float). E.g., the first 2086 line of the <code>div</code> in <code><DIV><P>This 2087 line...</P></DIV></code> is the first line of the <code>p</code> (assuming 2088 that both <code>p</code> and <code>div</code> are block-level). 2089 2090 <p>The first line of a table-cell or inline-block cannot be the first 2091 formatted line of an ancestor element. Thus, in <code><DIV><P 2092 STYLE="display: inline-block">Hello<BR>Goodbye</P> 2093 etcetera</DIV></code> the first formatted line of the 2094 <code>div</code> is not the line "Hello". 2095 2096 <p class="note">Note that the first line of the <code>p</code> in this 2097 fragment: <code><p><br>First...</code> doesn't contain any 2098 letters (assuming the default style for <code>br</code> in HTML 2099 4). The word "First" is not on the first formatted line. 2100 2101 <p>A UA should act as if the fictional start tags of the 2102 <code>::first-line</code> pseudo-elements were nested just inside the 2103 innermost enclosing block-level element. (Since CSS1 and CSS2 were 2104 silent on this case, authors should not rely on this behavior.) Here 2105 is an example. The fictional tag sequence for</p> 2106 2107 <pre> 2108 <DIV> 2109 <P>First paragraph</P> 2110 <P>Second paragraph</P> 2111 </DIV> 2112 </pre> 2113 2114 <p>is</p> 2115 2116 <pre> 2117 <DIV> 2118 <P><DIV::first-line><P::first-line>First paragraph</P::first-line></DIV::first-line></P> 2119 <P><P::first-line>Second paragraph</P::first-line></P> 2120 </DIV> 2121 </pre> 2122 2123 <p>The <code>::first-line</code> pseudo-element is similar to an 2124 inline-level element, but with certain restrictions. In CSS, the 2125 following properties apply to a <code>::first-line</code> 2126 pseudo-element: font properties, color property, background 2127 properties, 'word-spacing', 'letter-spacing', 'text-decoration', 2128 'vertical-align', 'text-transform', 'line-height'. UAs may apply other 2129 properties as well.</p> 2130 2131 2132 <h4><a name=first-letter>7.2. The ::first-letter pseudo-element</a></h4> 2133 2134 <p>The <code>::first-letter</code> pseudo-element represents the first 2135 letter of the first line of a block, if it is not preceded by any 2136 other content (such as images or inline tables) on its line. The 2137 ::first-letter pseudo-element may be used for "initial caps" and "drop 2138 caps", which are common typographical effects. This type of initial 2139 letter is similar to an inline-level element if its 'float' property 2140 is 'none'; otherwise, it is similar to a floated element.</p> 2141 2142 <p>In CSS, these are the properties that apply to <code>::first-letter</code> 2143 pseudo-elements: font properties, 'text-decoration', 'text-transform', 2144 'letter-spacing', 'word-spacing' (when appropriate), 'line-height', 2145 'float', 'vertical-align' (only if 'float' is 'none'), margin 2146 properties, padding properties, border properties, color property, 2147 background properties. UAs may apply other properties as well. To 2148 allow UAs to render a typographically correct drop cap or initial cap, 2149 the UA may choose a line-height, width and height based on the shape 2150 of the letter, unlike for normal elements.</p> 2151 2152 <div class="example"> 2153 <p>Example:</p> 2154 <p>This example shows a possible rendering of an initial cap. Note 2155 that the 'line-height' that is inherited by the <code>::first-letter</code> 2156 pseudo-element is 1.1, but the UA in this example has computed the 2157 height of the first letter differently, so that it doesn't cause any 2158 unnecessary space between the first two lines. Also note that the 2159 fictional start tag of the first letter is inside the <span>span</span>, and thus 2160 the font weight of the first letter is normal, not bold as the <span>span</span>: 2161 <pre> 2162 p { line-height: 1.1 } 2163 p::first-letter { font-size: 3em; font-weight: normal } 2164 span { font-weight: bold } 2165 ... 2166 <p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br> 2167 Erbarremt over my en mijn benaeuwde vesten<br> 2168 En arme burgery, en op mijn volcx gebed<br> 2169 En dagelix geschrey de bange stad ontzet. 2170 </pre> 2171 <div class="figure"> 2172 <p><img src="initial-cap.png" alt="Image illustrating the ::first-letter pseudo-element"> 2173 </div> 2174 </div> 2175 2176 <div class="example"> 2177 <p>The following CSS will make a drop cap initial letter span about two lines:</p> 2178 2179 <pre> 2180 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2181 <HTML> 2182 <HEAD> 2183 <TITLE>Drop cap initial letter</TITLE> 2184 <STYLE type="text/css"> 2185 P { font-size: 12pt; line-height: 1.2 } 2186 P::first-letter { font-size: 200%; font-weight: bold; float: left } 2187 SPAN { text-transform: uppercase } 2188 </STYLE> 2189 </HEAD> 2190 <BODY> 2191 <P><SPAN>The first</SPAN> few words of an article 2192 in The Economist.</P> 2193 </BODY> 2194 </HTML> 2195 </pre> 2196 2197 <p>This example might be formatted as follows:</p> 2198 2199 <div class="figure"> 2200 <P><img src="first-letter.gif" alt="Image illustrating the combined effect of the ::first-letter and ::first-line pseudo-elements"></p> 2201 </div> 2202 2203 <p>The <span class="index-inst" title="fictional tag 2204 sequence">fictional tag sequence</span> is:</p> 2205 2206 <pre> 2207 <P> 2208 <SPAN> 2209 <P::first-letter> 2210 T 2211 </P::first-letter>he first 2212 </SPAN> 2213 few words of an article in the Economist. 2214 </P> 2215 </pre> 2216 2217 <p>Note that the <code>::first-letter</code> pseudo-element tags abut 2218 the content (i.e., the initial character), while the ::first-line 2219 pseudo-element start tag is inserted right after the start tag of the 2220 block element.</p> </div> 2221 2222 <p>In order to achieve traditional drop caps formatting, user agents 2223 may approximate font sizes, for example to align baselines. Also, the 2224 glyph outline may be taken into account when formatting.</p> 2225 2226 <p>Punctuation (i.e, characters defined in Unicode in the "open" (Ps), 2227 "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po) 2228 punctuation classes), that precedes or follows the first letter should 2229 be included. <a href="#refsUNICODE">[UNICODE]</a></p> 2230 2231 <div class="figure"> 2232 <P><img src="first-letter2.gif" alt="Quotes that precede the 2233 first letter should be included."></p> 2234 </div> 2235 2236 <p>The <code>::first-letter</code> also applies if the first letter is 2237 in fact a digit, e.g., the "6" in "67 million dollars is a lot of 2238 money."</p> 2239 2240 <p>In CSS, the <code>::first-letter</code> pseudo-element applies to 2241 block, list-item, table-cell, table-caption, and inline-block 2242 elements. <span class="note">A future version of this specification 2243 may allow this pesudo-element to apply to more element 2244 types.</span></p> 2245 2246 <p>The <code>::first-letter</code> pseudo-element can be used with all 2247 such elements that contain text, or that have a descendant in the same 2248 flow that contains text. A UA should act as if the fictional start tag 2249 of the ::first-letter pseudo-element is just before the first text of 2250 the element, even if that first text is in a descendant.</p> 2251 2252 <div class="example"> 2253 <p>Example:</p> 2254 <p>The fictional tag sequence for this HTMLfragment: 2255 <pre><div> 2256 <p>The first text.</pre> 2257 <p>is: 2258 <pre><div> 2259 <p><div::first-letter><p::first-letter>T</...></...>he first text.</pre> 2260 </div> 2261 2262 <p>The first letter of a table-cell or inline-block cannot be the 2263 first letter of an ancestor element. Thus, in <code><DIV><P 2264 STYLE="display: inline-block">Hello<BR>Goodbye</P> 2265 etcetera</DIV></code> the first letter of the <code>div</code> is not the 2266 letter "H". In fact, the <code>div</code> doesn't have a first letter. 2267 2268 <p>The first letter must occur on the <a 2269 href="#first-formatted-line">first formatted line.</a> For example, in 2270 this fragment: <code><p><br>First...</code> the first line 2271 doesn't contain any letters and <code>::first-letter</code> doesn't 2272 match anything (assuming the default style for <code>br</code> in HTML 2273 4). In particular, it does not match the "F" of "First." 2274 2275 <p>In CSS, if an element is a list item ('display: list-item'), the 2276 <code>::first-letter</code> applies to the first letter in the 2277 principal box after the marker. UAs may ignore 2278 <code>::first-letter</code> on list items with 'list-style-position: 2279 inside'. If an element has <code>::before</code> or 2280 <code>::after</code> content, the <code>::first-letter</code> applies 2281 to the first letter of the element <em>including</em> that content. 2282 2283 <div class="example"> 2284 <p>Example:</p> 2285 <p>After the rule 'p::before {content: "Note: "}', the selector 2286 'p::first-letter' matches the "N" of "Note".</p> 2287 </div> 2288 2289 <p>Some languages may have specific rules about how to treat certain 2290 letter combinations. In Dutch, for example, if the letter combination 2291 "ij" appears at the beginning of a word, both letters should be 2292 considered within the <code>::first-letter</code> pseudo-element. 2293 2294 <p>If the letters that would form the ::first-letter are not in the 2295 same element, such as "'T" in <code><p>'<em>T...</code>, the UA 2296 may create a ::first-letter pseudo-element from one of the elements, 2297 both elements, or simply not create a pseudo-element.</p> 2298 2299 <p>Similarly, if the first letter(s) of the block are not at the start 2300 of the line (for example due to bidirectional reordering), then the UA 2301 need not create the pseudo-element(s). 2302 2303 <div class="example"> 2304 <p>Example:</p> 2305 <p><a name="overlapping-example">The following example</a> illustrates 2306 how overlapping pseudo-elements may interact. The first letter of 2307 each P element will be green with a font size of '24pt'. The rest of 2308 the first formatted line will be 'blue' while the rest of the 2309 paragraph will be 'red'.</p> 2310 2311 <pre>p { color: red; font-size: 12pt } 2312 p::first-letter { color: green; font-size: 200% } 2313 p::first-line { color: blue } 2314 2315 <P>Some text that ends up on two lines</P></pre> 2316 2317 <p>Assuming that a line break will occur before the word "ends", the 2318 <span class="index-inst" title="fictional tag sequence">fictional tag 2319 sequence</span> for this fragment might be:</p> 2320 2321 <pre><P> 2322 <P::first-line> 2323 <P::first-letter> 2324 S 2325 </P::first-letter>ome text that 2326 </P::first-line> 2327 ends up on two lines 2328 </P></pre> 2329 2330 <p>Note that the <code>::first-letter</code> element is inside the <code>::first-line</code> 2331 element. Properties set on <code>::first-line</code> are inherited by 2332 <code>::first-letter</code>, but are overridden if the same property is set on 2333 <code>::first-letter</code>.</p> 2334 </div> 2335 2336 2337 <h4><a name=UIfragments>7.3.</a> <a name=selection>The ::selection pseudo-element</a></h4> 2338 2339 <p>The <code>::selection</code> pseudo-element applies to the portion 2340 of a document that has been highlighted by the user. This also 2341 applies, for example, to selected text within an editable text 2342 field. This pseudo-element should not be confused with the <code><a 2343 href="#checked">:checked</a></code> pseudo-class (which used to be 2344 named <code>:selected</code>) 2345 2346 <p>Although the <code>::selection</code> pseudo-element is dynamic in 2347 nature, and is altered by user action, it is reasonable to expect that 2348 when a UA re-renders to a static medium (such as a printed page, see 2349 <a href="#refsCSS21">[CSS21]</a>) which was originally rendered to a 2350 dynamic medium (like screen), the UA may wish to transfer the current 2351 <code>::selection</code> state to that other medium, and have all the 2352 appropriate formatting and rendering take effect as well. This is not 2353 required — UAs may omit the <code>::selection</code> 2354 pseudo-element for static media. 2355 2356 <p>These are the CSS properties that apply to <code>::selection</code> 2357 pseudo-elements: color, background, cursor (optional), outline 2358 (optional). The computed value of the 'background-image' property on 2359 <code>::selection</code> may be ignored. 2360 2361 2362 <h4><a name=gen-content>7.4. The ::before and ::after pseudo-elements</a></h4> 2363 2364 <p>The <code>::before</code> and <code>::after</code> pseudo-elements 2365 can be used to describe generated content before or after an element's 2366 content. They are explained in CSS 2.1 <a 2367 href="#refsCSS21">[CSS21]</a>.</p> 2368 2369 <p>When the <code>::first-letter</code> and <code>::first-line</code> 2370 pseudo-elements are combined with <code>::before</code> and 2371 <code>::after</code>, they apply to the first letter or line of the 2372 element including the inserted text.</p> 2373 2374 <h2><a name=combinators>8. Combinators</a></h2> 2375 2376 <h3><a name=descendant-combinators>8.1. Descendant combinator</a></h3> 2377 2378 <p>At times, authors may want selectors to describe an element that is 2379 the descendant of another element in the document tree (e.g., "an 2380 <code>EM</code> element that is contained within an <code>H1</code> 2381 element"). Descendant combinators express such a relationship. A 2382 descendant combinator is <a href="#whitespace">white space</a> that 2383 separates two sequences of simple selectors. A selector of the form 2384 "<code>A B</code>" represents an element <code>B</code> that is an 2385 arbitrary descendant of some ancestor element <code>A</code>. 2386 2387 <div class="example"> 2388 <p>Examples:</p> 2389 <p>For example, consider the following selector:</p> 2390 <pre>h1 em</pre> 2391 <p>It represents an <code>em</code> element being the descendant of 2392 an <code>h1</code> element. It is a correct and valid, but partial, 2393 description of the following fragment:</p> 2394 <pre><h1>This <span class="myclass">headline 2395 is <em>very</em> important</span></h1></pre> 2396 <p>The following selector:</p> 2397 <pre>div * p</pre> 2398 <p>represents a <code>p</code> element that is a grandchild or later 2399 descendant of a <code>div</code> element. Note the whitespace on 2400 either side of the "*" is not part of the universal selector; the 2401 whitespace is a combinator indicating that the DIV must be the 2402 ancestor of some element, and that that element must be an ancestor 2403 of the P.</p> 2404 <p>The following selector, which combines descendant combinators and 2405 <a href="#attribute-selectors">attribute selectors</a>, represents an 2406 element that (1) has the <code>href</code> attribute set and (2) is 2407 inside a <code>p</code> that is itself inside a <code>div</code>:</p> 2408 <pre>div p *[href]</pre> 2409 </div> 2410 2411 <h3><a name=child-combinators>8.2. Child combinators</a></h3> 2412 2413 <p>A <dfn>child combinator</dfn> describes a childhood relationship 2414 between two elements. A child combinator is made of the 2415 "greater-than sign" (<code>></code>) character and 2416 separates two sequences of simple selectors. 2417 2418 2419 <div class="example"> 2420 <p>Examples:</p> 2421 <p>The following selector represents a <code>p</code> element that is 2422 child of <code>body</code>:</p> 2423 <pre>body > p</pre> 2424 <p>The following example combines descendant combinators and child 2425 combinators.</p> 2426 <pre>div ol>li p</pre><!-- LEAVE THOSE SPACES OUT! see below --> 2427 <p>It represents a <code>p</code> element that is a descendant of an 2428 <code>li</code> element; the <code>li</code> element must be the 2429 child of an <code>ol</code> element; the <code>ol</code> element must 2430 be a descendant of a <code>div</code>. Notice that the optional white 2431 space around the ">" combinator has been left out.</p> 2432 </div> 2433 2434 <p>For information on selecting the first child of an element, please 2435 see the section on the <code><a 2436 href="#structural-pseudos">:first-child</a></code> pseudo-class 2437 above.</p> 2438 2439 <h3><a name=sibling-combinators>8.3. Sibling combinators</a></h3> 2440 2441 <p>There are two different sibling combinators: the adjacent sibling 2442 combinator and the general sibling combinator. In both cases, 2443 non-element nodes (e.g. text between elements) are ignored when 2444 considering adjacency of elements.</p> 2445 2446 <h4><a name=adjacent-sibling-combinators>8.3.1. Adjacent sibling combinator</a></h4> 2447 2448 <p>The adjacent sibling combinator is made of the "plus 2449 sign" (U+002B, <code>+</code>) character that separates two 2450 sequences of simple selectors. The elements represented by the two 2451 sequences share the same parent in the document tree and the element 2452 represented by the first sequence immediately precedes the element 2453 represented by the second one.</p> 2454 2455 <div class="example"> 2456 <p>Examples:</p> 2457 <p>The following selector represents a <code>p</code> element 2458 immediately following a <code>math</code> element:</p> 2459 <pre>math + p</pre> 2460 <p>The following selector is conceptually similar to the one in the 2461 previous example, except that it adds an attribute selector — it 2462 adds a constraint to the <code>h1</code> element, that it must have 2463 <code>class="opener"</code>:</p> 2464 <pre>h1.opener + h2</pre> 2465 </div> 2466 2467 2468 <h4><a name=general-sibling-combinators>8.3.2. General sibling combinator</a></h4> 2469 2470 <p>The general sibling combinator is made of the "tilde" 2471 (U+007E, <code>~</code>) character that separates two sequences of 2472 simple selectors. The elements represented by the two sequences share 2473 the same parent in the document tree and the element represented by 2474 the first sequence precedes (not necessarily immediately) the element 2475 represented by the second one.</p> 2476 2477 <div class="example"> 2478 <p>Example:</p> 2479 <pre>h1 ~ pre</pre> 2480 <p>represents a <code>pre</code> element following an <code>h1</code>. It 2481 is a correct and valid, but partial, description of:</p> 2482 <pre><h1>Definition of the function a</h1> 2483 <p>Function a(x) has to be applied to all figures in the table.</p> 2484 <pre>function a(x) = 12x/13.5</pre></pre> 2485 </div> 2486 2487 <h2><a name=specificity>9. Calculating a selector's specificity</a></h2> 2488 2489 <p>A selector's specificity is calculated as follows:</p> 2490 2491 <ul> 2492 <li>count the number of ID selectors in the selector (= a)</li> 2493 <li>count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)</li> 2494 <li>count the number of element names in the selector (= c)</li> 2495 <li>ignore pseudo-elements</li> 2496 </ul> 2497 2498 <p>Selectors inside <a href="#negation">the negation pseudo-class</a> 2499 are counted like any other, but the negation itself does not count as 2500 a pseudo-class.</p> 2501 2502 <p>Concatenating the three numbers a-b-c (in a number system with a 2503 large base) gives the specificity.</p> 2504 2505 <div class="example"> 2506 <p>Examples:</p> 2507 <pre>* /* a=0 b=0 c=0 -> specificity = 0 */ 2508 LI /* a=0 b=0 c=1 -> specificity = 1 */ 2509 UL LI /* a=0 b=0 c=2 -> specificity = 2 */ 2510 UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */ 2511 H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */ 2512 UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */ 2513 LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */ 2514 #x34y /* a=1 b=0 c=0 -> specificity = 100 */ 2515 #s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */ 2516 </pre> 2517 </div> 2518 2519 <p class="note"><strong>Note:</strong> the specificity of the styles 2520 specified in an HTML <code>style</code> attribute is described in CSS 2521 2.1. <a href="#refsCSS21">[CSS21]</a>.</p> 2522 2523 <h2><a name=w3cselgrammar>10. The grammar of Selectors</a></h2> 2524 2525 <h3><a name=grammar>10.1. Grammar</a></h3> 2526 2527 <p>The grammar below defines the syntax of Selectors. It is globally 2528 LL(1) and can be locally LL(2) (but note that most UA's should not use 2529 it directly, since it doesn't express the parsing conventions). The 2530 format of the productions is optimized for human consumption and some 2531 shorthand notations beyond Yacc (see <a href="#refsYACC">[YACC]</a>) 2532 are used:</p> 2533 2534 <ul> 2535 <li><b>*</b>: 0 or more 2536 <li><b>+</b>: 1 or more 2537 <li><b>?</b>: 0 or 1 2538 <li><b>|</b>: separates alternatives 2539 <li><b>[ ]</b>: grouping </li> 2540 </ul> 2541 2542 <p>The productions are:</p> 2543 2544 <pre>selectors_group 2545 : selector [ COMMA S* selector ]* 2546 ; 2547 2548 selector 2549 : simple_selector_sequence [ combinator simple_selector_sequence ]* 2550 ; 2551 2552 combinator 2553 /* combinators can be surrounded by white space */ 2554 : PLUS S* | GREATER S* | TILDE S* | S+ 2555 ; 2556 2557 simple_selector_sequence 2558 : [ type_selector | universal ] 2559 [ HASH | class | attrib | pseudo | negation ]* 2560 | [ HASH | class | attrib | pseudo | negation ]+ 2561 ; 2562 2563 type_selector 2564 : [ namespace_prefix ]? element_name 2565 ; 2566 2567 namespace_prefix 2568 : [ IDENT | '*' ]? '|' 2569 ; 2570 2571 element_name 2572 : IDENT 2573 ; 2574 2575 universal 2576 : [ namespace_prefix ]? '*' 2577 ; 2578 2579 class 2580 : '.' IDENT 2581 ; 2582 2583 attrib 2584 : '[' S* [ namespace_prefix ]? IDENT S* 2585 [ [ PREFIXMATCH | 2586 SUFFIXMATCH | 2587 SUBSTRINGMATCH | 2588 '=' | 2589 INCLUDES | 2590 DASHMATCH ] S* [ IDENT | STRING ] S* 2591 ]? ']' 2592 ; 2593 2594 pseudo 2595 /* '::' starts a pseudo-element, ':' a pseudo-class */ 2596 /* Exceptions: :first-line, :first-letter, :before and :after. */ 2597 /* Note that pseudo-elements are restricted to one per selector and */ 2598 /* occur only in the last simple_selector_sequence. */ 2599 : ':' ':'? [ IDENT | functional_pseudo ] 2600 ; 2601 2602 functional_pseudo 2603 : FUNCTION S* expression ')' 2604 ; 2605 2606 expression 2607 /* In CSS3, the expressions are identifiers, strings, */ 2608 /* or of the form "an+b" */ 2609 : [ [ PLUS | '-' | DIMENSION | NUMBER | STRING | IDENT ] S* ]+ 2610 ; 2611 2612 negation 2613 : NOT S* negation_arg S* ')' 2614 ; 2615 2616 negation_arg 2617 : type_selector | universal | HASH | class | attrib | pseudo 2618 ;</pre> 2619 2620 2621 <h3><a name=lex>10.2. Lexical scanner</a></h3> 2622 2623 <p>The following is the <a name=x3>tokenizer</a>, written in Flex (see 2624 <a href="#refsFLEX">[FLEX]</a>) notation. The tokenizer is 2625 case-insensitive.</p> 2626 2627 <p>The two occurrences of "\377" represent the highest character 2628 number that current versions of Flex can deal with (decimal 255). They 2629 should be read as "\4177777" (decimal 1114111), which is the highest 2630 possible code point in Unicode/ISO-10646. <a 2631 href="#refsUNICODE">[UNICODE]</a></p> 2632 2633 <pre>%option case-insensitive 2634 2635 ident [-]?{nmstart}{nmchar}* 2636 name {nmchar}+ 2637 nmstart [_a-z]|{nonascii}|{escape} 2638 nonascii [^\0-\177] 2639 unicode \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])? 2640 escape {unicode}|\\[^\n\r\f0-9a-f] 2641 nmchar [_a-z0-9-]|{nonascii}|{escape} 2642 num [0-9]+|[0-9]*\.[0-9]+ 2643 string {string1}|{string2} 2644 string1 \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*\" 2645 string2 \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*\' 2646 invalid {invalid1}|{invalid2} 2647 invalid1 \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})* 2648 invalid2 \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})* 2649 nl \n|\r\n|\r|\f 2650 w [ \t\r\n\f]* 2651 2652 %% 2653 2654 [ \t\r\n\f]+ return S; 2655 2656 "~=" return INCLUDES; 2657 "|=" return DASHMATCH; 2658 "^=" return PREFIXMATCH; 2659 "$=" return SUFFIXMATCH; 2660 "*=" return SUBSTRINGMATCH; 2661 {ident} return IDENT; 2662 {string} return STRING; 2663 {ident}"(" return FUNCTION; 2664 {num} return NUMBER; 2665 "#"{name} return HASH; 2666 {w}"+" return PLUS; 2667 {w}">" return GREATER; 2668 {w}"," return COMMA; 2669 {w}"~" return TILDE; 2670 ":not(" return NOT; 2671 @{ident} return ATKEYWORD; 2672 {invalid} return INVALID; 2673 {num}% return PERCENTAGE; 2674 {num}{ident} return DIMENSION; 2675 "<!--" return CDO; 2676 "-->" return CDC; 2677 2678 "url("{w}{string}{w}")" return URI; 2679 "url("{w}([!#$%&*-~]|{nonascii}|{escape})*{w}")" return URI; 2680 U\+[0-9a-f?]{1,6}(-[0-9a-f]{1,6})? return UNICODE_RANGE; 2681 2682 \/\*[^*]*\*+([^/*][^*]*\*+)*\/ /* ignore comments */ 2683 2684 . return *yytext;</pre> 2685 2686 2687 2688 <h2><a name=downlevel>11. Namespaces and down-level clients</a></h2> 2689 2690 <p>An important issue is the interaction of CSS selectors with XML 2691 documents in web clients that were produced prior to this 2692 document. Unfortunately, due to the fact that namespaces must be 2693 matched based on the URI which identifies the namespace, not the 2694 namespace prefix, some mechanism is required to identify namespaces in 2695 CSS by their URI as well. Without such a mechanism, it is impossible 2696 to construct a CSS style sheet which will properly match selectors in 2697 all cases against a random set of XML documents. However, given 2698 complete knowledge of the XML document to which a style sheet is to be 2699 applied, and a limited use of namespaces within the XML document, it 2700 is possible to construct a style sheet in which selectors would match 2701 elements and attributes correctly.</p> 2702 2703 <p>It should be noted that a down-level CSS client will (if it 2704 properly conforms to CSS forward compatible parsing rules) ignore all 2705 <code>@namespace</code> at-rules, as well as all style rules that make 2706 use of namespace qualified element type or attribute selectors. The 2707 syntax of delimiting namespace prefixes in CSS was deliberately chosen 2708 so that down-level CSS clients would ignore the style rules rather 2709 than possibly match them incorrectly.</p> 2710 2711 <p>The use of default namespaces in CSS makes it possible to write 2712 element type selectors that will function in both namespace aware CSS 2713 clients as well as down-level clients. It should be noted that 2714 down-level clients may incorrectly match selectors against XML 2715 elements in other namespaces.</p> 2716 2717 <p>The following are scenarios and examples in which it is possible to 2718 construct style sheets which would function properly in web clients 2719 that do not implement this proposal.</p> 2720 2721 <ol> 2722 <li> 2723 2724 <p>The XML document does not use namespaces.</p> 2725 2726 <ul> 2727 2728 <li>In this case, it is obviously not necessary to declare or use 2729 namespaces in the style sheet. Standard CSS element type and 2730 attribute selectors will function adequately in a down-level 2731 client.</li> 2732 2733 <li>In a CSS namespace aware client, the default behavior of 2734 element selectors matching without regard to namespace will 2735 function properly against all elements, since no namespaces are 2736 present. However, the use of specific element type selectors that 2737 match only elements that have no namespace ("<code>|name</code>") 2738 will guarantee that selectors will match only XML elements that do 2739 not have a declared namespace. </li> 2740 2741 </ul> 2742 2743 </li> 2744 2745 <li> 2746 2747 <p>The XML document defines a single, default namespace used 2748 throughout the document. No namespace prefixes are used in element 2749 names.</p> 2750 2751 <ul> 2752 2753 <li>In this case, a down-level client will function as if 2754 namespaces were not used in the XML document at all. Standard CSS 2755 element type and attribute selectors will match against all 2756 elements. </li> 2757 2758 </ul> 2759 2760 </li> 2761 2762 <li> 2763 2764 <p>The XML document does <b>not</b> use a default namespace, all 2765 namespace prefixes used are known to the style sheet author, and 2766 there is a direct mapping between namespace prefixes and namespace 2767 URIs. (A given prefix may only be mapped to one namespace URI 2768 throughout the XML document; there may be multiple prefixes mapped 2769 to the same URI).</p> 2770 2771 <ul> 2772 2773 <li>In this case, the down-level client will view and match 2774 element type and attribute selectors based on their fully 2775 qualified name, not the local part as outlined in the <a 2776 href="#typenmsp">Type selectors and Namespaces</a> section. CSS 2777 selectors may be declared using an escaped colon "<code>\:</code>" 2778 to describe the fully qualified names, e.g. 2779 "<code>html\:h1</code>" will match 2780 <code><html:h1></code>. Selectors using the qualified name 2781 will only match XML elements that use the same prefix. Other 2782 namespace prefixes used in the XML that are mapped to the same URI 2783 will not match as expected unless additional CSS style rules are 2784 declared for them.</li> 2785 2786 <li>Note that selectors declared in this fashion will 2787 <em>only</em> match in down-level clients. A CSS namespace aware 2788 client will match element type and attribute selectors based on 2789 the name's local part. Selectors declared with the fully 2790 qualified name will not match (unless there is no namespace prefix 2791 in the fully qualified name).</li> 2792 2793 </ul> 2794 2795 </li> 2796 2797 </ol> 2798 2799 <p>In other scenarios: when the namespace prefixes used in the XML are 2800 not known in advance by the style sheet author; or a combination of 2801 elements with no namespace are used in conjunction with elements using 2802 a default namespace; or the same namespace prefix is mapped to 2803 <em>different</em> namespace URIs within the same document, or in 2804 different documents; it is impossible to construct a CSS style sheet 2805 that will function properly against all elements in those documents, 2806 unless, the style sheet is written using a namespace URI syntax (as 2807 outlined in this document or similar) and the document is processed by 2808 a CSS and XML namespace aware client.</p> 2809 2810 <h2><a name=profiling>12. Profiles</a></h2> 2811 2812 <p>Each specification using Selectors must define the subset of W3C 2813 Selectors it allows and excludes, and describe the local meaning of 2814 all the components of that subset.</p> 2815 2816 <p>Non normative examples: 2817 2818 <div class="profile"> 2819 <table class="tprofile"> 2820 <tbody> 2821 <tr> 2822 <th class="title" colspan=2>Selectors profile</th></tr> 2823 <tr> 2824 <th>Specification</th> 2825 <td>CSS level 1</td></tr> 2826 <tr> 2827 <th>Accepts</th> 2828 <td>type selectors<br>class selectors<br>ID selectors<br>:link, 2829 :visited and :active pseudo-classes<br>descendant combinator 2830 <br>::first-line and ::first-letter pseudo-elements</td></tr> 2831 <tr> 2832 <th>Excludes</th> 2833 <td> 2834 2835 <p>universal selector<br>attribute selectors<br>:hover and :focus 2836 pseudo-classes<br>:target pseudo-class<br>:lang() pseudo-class<br>all UI 2837 element states pseudo-classes<br>all structural 2838 pseudo-classes<br>negation pseudo-class<br>all 2839 UI element fragments pseudo-elements<br>::before and ::after 2840 pseudo-elements<br>child combinators<br>sibling combinators 2841 2842 <p>namespaces</td></tr> 2843 <tr> 2844 <th>Extra constraints</th> 2845 <td>only one class selector allowed per sequence of simple 2846 selectors</td></tr></tbody></table><br><br> 2847 <table class="tprofile"> 2848 <tbody> 2849 <tr> 2850 <th class="title" colspan=2>Selectors profile</th></tr> 2851 <tr> 2852 <th>Specification</th> 2853 <td>CSS level 2</td></tr> 2854 <tr> 2855 <th>Accepts</th> 2856 <td>type selectors<br>universal selector<br>attribute presence and 2857 values selectors<br>class selectors<br>ID selectors<br>:link, :visited, 2858 :active, :hover, :focus, :lang() and :first-child pseudo-classes 2859 <br>descendant combinator<br>child combinator<br>adjacent sibling 2860 combinator<br>::first-line and ::first-letter pseudo-elements<br>::before 2861 and ::after pseudo-elements</td></tr> 2862 <tr> 2863 <th>Excludes</th> 2864 <td> 2865 2866 <p>content selectors<br>substring matching attribute 2867 selectors<br>:target pseudo-classes<br>all UI element 2868 states pseudo-classes<br>all structural pseudo-classes other 2869 than :first-child<br>negation pseudo-class<br>all UI element 2870 fragments pseudo-elements<br>general sibling combinators 2871 2872 <p>namespaces</td></tr> 2873 <tr> 2874 <th>Extra constraints</th> 2875 <td>more than one class selector per sequence of simple selectors (CSS1 2876 constraint) allowed</td></tr></tbody></table> 2877 2878 <p>In CSS, selectors express pattern matching rules that determine which style 2879 rules apply to elements in the document tree. 2880 2881 <p>The following selector (CSS level 2) will <b>match</b> all anchors <code>a</code> 2882 with attribute <code>name</code> set inside a section 1 header <code>h1</code>: 2883 <pre>h1 a[name]</pre> 2884 2885 <p>All CSS declarations attached to such a selector are applied to elements 2886 matching it. </div> 2887 2888 <div class="profile"> 2889 <table class="tprofile"> 2890 <tbody> 2891 <tr> 2892 <th class="title" colspan=2>Selectors profile</th></tr> 2893 <tr> 2894 <th>Specification</th> 2895 <td>STTS 3</td> 2896 </tr> 2897 <tr> 2898 <th>Accepts</th> 2899 <td> 2900 2901 <p>type selectors<br>universal selectors<br>attribute selectors<br>class 2902 selectors<br>ID selectors<br>all structural pseudo-classes<br> 2903 all combinators 2904 2905 <p>namespaces</td></tr> 2906 <tr> 2907 <th>Excludes</th> 2908 <td>non-accepted pseudo-classes<br>pseudo-elements<br></td></tr> 2909 <tr> 2910 <th>Extra constraints</th> 2911 <td>some selectors and combinators are not allowed in fragment 2912 descriptions on the right side of STTS declarations.</td></tr></tbody></table> 2913 <form> 2914 <input type="text" name="test10"/> 2915 <input type="text" name="foo"/> 2916 <input type="text" name="foo"/> 2917 <input type="text" name="foo"/> 2918 <input type="text" name="foo"/> 2919 <input type="text" name="foo"/> 2920 <input type="text" name="foo"/> 2921 <input type="text" name="foo"/> 2922 <input type="text" name="foo"/> 2923 <input type="text" name="foo"/> 2924 <input type="text" name="foo"/> 2925 <input type="text" name="foo"/> 2926 <input type="text" name="foo"/> 2927 <input type="text" name="foo"/> 2928 <input type="text" name="foo"/> 2929 <input type="text" name="foo"/> 2930 <input type="text" name="foo"/> 2931 <input type="text" name="foo"/> 2932 <input type="text" name="foo"/> 2933 <input type="text" name="foo"/> 2934 <input type="text" name="foo"/> 2935 <input type="text" name="foo"/> 2936 <input type="text" name="foo"/> 2937 <input type="text" name="foo"/> 2938 <input type="text" name="foo"/> 2939 </form> 2940 2941 <p>Selectors can be used in STTS 3 in two different 2942 manners: 2943 <ol> 2944 <li>a selection mechanism equivalent to CSS selection mechanism: declarations 2945 attached to a given selector are applied to elements matching that selector, 2946 <li>fragment descriptions that appear on the right side of declarations. 2947 </li></ol></div> 2948 2949 <h2><a name=Conformance></a>13. Conformance and requirements</h2> 2950 2951 <p>This section defines conformance with the present specification only. 2952 2953 <p>The inability of a user agent to implement part of this specification due to 2954 the limitations of a particular device (e.g., non interactive user agents will 2955 probably not implement dynamic pseudo-classes because they make no sense without 2956 interactivity) does not imply non-conformance. 2957 2958 <p>All specifications reusing Selectors must contain a <a 2959 href="#profiling">Profile</a> listing the 2960 subset of Selectors it accepts or excludes, and describing the constraints 2961 it adds to the current specification. 2962 2963 <p>Invalidity is caused by a parsing error, e.g. an unrecognized token or a token 2964 which is not allowed at the current parsing point. 2965 2966 <p>User agents must observe the rules for handling parsing errors: 2967 <ul> 2968 <li>a simple selector containing an undeclared namespace prefix is invalid</li> 2969 <li>a selector containing an invalid simple selector, an invalid combinator 2970 or an invalid token is invalid. </li> 2971 <li>a group of selectors containing an invalid selector is invalid.</li> 2972 </ul> 2973 2974 <p class="foo test10 bar">Specifications reusing Selectors must define how to handle parsing 2975 errors. (In the case of CSS, the entire rule in which the selector is 2976 used is dropped.)</p> 2977 2978 <!-- Apparently all these references are out of date: 2979 <p>Implementations of this specification must behave as 2980 "recipients of text data" as defined by <a href="#refsCWWW">[CWWW]</a> 2981 when parsing selectors and attempting matches. (In particular, 2982 implementations must assume the data is normalized and must not 2983 normalize it.) Normative rules for matching strings are defined in 2984 <a href="#refsCWWW">[CWWW]</a> and <a 2985 href="#refsUNICODE">[UNICODE]</a> and apply to implementations of this 2986 specification.</p>--> 2987 2988 <h2><a name=Tests></a>14. Tests</h2> 2989 2990 <p>This specification has <a 2991 href="http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/">a test 2992 suite</a> allowing user agents to verify their basic conformance to 2993 the specification. This test suite does not pretend to be exhaustive 2994 and does not cover all possible combined cases of Selectors.</p> 2995 2996 <h2><a name=ACKS></a>15. Acknowledgements</h2> 2997 2998 <p>The CSS working group would like to thank everyone who has sent 2999 comments on this specification over the years.</p> 3000 3001 <p>The working group would like to extend special thanks to Donna 3002 McManus, Justin Baker, Joel Sklar, and Molly Ives Brower who perfermed 3003 the final editorial review.</p> 3004 3005 <h2><a name=references>16. References</a></h2> 3006 3007 <dl class="refs"> 3008 3009 <dt>[CSS1] 3010 <dd><a name=refsCSS1></a> Bert Bos, Håkon Wium Lie; "<cite>Cascading Style Sheets, level 1</cite>", W3C Recommendation, 17 Dec 1996, revised 11 Jan 1999 3011 <dd>(<code><a href="http://www.w3.org/TR/REC-CSS1">http://www.w3.org/TR/REC-CSS1</a></code>) 3012 3013 <dt>[CSS21] 3014 <dd><a name=refsCSS21></a> Bert Bos, Tantek Çelik, Ian Hickson, Håkon Wium Lie, editors; "<cite>Cascading Style Sheets, level 2 revision 1</cite>", W3C Working Draft, 13 June 2005 3015 <dd>(<code><a href="http://www.w3.org/TR/CSS21">http://www.w3.org/TR/CSS21</a></code>) 3016 3017 <dt>[CWWW] 3018 <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 Wide Web</cite>", W3C Recommendation, 15 February 2005 3019 <dd>(<code><a href="http://www.w3.org/TR/charmod/">http://www.w3.org/TR/charmod/</a></code>) 3020 3021 <dt>[FLEX] 3022 <dd><a name="refsFLEX"></a> "<cite>Flex: The Lexical Scanner Generator</cite>", Version 2.3.7, ISBN 1882114213 3023 3024 <dt>[HTML4] 3025 <dd><a name="refsHTML4"></a> Dave Ragget, Arnaud Le Hors, Ian Jacobs, editors; "<cite>HTML 4.01 Specification</cite>", W3C Recommendation, 24 December 1999 3026 <dd>(<a href="http://www.w3.org/TR/html4/"><code>http://www.w3.org/TR/html4/</code></a>) 3027 3028 <dt>[MATH] 3029 <dd><a name="refsMATH"></a> Patrick Ion, Robert Miner, editors; "<cite>Mathematical Markup Language (MathML) 1.01</cite>", W3C Recommendation, revision of 7 July 1999 3030 <dd>(<code><a href="http://www.w3.org/TR/REC-MathML/">http://www.w3.org/TR/REC-MathML/</a></code>) 3031 3032 <dt>[RFC3066] 3033 <dd><a name="refsRFC3066"></a> H. Alvestrand; "<cite>Tags for the Identification of Languages</cite>", Request for Comments 3066, January 2001 3034 <dd>(<a href="http://www.ietf.org/rfc/rfc3066.txt"><code>http://www.ietf.org/rfc/rfc3066.txt</code></a>) 3035 3036 <dt>[STTS] 3037 <dd><a name=refsSTTS></a> Daniel Glazman; "<cite>Simple Tree Transformation Sheets 3</cite>", Electricité de France, submission to the W3C, 11 November 1998 3038 <dd>(<code><a href="http://www.w3.org/TR/NOTE-STTS3">http://www.w3.org/TR/NOTE-STTS3</a></code>) 3039 3040 <dt>[SVG] 3041 <dd><a name="refsSVG"></a> Jon Ferraiolo, 藤沢 淳, Dean Jackson, editors; "<cite>Scalable Vector Graphics (SVG) 1.1 Specification</cite>", W3C Recommendation, 14 January 2003 3042 <dd>(<code><a href="http://www.w3.org/TR/SVG/">http://www.w3.org/TR/SVG/</a></code>) 3043 3044 <dt>[UNICODE]</dt> 3045 <dd><a name="refsUNICODE"></a> <cite><a 3046 href="http://www.unicode.org/versions/Unicode4.1.0/">The Unicode Standard, Version 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/Unicode4.1.0/">Unicode 4.1.0</a>. 3047 <dd>(<code><a href="http://www.unicode.org/versions/">http://www.unicode.org/versions/</a></code>)</dd> 3048 3049 <dt>[XML10] 3050 <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 3051 <dd>(<a href="http://www.w3.org/TR/REC-xml/"><code>http://www.w3.org/TR/REC-xml/</code></a>) 3052 3053 <dt>[XMLNAMES] 3054 <dd><a name="refsXMLNAMES"></a> Tim Bray, Dave Hollander, Andrew Layman, editors; "<cite>Namespaces in XML</cite>", W3C Recommendation, 14 January 1999 3055 <dd>(<a href="http://www.w3.org/TR/REC-xml-names/"><code>http://www.w3.org/TR/REC-xml-names/</code></a>) 3056 3057 <dt>[YACC] 3058 <dd><a name="refsYACC"></a> S. C. Johnson; "<cite>YACC — Yet another compiler compiler</cite>", Technical Report, Murray Hill, 1975 3059 3060 </dl> 3061 </body> 3062 </html> 3063