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