samples/third_party/dromaeo/web/tests/dom-attr.html - Issue 1576153002: Remove the Dromaeo and TodoMVC samples.

Side by Side Diff: samples/third_party/dromaeo/web/tests/dom-attr.html

Issue 1576153002: Remove the Dromaeo and TodoMVC samples. (Closed) Base URL: git@github.com:dart-lang/sdk.git@master

Patch Set: Created 4 years, 11 months ago

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

Jump to:

View unified diff | Download patch

OLD	NEW
	(Empty)
1 <html>

2 <head>

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

4 <script>

5 window.onload = function(){

6 startTest("dom-attr");

7

8 // Try to force real results

9 var ret, tmp;

10

11 var elem = document.getElementById("test1");

12 var a = document.getElementsByTagName("a")[0];

13 var num = 10240;

14

15 test( "getAttribute", function(){

16 for ( var i = 0; i < num; i++ )

17 ret = elem.getAttribute("id");

18 });

19

20 test( "element.property", function(){

21 for ( var i = 0; i < num * 2; i++ )

22 ret = elem.id;

23 });

24

25 test( "setAttribute", function(){

26 for ( var i = 0; i < num; i++ )

27 a.setAttribute("id", "foo");

28 });

29

30 test( "element.property = value", function(){

31 for ( var i = 0; i < num; i++ )

32 a.id = "foo";

33 });

34

35 // Removing these two as Dart has no expandos.

36 /*

37 test( "element.expando = value", function(){

38 for ( var i = 0; i < num; i++ )

39 a["test" + num] = function(){};

40 });

41

42 test( "element.expando", function(){

43 for ( var i = 0; i < num; i++ )

44 ret = a["test" + num];

45 });

46 */

47

48 endTest();

49 };

50 </script>

51 </head>

52 <body>

53 <div class="head">

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

55

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

57

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

59

60 <dl>

61

62 <dt>This version:

63

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

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

66

67 <dt>Latest version:

68

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

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

71

72 <dt>Previous version:

73

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

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

76

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

78

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

80

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

82

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

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

85

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

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

88

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

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

91

92 </dl>

93

94 <p class="copyright"><a

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

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

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

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

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

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

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

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

103 <a

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

105 <a

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

107 <a

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

109 use</a> rules apply.

110

111 <hr title="Separator for header">

112

113 </div>

114

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

116

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

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

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

120

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

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

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

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

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

126 style properties to elements in the document. This document

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

128 extended selectors will be used by CSS level 3.

129

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

131

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

133

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

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

136

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

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

139 evaluating the expression across all the elements in a

140 subtree. <acronym title="Simple Tree Transformation

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

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

143

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

145

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

147 time of its publication. Other documents may supersede this

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

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

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

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

152

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

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

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

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

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

158

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

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

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

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

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

164

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

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

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

168 document is a revision of the <a

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

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

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

172 expected that this last call will proceed straight to Proposed

173 Recommendation stage since it is believed that interoperability will

174 be demonstrable.</p>

175

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

177 specification and return comments to the (<a

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

179 public mailing list <a

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

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

182 Members can also send comments directly to the CSS Working

183 Group.

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

185

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

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

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

189

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

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

192 The English version of this specification is the only normative

193 version.

194

195 <div class="subtoc">

196

197 <h2 id="test1"><a name=contents>Table of contents</a></h2>

198

199 <ul class="toc">

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

201 <ul>

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

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

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

205 </ul>

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

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

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

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

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

211 <ul class="toc">

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

213 <ul class="toc">

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

215 </ul>

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

217 <ul>

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

219 </ul>

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

221 <ul class="toc">

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

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

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

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

226 </ul>

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

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

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

230 <ul class="toc">

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

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

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

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

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

236 <ul>

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

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

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

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

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

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

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

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

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

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

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

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

249 </ul>

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

251 </ul>

252 </li>

253 </ul>

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

255 <ul>

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

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

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

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

260 </ul>

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

262 <ul class="toc">

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

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

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

266 <ul class="toc">

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

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

269 </ul>

270 </li>

271 </ul>

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

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

274 <ul class="toc">

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

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

277 </ul>

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

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

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

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

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

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

284 </ul>

285

286 </div>

287

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

289

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

291

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

293 particular limitations or rules specific to CSS. In this

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

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

296

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

298

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

300 examples, notes, and sections explicitly marked as

301 non-normative.</p>

302

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

304

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

306

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

308 Selectors are:

309

310 <ul>

311

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

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

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

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

316 the components of this sequence</li>

317

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

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

320

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

322

323 <li>new simple selectors including substring matching attribute

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

325

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

327 for pseudo-elements</li>

328

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

330

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

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

333 each specification</li>

334

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

336 specification; other specifications can now refer to this document

337 independently of CSS</li>

338

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

340

341 </ul>

342

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

344

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

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

347

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

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

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

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

352

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

354 representations.</p>

355

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

357

358 <table class="selectorsReview">

359 <thead>

360 <tr>

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

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

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

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

365 <tbody>

366 <tr>

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

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

369 <td class="described"><a

370 href="#universal-selector">Universal

371 selector</a></td>

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

373 <tr>

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

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

376 <td class="described"><a

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

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

379 <tr>

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

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

382 <td class="described"><a

383 href="#attribute-selectors">Attribute

384 selectors</a></td>

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

386 <tr>

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

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

389 equal to "bar"</td>

390 <td class="described"><a

391 href="#attribute-selectors">Attribute

392 selectors</a></td>

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

394 <tr>

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

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

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

398 <td class="described"><a

399 href="#attribute-selectors">Attribute

400 selectors</a></td>

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

402 <tr>

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

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

405 with the string "bar"</td>

406 <td class="described"><a

407 href="#attribute-selectors">Attribute

408 selectors</a></td>

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

410 <tr>

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

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

413 with the string "bar"</td>

414 <td class="described"><a

415 href="#attribute-selectors">Attribute

416 selectors</a></td>

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

418 <tr>

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

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

421 substring "bar"</td>

422 <td class="described"><a

423 href="#attribute-selectors">Attribute

424 selectors</a></td>

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

426 <tr>

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

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

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

430 <td class="described"><a

431 href="#attribute-selectors">Attribute

432 selectors</a></td>

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

434 <tr>

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

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

437 <td class="described"><a

438 href="#structural-pseudos">Structural

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

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

441 <tr>

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

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

444 <td class="described"><a

445 href="#structural-pseudos">Structural

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

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

448 <tr>

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

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

451 from the last one</td>

452 <td class="described"><a

453 href="#structural-pseudos">Structural

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

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

456 <tr>

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

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

459 <td class="described"><a

460 href="#structural-pseudos">Structural

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

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

463 <tr>

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

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

466 from the last one</td>

467 <td class="described"><a

468 href="#structural-pseudos">Structural

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

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

471 <tr>

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

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

474 <td class="described"><a

475 href="#structural-pseudos">Structural

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

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

478 <tr>

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

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

481 <td class="described"><a

482 href="#structural-pseudos">Structural

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

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

485 <tr>

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

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

488 <td class="described"><a

489 href="#structural-pseudos">Structural

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

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

492 <tr>

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

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

495 <td class="described"><a

496 href="#structural-pseudos">Structural

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

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

499 <tr>

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

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

502 <td class="described"><a

503 href="#structural-pseudos">Structural

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

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

506 <tr>

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

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

509 <td class="described"><a

510 href="#structural-pseudos">Structural

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

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

513 <tr>

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

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

516 nodes)</td>

517 <td class="described"><a

518 href="#structural-pseudos">Structural

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

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

521 <tr>

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

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

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

525 (:visited)</td>

526 <td class="described"><a

527 href="#link">The link

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

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

530 <tr>

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

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

533 <td class="described"><a

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

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

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

537 <tr>

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

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

540 <td class="described"><a

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

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

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

544 <tr>

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

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

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

548 <td class="described"><a

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

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

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

552 <tr>

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

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

555 disabled</td>

556 <td class="described"><a

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

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

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

560 <tr>

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

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

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

564 <td class="described"><a

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

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

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

568 <tr>

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

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

571 <td class="described"><a

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

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

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

575 <tr>

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

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

578 <td class="described"><a

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

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

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

582 <tr>

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

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

585 selected/highlighted by the user</td>

586 <td class="described"><a

587 href="#UIfragments">The UI element

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

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

590 <tr>

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

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

593 <td class="described"><a

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

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

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

597 <tr>

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

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

600 <td class="described"><a

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

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

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

604 <tr>

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

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

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

608 <td class="described"><a

609 href="#class-html">Class

610 selectors</a></td>

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

612 <tr>

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

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

615 <td class="described"><a

616 href="#id-selectors">ID

617 selectors</a></td>

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

619 <tr>

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

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

622 <td class="described"><a

623 href="#negation">Negation

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

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

626 <tr>

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

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

629 <td class="described"><a

630 href="#descendant-combinators">Descendant

631 combinator</a></td>

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

633 <tr>

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

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

636 <td class="described"><a

637 href="#child-combinators">Child

638 combinator</a></td>

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

640 <tr>

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

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

643 <td class="described"><a

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

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

646 <tr>

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

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

649 <td class="described"><a

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

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

652

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

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

655 column.</p>

656

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

658

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

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

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

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

663

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

665

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

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

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

669

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

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

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

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

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

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

676

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

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

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

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

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

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

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

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

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

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

687 sequence of simple selectors.</p>

688

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

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

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

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

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

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

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

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

697 never part of white space.</p>

698

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

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

701 selector consisting of a single sequence of simple selectors

702 represents any element satisfying its requirements. Prepending another

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

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

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

706 simple selectors.</p>

707

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

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

710 selector</a>.</p>

711

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

713

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

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

716

717 <div class="example">

718 <p>CSS examples:</p>

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

720 declarations into one. Thus,</p>

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

722 h2 { font-family: sans-serif }

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

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

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

726 </div>

727

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

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

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

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

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

733 heading rules would be invalidated.</p>

734

735

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

737

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

739

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

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

742 type in the document tree.</p>

743

744 <div class="example">

745 <p>Example:</p>

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

747 <pre>h1</pre>

748 </div>

749

750

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

752

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

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

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

756 separated by the namespace separator "vertical bar"

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

758

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

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

761

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

763 the selector represents elements in any namespace (including elements

764 with no namespace).</p>

765

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

767 namespace separator), represent elements without regard to the

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

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

770 the selector will represent only elements in the default

771 namespace.</p>

772

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

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

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

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

777 in the General Syntax module.</p>

778

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

780 against the <a

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

782 of the element's <a

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

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

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

786

787 <p>In summary:</p>

788

789 <dl>

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

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

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

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

794 declared namespace</dd>

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

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

797 <dt><code>E</code></dt>

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

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

800 </dl>

801

802 <div class="example">

803 <p>CSS examples:</p>

804

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

806 foo\|h1 { color: blue }

807 foo\|* { color: yellow }

808 \|h1 { color: red }

809 *\|h1 { color: green }

810 h1 { color: green }</pre>

811

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

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

814

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

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

817

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

819 any declared namespace.</p>

820

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

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

823

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

825 namespace has been defined.</p>

826

827 </div>

828

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

830

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

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

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

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

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

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

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

838

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

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

841

842 <div class="example">

843 <p>Examples:</p>

844 <ul>

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

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

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

848 </ul>

849 </div>

850

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

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

853 omitted.</p>

854

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

856

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

858 is used as follows:</p>

859

860 <dl>

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

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

863 <dt><code>\|</code></dt>

864 <dd>all elements</dd>

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

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

867 <dt><code>*</code></dt>

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

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

870 </dl>

871

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

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

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

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

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

877

878

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

880

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

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

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

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

885 attribute selector.</p>

886

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

888 selectors</a></h4>

889

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

891

892 <dl>

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

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

895 the attribute.</dd>

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

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

898 "val".</dd>

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

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

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

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

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

904 spaces).</dd>

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

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

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

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

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

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

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

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

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

914 </dl>

915

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

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

918 the document language.</p>

919

920 <div class="example">

921

922 <p>Examples:</p>

923

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

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

926 value:</p>

927

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

929

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

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

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

933

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

935

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

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

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

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

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

941 "Columbus":</p>

942

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

944

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

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

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

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

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

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

951

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

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

954

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

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

957

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

959

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

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

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

963

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

965

966 <p>Similarly, the following selectors represents a

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

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

969

970 <pre>DIALOGUE[character=romeo]

971 DIALOGUE[character=juliet]</pre>

972

973 </div>

974

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

976 selectors</h4>

977

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

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

980

981 <dl>

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

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

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

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

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

987 the suffix "val".</dd>

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

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

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

991 </dl>

992

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

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

995 document language.</p>

996

997 <div class="example">

998 <p>Examples:</p>

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

1000 image:</p>

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

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

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

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

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

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

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

1008 </div>

1009

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

1011

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

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

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

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

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

1017 apply to attributes, therefore attribute selectors without a namespace

1018 component apply only to attributes that have no declared namespace

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

1020 namespace prefix indicating that the selector is to match all

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

1022

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

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

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

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

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

1028

1029 <div class="example">

1030 <p>CSS examples:</p>

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

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

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

1034 [\|att] { color: green }

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

1036

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

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

1039 value "val".</p>

1040

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

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

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

1044

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

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

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

1048

1049 </div>

1050

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

1052

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

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

1055 elsewhere, but cannot always be selected by attribute

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

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

1058

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

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

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

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

1063

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

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

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

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

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

1069

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

1071 choose to ignore external subsets.</p>

1072

1073 <div class="example">

1074 <p>Example:</p>

1075

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

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

1078

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

1080

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

1082

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

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

1085

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

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

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

1089

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

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

1092

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

1094 more specific than the tag

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

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

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

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

1099 cases' style rules.</p>

1100

1101 </div>

1102

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

1104

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

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

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

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

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

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

1111

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

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

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

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

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

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

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

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

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

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

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

1123

1124 <div class="example">

1125 <p>CSS examples:</p>

1126

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

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

1129

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

1131

1132 <p>or just</p>

1133

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

1135

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

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

1138

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

1140

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

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

1143

1144 <pre><H1>Not green</H1>

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

1146

1147 </div>

1148

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

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

1151

1152 <div class="example">

1153

1154 <p>CSS example:</p>

1155

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

1157 has been assigned a list of <a

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

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

1160

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

1162

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

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

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

1166

1167 </div>

1168

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

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

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

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

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

1174 practice since the structural elements of a document language often

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

1176 not.</p>

1177

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

1179 class attributes, their values must be concatenated with spaces

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

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

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

1183 this specification.</p>

1184

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

1186

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

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

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

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

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

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

1193 may name ID attributes differently, but the same restriction

1194 applies.</p>

1195

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

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

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

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

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

1201 identifier.</p>

1202

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

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

1205 information hard-coded or ask the user.

1206

1207 <div class="example">

1208 <p>Examples:</p>

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

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

1211 <pre>h1#chapter1</pre>

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

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

1214 <pre>#chapter1</pre>

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

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

1217 <pre>*#z98y</pre>

1218 </div>

1219

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

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

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

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

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

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

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

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

1228 should use normal attribute selectors instead:

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

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

1231

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

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

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

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

1236

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

1238

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

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

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

1242

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

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

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

1246

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

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

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

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

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

1252 others can be applied simultaneously to the same

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

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

1255 document.</p>

1256

1257

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

1259

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

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

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

1263

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

1265 document tree.</p>

1266

1267

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

1269

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

1271 previously visited ones. Selectors

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

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

1274

1275 <ul>

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

1277 not yet been visited.</li>

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

1279 been visited by the user. </li>

1280 </ul>

1281

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

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

1284

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

1286

1287 <div class="example">

1288

1289 <p>Example:</p>

1290

1291 <p>The following selector represents links carrying class

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

1293

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

1295

1296 </div>

1297

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

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

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

1301

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

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

1304 and unvisited links differently.</p>

1305

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

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

1308

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

1310 to user actions. Selectors provides

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

1312 acting on.</p>

1313

1314 <ul>

1315

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

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

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

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

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

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

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

1323 user agents that support <a

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

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

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

1327

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

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

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

1331

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

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

1334 input). </li>

1335

1336 </ul>

1337

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

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

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

1341

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

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

1344

1345 <p>Selectors doesn't define if the parent of an element that is

1346 ':active' or ':hover' is also in that state.</p>

1347

1348 <div class="example">

1349 <p>Examples:</p>

1350 <pre>a:link /* unvisited links */

1351 a:visited /* visited links */

1352 a:hover /* user hovers */

1353 a:active /* active links */</pre>

1354 <p>An example of combining dynamic pseudo-classes:</p>

1355 <pre>a:focus

1356 a:focus:hover</pre>

1357 <p>The last selector matches <code>a</code> elements that are in

1358 the pseudo-class :focus and in the pseudo-class :hover.</p>

1359 </div>

1360

1361 <p class="note"><strong>Note:</strong> An element can be both ':visited'

1362 and ':active' (or ':link' and ':active').</p>

1363

1364 <h4><a name=target-pseudo>6.6.2. The target pseudo-class :target</a></h4>

1365

1366 <p>Some URIs refer to a location within a resource. This kind of URI

1367 ends with a "number sign" (#) followed by an anchor

1368 identifier (called the fragment identifier).</p>

1369

1370 <p>URIs with fragment identifiers link to a certain element within the

1371 document, known as the target element. For instance, here is a URI

1372 pointing to an anchor named <code>section_2</code> in an HTML

1373 document:</p>

1374

1375 <pre>http://example.com/html/top.html#section_2</pre>

1376

1377 <p>A target element can be represented by the <code>:target</code>

1378 pseudo-class. If the document's URI has no fragment identifier, then

1379 the document has no target element.</p>

1380

1381 <div class="example">

1382 <p>Example:</p>

1383 <pre>p.note:target</pre>

1384 <p>This selector represents a <code>p</code> element of class

1385 <code>note</code> that is the target element of the referring

1386 URI.</p>

1387 </div>

1388

1389 <div class="example">

1390 <p>CSS example:</p>

1391 <p>Here, the <code>:target</code> pseudo-class is used to make the

1392 target element red and place an image before it, if there is one:</p>

1393 <pre>*:target { color : red }

1394 *:target::before { content : url(target.png) }</pre>

1395 </div>

1396

1397 <h4><a name=lang-pseudo>6.6.3. The language pseudo-class :lang</a></h4>

1398

1399 <p>If the document language specifies how the human language of an

1400 element is determined, it is possible to write selectors that

1401 represent an element based on its language. For example, in HTML <a

1402 href="#refsHTML4">[HTML4]</a>, the language is determined by a

1403 combination of the <code>lang</code> attribute, the <code>meta</code>

1404 element, and possibly by information from the protocol (such as HTTP

1405 headers). XML uses an attribute called <code>xml:lang</code>, and

1406 there may be other document language-specific methods for determining

1407 the language.</p>

1408

1409 <p>The pseudo-class <code>:lang(C)</code> represents an element that

1410 is in language C. Whether an element is represented by a

1411 <code>:lang()</code> selector is based solely on the identifier C

1412 being either equal to, or a hyphen-separated substring of, the

1413 element's language value, in the same way as if performed by the <a

1414 href="#attribute-representation">'\|='</a> operator in attribute

1415 selectors. The identifier C does not have to be a valid language

1416 name.</p>

1417

1418 <p>C must not be empty. (If it is, the selector is invalid.)</p>

1419

1420 <p class="note"><strong>Note:</strong> It is recommended that

1421 documents and protocols indicate language using codes from RFC 3066 <a

1422 href="#refsRFC3066">[RFC3066]</a> or its successor, and by means of

1423 "xml:lang" attributes in the case of XML-based documents <a

1424 href="#refsXML10">[XML10]</a>. See <a

1425 href="http://www.w3.org/International/questions/qa-lang-2or3.html">

1426 "FAQ: Two-letter or three-letter language codes."</a></p>

1427

1428 <div class="example">

1429 <p>Examples:</p>

1430 <p>The two following selectors represent an HTML document that is in

1431 Belgian, French, or German. The two next selectors represent

1432 <code>q</code> quotations in an arbitrary element in Belgian, French,

1433 or German.</p>

1434 <pre>html:lang(fr-be)

1435 html:lang(de)

1436 :lang(fr-be) > q

1437 :lang(de) > q</pre>

1438 </div>

1439

1440 <h4><a name=UIstates>6.6.4. The UI element states pseudo-classes</a></h4>

1441

1442 <h5><a name=enableddisabled>The :enabled and :disabled pseudo-classes</a></h5>

1443

1444 <p>The <code>:enabled</code> pseudo-class allows authors to customize

1445 the look of user interface elements that are enabled — which the

1446 user can select or activate in some fashion (e.g. clicking on a button

1447 with a mouse). There is a need for such a pseudo-class because there

1448 is no way to programmatically specify the default appearance of say,

1449 an enabled <code>input</code> element without also specifying what it

1450 would look like when it was disabled.</p>

1451

1452 <p>Similar to <code>:enabled</code>, <code>:disabled</code> allows the

1453 author to specify precisely how a disabled or inactive user interface

1454 element should look.</p>

1455

1456 <p>Most elements will be neither enabled nor disabled. An element is

1457 enabled if the user can either activate it or transfer the focus to

1458 it. An element is disabled if it could be enabled, but the user cannot

1459 presently activate it or transfer focus to it.</p>

1460

1461

1462 <h5><a name=checked>The :checked pseudo-class</a></h5>

1463

1464 <p>Radio and checkbox elements can be toggled by the user. Some menu

1465 items are "checked" when the user selects them. When such elements are

1466 toggled "on" the <code>:checked</code> pseudo-class applies. The

1467 <code>:checked</code> pseudo-class initially applies to such elements

1468 that have the HTML4 <code>selected</code> and <code>checked</code>

1469 attributes as described in <a

1470 href="http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.2.1">Section

1471 17.2.1 of HTML4</a>, but of course the user can toggle "off" such

1472 elements in which case the <code>:checked</code> pseudo-class would no

1473 longer apply. While the <code>:checked</code> pseudo-class is dynamic

1474 in nature, and is altered by user action, since it can also be based

1475 on the presence of the semantic HTML4 <code>selected</code> and

1476 <code>checked</code> attributes, it applies to all media.

1477

1478

1479 <h5><a name=indeterminate>The :indeterminate pseudo-class</a></h5>

1480

1481 <div class="note">

1482

1483 <p>Radio and checkbox elements can be toggled by the user, but are

1484 sometimes in an indeterminate state, neither checked nor unchecked.

1485 This can be due to an element attribute, or DOM manipulation.</p>

1486

1487 <p>A future version of this specification may introduce an

1488 <code>:indeterminate</code> pseudo-class that applies to such elements.

1489 <!--While the <code>:indeterminate</code> pseudo-class is dynamic in

1490 nature, and is altered by user action, since it can also be based on

1491 the presence of an element attribute, it applies to all media.</p>

1492

1493 <p>Components of a radio-group initialized with no pre-selected choice

1494 are an example of :indeterminate state.--></p>

1495

1496 </div>

1497

1498

1499 <h4><a name=structural-pseudos>6.6.5. Structural pseudo-classes</a></h4>

1500

1501 <p>Selectors introduces the concept of <dfn>structural

1502 pseudo-classes</dfn> to permit selection based on extra information that lies in

1503 the document tree but cannot be represented by other simple selectors or

1504 combinators.

1505

1506 <p>Note that standalone pieces of PCDATA (text nodes in the DOM) are

1507 not counted when calculating the position of an element in the list of

1508 children of its parent. When calculating the position of an element in

1509 the list of children of its parent, the index numbering starts at 1.

1510

1511

1512 <h5><a name=root-pseudo>:root pseudo-class</a></h5>

1513

1514 <p>The <code>:root</code> pseudo-class represents an element that is

1515 the root of the document. In HTML 4, this is always the

1516 <code>HTML</code> element.

1517

1518

1519 <h5><a name=nth-child-pseudo>:nth-child() pseudo-class</a></h5>

1520

1521 <p>The

1522 <code>:nth-child(<var>a</var><code>n</code>+<var>b</var>)</code>

1523 pseudo-class notation represents an element that has

1524 <var>a</var><code>n</code>+<var>b</var>-1 siblings

1525 <strong>before</strong> it in the document tree, for a given positive

1526 integer or zero value of <code>n</code>, and has a parent element. In

1527 other words, this matches the <var>b</var>th child of an element after

1528 all the children have been split into groups of <var>a</var> elements

1529 each. For example, this allows the selectors to address every other

1530 row in a table, and could be used to alternate the color

1531 of paragraph text in a cycle of four. The <var>a</var> and

1532 <var>b</var> values must be zero, negative integers or positive

1533 integers. The index of the first child of an element is 1.

1534

1535 <p>In addition to this, <code>:nth-child()</code> can take

1536 '<code>odd</code>' and '<code>even</code>' as arguments instead.

1537 '<code>odd</code>' has the same signification as <code>2n+1</code>,

1538 and '<code>even</code>' has the same signification as <code>2n</code>.

1539

1540

1541 <div class="example">

1542 <p>Examples:</p>

1543 <pre>tr:nth-child(2n+1) /* represents every odd row of an HTML table */

1544 tr:nth-child(odd) /* same */

1545 tr:nth-child(2n) /* represents every even row of an HTML table */

1546 tr:nth-child(even) /* same */

1547

1548 /* Alternate paragraph colours in CSS */

1549 p:nth-child(4n+1) { color: navy; }

1550 p:nth-child(4n+2) { color: green; }

1551 p:nth-child(4n+3) { color: maroon; }

1552 p:nth-child(4n+4) { color: purple; }</pre>

1553 </div>

1554

1555 <p>When <var>a</var>=0, no repeating is used, so for example

1556 <code>:nth-child(0n+5)</code> matches only the fifth child. When

1557 <var>a</var>=0, the <var>a</var><code>n</code> part need not be

1558 included, so the syntax simplifies to

1559 <code>:nth-child(<var>b</var>)</code> and the last example simplifies

1560 to <code>:nth-child(5)</code>.

1561

1562 <div class="example">

1563 <p>Examples:</p>

1564 <pre>foo:nth-child(0n+1) /* represents an element foo, first child of its pare nt element */

1565 foo:nth-child(1) /* same */</pre>

1566 </div>

1567

1568 <p>When <var>a</var>=1, the number may be omitted from the rule.

1569

1570 <div class="example">

1571 <p>Examples:</p>

1572 <p>The following selectors are therefore equivalent:</p>

1573 <pre>bar:nth-child(1n+0) /* represents all bar elements, specificity (0,1,1) * /

1574 bar:nth-child(n+0) /* same */

1575 bar:nth-child(n) /* same */

1576 bar /* same but lower specificity (0,0,1) */</pre>

1577 </div>

1578

1579 <p>If <var>b</var>=0, then every <var>a</var>th element is picked. In

1580 such a case, the <var>b</var> part may be omitted.

1581

1582 <div class="example">

1583 <p>Examples:</p>

1584 <pre>tr:nth-child(2n+0) /* represents every even row of an HTML table */

1585 tr:nth-child(2n) /* same */</pre>

1586 </div>

1587

1588 <p>If both <var>a</var> and <var>b</var> are equal to zero, the

1589 pseudo-class represents no element in the document tree.</p>

1590

1591 <p>The value <var>a</var> can be negative, but only the positive

1592 values of <var>a</var><code>n</code>+<var>b</var>, for

1593 <code>n</code>≥0, may represent an element in the document

1594 tree.</p>

1595

1596 <div class="example">

1597 <p>Example:</p>

1598 <pre>html\|tr:nth-child(-n+6) /* represents the 6 first rows of XHTML tables */< /pre>

1599 </div>

1600

1601 <p>When the value <var>b</var> is negative, the "+" character in the

1602 expression must be removed (it is effectively replaced by the "-"

1603 character indicating the negative value of <var>b</var>).</p>

1604

1605 <div class="example">

1606 <p>Examples:</p>

1607 <pre>:nth-child(10n-1) /* represents the 9th, 19th, 29th, etc, element */

1608 :nth-child(10n+9) /* Same */

1609 :nth-child(10n+-1) /* Syntactically invalid, and would be ignored */</pre>

1610 </div>

1611

1612

1613 <h5><a name=nth-last-child-pseudo>:nth-last-child() pseudo-class</a></h5>

1614

1615 <p>The <code>:nth-last-child(<var>a</var>n+<var>b</var>)</code>

1616 pseudo-class notation represents an element that has

1617 <var>a</var><code>n</code>+<var>b</var>-1 siblings

1618 <strong>after</strong> it in the document tree, for a given positive

1619 integer or zero value of <code>n</code>, and has a parent element. See

1620 <code>:nth-child()</code> pseudo-class for the syntax of its argument.

1621 It also accepts the '<code>even</code>' and '<code>odd</code>' values

1622 as arguments.

1623

1624

1625 <div class="example">

1626 <p>Examples:</p>

1627 <pre>tr:nth-last-child(-n+2) /* represents the two last rows of an HTML table */

1628

1629 foo:nth-last-child(odd) /* represents all odd foo elements in their parent el ement,

1630 counting from the last one */</pre>

1631 </div>

1632

1633

1634 <h5><a name=nth-of-type-pseudo>:nth-of-type() pseudo-class</a></h5>

1635

1636 <p>The <code>:nth-of-type(<var>a</var>n+<var>b</var>)</code>

1637 pseudo-class notation represents an element that has

1638 <var>a</var><code>n</code>+<var>b</var>-1 siblings with the same

1639 element name <strong>before</strong> it in the document tree, for a

1640 given zero or positive integer value of <code>n</code>, and has a

1641 parent element. In other words, this matches the <var>b</var>th child

1642 of that type after all the children of that type have been split into

1643 groups of a elements each. See <code>:nth-child()</code> pseudo-class

1644 for the syntax of its argument. It also accepts the

1645 '<code>even</code>' and '<code>odd</code>' values.

1646

1647

1648 <div class="example">

1649 <p>CSS example:</p>

1650 <p>This allows an author to alternate the position of floated images:</p>

1651 <pre>img:nth-of-type(2n+1) { float: right; }

1652 img:nth-of-type(2n) { float: left; }</pre>

1653 </div>

1654

1655

1656 <h5><a name=nth-last-of-type-pseudo>:nth-last-of-type() pseudo-class</a></h5>

1657

1658 <p>The <code>:nth-last-of-type(<var>a</var>n+<var>b</var>)</code>

1659 pseudo-class notation represents an element that has

1660 <var>a</var><code>n</code>+<var>b</var>-1 siblings with the same

1661 element name <strong>after</strong> it in the document tree, for a

1662 given zero or positive integer value of <code>n</code>, and has a

1663 parent element. See <code>:nth-child()</code> pseudo-class for the

1664 syntax of its argument. It also accepts the '<code>even</code>' and '<code>odd</ code>' values.

1665

1666

1667 <div class="example">

1668 <p>Example:</p>

1669 <p>To represent all <code>h2</code> children of an XHTML

1670 <code>body</code> except the first and last, one could use the

1671 following selector:</p>

1672 <pre>body > h2:nth-of-type(n+2):nth-last-of-type(n+2)</pre>

1673 <p>In this case, one could also use <code>:not()</code>, although the

1674 selector ends up being just as long:</p>

1675 <pre>body > h2:not(:first-of-type):not(:last-of-type)</pre>

1676 </div>

1677

1678

1679 <h5><a name=first-child-pseudo>:first-child pseudo-class</a></h5>

1680

1681 <p>Same as <code>:nth-child(1)</code>. The <code>:first-child</code> pseudo-clas s

1682 represents an element that is the first child of some other element.

1683

1684

1685 <div class="example">

1686 <p>Examples:</p>

1687 <p>The following selector represents a <code>p</code> element that is

1688 the first child of a <code>div</code> element:</p>

1689 <pre>div > p:first-child</pre>

1690 <p>This selector can represent the <code>p</code> inside the

1691 <code>div</code> of the following fragment:</p>

1692 <pre><p> The last P before the note.</p>

1693 <div class="note">

1694 <p> The first P inside the note.</p>

1695 </div></pre>but cannot represent the second <code>p</code> in the followin g

1696 fragment:

1697 <pre><p> The last P before the note.</p>

1698 <div class="note">

1699 <h2> Note </h2>

1700 <p> The first P inside the note.</p>

1701 </div></pre>

1702 <p>The following two selectors are usually equivalent:</p>

1703 <pre>* > a:first-child /* a is first child of any element */

1704 a:first-child /* Same (assuming a is not the root element) */</pre>

1705 </div>

1706

1707 <h5><a name=last-child-pseudo>:last-child pseudo-class</a></h5>

1708

1709 <p>Same as <code>:nth-last-child(1)</code>. The <code>:last-child</code> pseudo- class

1710 represents an element that is the last child of some other element.

1711

1712 <div class="example">

1713 <p>Example:</p>

1714 <p>The following selector represents a list item <code>li</code> that

1715 is the last child of an ordered list <code>ol</code>.

1716 <pre>ol > li:last-child</pre>

1717 </div>

1718

1719 <h5><a name=first-of-type-pseudo>:first-of-type pseudo-class</a></h5>

1720

1721 <p>Same as <code>:nth-of-type(1)</code>. The <code>:first-of-type</code> pseudo- class

1722 represents an element that is the first sibling of its type in the list of

1723 children of its parent element.

1724

1725 <div class="example">

1726 <p>Example:</p>

1727 <p>The following selector represents a definition title

1728 <code>dt</code> inside a definition list <code>dl</code>, this

1729 <code>dt</code> being the first of its type in the list of children of

1730 its parent element.</p>

1731 <pre>dl dt:first-of-type</pre>

1732 <p>It is a valid description for the first two <code>dt</code>

1733 elements in the following example but not for the third one:</p>

1734 <pre><dl>

1735 <dt>gigogne</dt>

1736 <dd>

1737 <dl>

1738 <dt>fusée</dt>

1739 <dd>multistage rocket</dd>

1740 <dt>table</dt>

1741 <dd>nest of tables</dd>

1742 </dl>

1743 </dd>

1744 </dl></pre>

1745 </div>

1746

1747 <h5><a name=last-of-type-pseudo>:last-of-type pseudo-class</a></h5>

1748

1749 <p>Same as <code>:nth-last-of-type(1)</code>. The

1750 <code>:last-of-type</code> pseudo-class represents an element that is

1751 the last sibling of its type in the list of children of its parent

1752 element.</p>

1753

1754 <div class="example">

1755 <p>Example:</p>

1756 <p>The following selector represents the last data cell

1757 <code>td</code> of a table row.</p>

1758 <pre>tr > td:last-of-type</pre>

1759 </div>

1760

1761 <h5><a name=only-child-pseudo>:only-child pseudo-class</a></h5>

1762

1763 <p>Represents an element that has a parent element and whose parent

1764 element has no other element children. Same as

1765 <code>:first-child:last-child</code> or

1766 <code>:nth-child(1):nth-last-child(1)</code>, but with a lower

1767 specificity.</p>

1768

1769 <h5><a name=only-of-type-pseudo>:only-of-type pseudo-class</a></h5>

1770

1771 <p>Represents an element that has a parent element and whose parent

1772 element has no other element children with the same element name. Same

1773 as <code>:first-of-type:last-of-type</code> or

1774 <code>:nth-of-type(1):nth-last-of-type(1)</code>, but with a lower

1775 specificity.</p>

1776

1777

1778 <h5><a name=empty-pseudo></a>:empty pseudo-class</h5>

1779

1780 <p>The <code>:empty</code> pseudo-class represents an element that has

1781 no children at all. In terms of the DOM, only element nodes and text

1782 nodes (including CDATA nodes and entity references) whose data has a

1783 non-zero length must be considered as affecting emptiness; comments,

1784 PIs, and other nodes must not affect whether an element is considered

1785 empty or not.</p>

1786

1787 <div class="example">

1788 <p>Examples:</p>

1789 <p><code>p:empty</code> is a valid representation of the following fragment:</p >

1790 <pre><p></p></pre>

1791 <p><code>foo:empty</code> is not a valid representation for the

1792 following fragments:</p>

1793 <pre><foo>bar</foo></pre>

1794 <pre><foo><bar>bla</bar></foo></pre>

1795 <pre><foo>this is not <bar>:empty</bar></foo></pre>

1796 </div>

1797

1798 <h4><a name=content-selectors>6.6.6. Blank</a></h4> <!-- It's the Return of Appe ndix H!!! Run away! -->

1799

1800 <p>This section intentionally left blank.</p>

1801 <!-- (used to be :contains()) -->

1802

1803 <h4><a name=negation></a>6.6.7. The negation pseudo-class</h4>

1804

1805 <p>The negation pseudo-class, <code>:not(<var>X</var>)</code>, is a

1806 functional notation taking a <a href="#simple-selectors-dfn">simple

1807 selector</a> (excluding the negation pseudo-class itself and

1808 pseudo-elements) as an argument. It represents an element that is not

1809 represented by the argument.

1810

1811 <!-- pseudo-elements are not simple selectors, so the above paragraph

1812 may be a bit confusing -->

1813

1814 <div class="example">

1815 <p>Examples:</p>

1816 <p>The following CSS selector matches all <code>button</code>

1817 elements in an HTML document that are not disabled.</p>

1818 <pre>button:not([DISABLED])</pre>

1819 <p>The following selector represents all but <code>FOO</code>

1820 elements.</p>

1821 <pre>*:not(FOO)</pre>

1822 <p>The following group of selectors represents all HTML elements

1823 except links.</p>

1824 <pre>html\|*:not(:link):not(:visited)</pre>

1825 </div>

1826

1827 <p>Default namespace declarations do not affect the argument of the

1828 negation pseudo-class unless the argument is a universal selector or a

1829 type selector.</p>

1830

1831 <div class="example">

1832 <p>Examples:</p>

1833 <p>Assuming that the default namespace is bound to

1834 "http://example.com/", the following selector represents all

1835 elements that are not in that namespace:</p>

1836 <pre>\|:not(*)</pre>

1837 <p>The following CSS selector matches any element being hovered,

1838 regardless of its namespace. In particular, it is not limited to

1839 only matching elements in the default namespace that are not being

1840 hovered, and elements not in the default namespace don't match the

1841 rule when they <em>are</em> being hovered.</p>

1842 <pre>\|:not(:hover)</pre>

1843 </div>

1844

1845 <p class="note"><strong>Note</strong>: the :not() pseudo allows

1846 useless selectors to be written. For instance <code>:not(\|)</code>,

1847 which represents no element at all, or <code>foo:not(bar)</code>,

1848 which is equivalent to <code>foo</code> but with a higher

1849 specificity.</p>

1850

1851 <h3><a name=pseudo-elements>7. Pseudo-elements</a></h3>

1852

1853 <p>Pseudo-elements create abstractions about the document tree beyond

1854 those specified by the document language. For instance, document

1855 languages do not offer mechanisms to access the first letter or first

1856 line of an element's content. Pseudo-elements allow designers to refer

1857 to this otherwise inaccessible information. Pseudo-elements may also

1858 provide designers a way to refer to content that does not exist in the

1859 source document (e.g., the <code>::before</code> and

1860 <code>::after</code> pseudo-elements give access to generated

1861 content).</p>

1862

1863 <p>A pseudo-element is made of two colons (<code>::</code>) followed

1864 by the name of the pseudo-element.</p>

1865

1866 <p>This <code>::</code> notation is introduced by the current document

1867 in order to establish a discrimination between pseudo-classes and

1868 pseudo-elements. For compatibility with existing style sheets, user

1869 agents must also accept the previous one-colon notation for

1870 pseudo-elements introduced in CSS levels 1 and 2 (namely,

1871 <code>:first-line</code>, <code>:first-letter</code>,

1872 <code>:before</code> and <code>:after</code>). This compatibility is

1873 not allowed for the new pseudo-elements introduced in CSS level 3.</p>

1874

1875 <p>Only one pseudo-element may appear per selector, and if present it

1876 must appear after the sequence of simple selectors that represents the

1877 <a href="#subject">subjects</a> of the selector. <span class="note">A

1878 future version of this specification may allow multiple

1879 pesudo-elements per selector.</span></p>

1880

1881 <h4><a name=first-line>7.1. The ::first-line pseudo-element</a></h4>

1882

1883 <p>The <code>::first-line</code> pseudo-element describes the contents

1884 of the first formatted line of an element.

1885

1886 <div class="example">

1887 <p>CSS example:</p>

1888 <pre>p::first-line { text-transform: uppercase }</pre>

1889 <p>The above rule means "change the letters of the first line of every

1890 paragraph to uppercase".</p>

1891 </div>

1892

1893 <p>The selector <code>p::first-line</code> does not match any real

1894 HTML element. It does match a pseudo-element that conforming user

1895 agents will insert at the beginning of every paragraph.</p>

1896

1897 <p>Note that the length of the first line depends on a number of

1898 factors, including the width of the page, the font size, etc. Thus,

1899 an ordinary HTML paragraph such as:</p>

1900

1901 <pre>

1902 <P>This is a somewhat long HTML

1903 paragraph that will be broken into several

1904 lines. The first line will be identified

1905 by a fictional tag sequence. The other lines

1906 will be treated as ordinary lines in the

1907 paragraph.</P>

1908 </pre>

1909

1910 <p>the lines of which happen to be broken as follows:

1911

1912 <pre>

1913 THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT

1914 will be broken into several lines. The first

1915 line will be identified by a fictional tag

1916 sequence. The other lines will be treated as

1917 ordinary lines in the paragraph.

1918 </pre>

1919

1920 <p>This paragraph might be "rewritten" by user agents to include the

1921 <em>fictional tag sequence</em> for <code>::first-line</code>. This

1922 fictional tag sequence helps to show how properties are inherited.</p>

1923

1924 <pre>

1925 <P><b><P::first-line></b> This is a somewhat long HTML

1926 paragraph that <b></P::first-line></b> will be broken into several

1927 lines. The first line will be identified

1928 by a fictional tag sequence. The other lines

1929 will be treated as ordinary lines in the

1930 paragraph.</P>

1931 </pre>

1932

1933 <p>If a pseudo-element breaks up a real element, the desired effect

1934 can often be described by a fictional tag sequence that closes and

1935 then re-opens the element. Thus, if we mark up the previous paragraph

1936 with a <code>span</code> element:</p>

1937

1938 <pre>

1939 <P><b><SPAN class="test"></b> This is a somewhat long HTML

1940 paragraph that will be broken into several

1941 lines.<b></SPAN></b> The first line will be identified

1942 by a fictional tag sequence. The other lines

1943 will be treated as ordinary lines in the

1944 paragraph.</P>

1945 </pre>

1946

1947 <p>the user agent could simulate start and end tags for

1948 <code>span</code> when inserting the fictional tag sequence for

1949 <code>::first-line</code>.

1950

1951 <pre>

1952 <P><P::first-line><b><SPAN class="test"></b> This is a

1953 somewhat long HTML

1954 paragraph that will <b></SPAN></b></P::first-line><b><SPAN class= "test"></b> be

1955 broken into several

1956 lines.<b></SPAN></b> The first line will be identified

1957 by a fictional tag sequence. The other lines

1958 will be treated as ordinary lines in the

1959 paragraph.</P>

1960 </pre>

1961

1962 <p>In CSS, the <code>::first-line</code> pseudo-element can only be

1963 attached to a block-level element, an inline-block, a table-caption,

1964 or a table-cell.</p>

1965

1966 <p><a name="first-formatted-line"></a>The "first formatted line" of an

1967 element may occur inside a

1968 block-level descendant in the same flow (i.e., a block-level

1969 descendant that is not positioned and not a float). E.g., the first

1970 line of the <code>div</code> in <code><DIV><P>This

1971 line...</P>&lt/DIV></code> is the first line of the <code>p</code> (assuming

1972 that both <code>p</code> and <code>div</code> are block-level).

1973

1974 <p>The first line of a table-cell or inline-block cannot be the first

1975 formatted line of an ancestor element. Thus, in <code><DIV><P

1976 STYLE="display: inline-block">Hello<BR>Goodbye</P>

1977 etcetera</DIV></code> the first formatted line of the

1978 <code>div</code> is not the line "Hello".

1979

1980 <p class="note">Note that the first line of the <code>p</code> in this

1981 fragment: <code><p&gt<br>First...</code> doesn't contain any

1982 letters (assuming the default style for <code>br</code> in HTML

1983 4). The word "First" is not on the first formatted line.

1984

1985 <p>A UA should act as if the fictional start tags of the

1986 <code>::first-line</code> pseudo-elements were nested just inside the

1987 innermost enclosing block-level element. (Since CSS1 and CSS2 were

1988 silent on this case, authors should not rely on this behavior.) Here

1989 is an example. The fictional tag sequence for</p>

1990

1991 <pre>

1992 <DIV>

1993 <P>First paragraph</P>

1994 <P>Second paragraph</P>

1995 </DIV>

1996 </pre>

1997

1998 <p>is</p>

1999

2000 <pre>

2001 <DIV>

2002 <P><DIV::first-line><P::first-line>First paragraph</P::first-line> </DIV::first-line></P>

2003 <P><P::first-line>Second paragraph</P::first-line></P>

2004 </DIV>

2005 </pre>

2006

2007 <p>The <code>::first-line</code> pseudo-element is similar to an

2008 inline-level element, but with certain restrictions. In CSS, the

2009 following properties apply to a <code>::first-line</code>

2010 pseudo-element: font properties, color property, background

2011 properties, 'word-spacing', 'letter-spacing', 'text-decoration',

2012 'vertical-align', 'text-transform', 'line-height'. UAs may apply other

2013 properties as well.</p>

2014

2015

2016 <h4><a name=first-letter>7.2. The ::first-letter pseudo-element</a></h4>

2017

2018 <p>The <code>::first-letter</code> pseudo-element represents the first

2019 letter of the first line of a block, if it is not preceded by any

2020 other content (such as images or inline tables) on its line. The

2021 ::first-letter pseudo-element may be used for "initial caps" and "drop

2022 caps", which are common typographical effects. This type of initial

2023 letter is similar to an inline-level element if its 'float' property

2024 is 'none'; otherwise, it is similar to a floated element.</p>

2025

2026 <p>In CSS, these are the properties that apply to <code>::first-letter</code>

2027 pseudo-elements: font properties, 'text-decoration', 'text-transform',

2028 'letter-spacing', 'word-spacing' (when appropriate), 'line-height',

2029 'float', 'vertical-align' (only if 'float' is 'none'), margin

2030 properties, padding properties, border properties, color property,

2031 background properties. UAs may apply other properties as well. To

2032 allow UAs to render a typographically correct drop cap or initial cap,

2033 the UA may choose a line-height, width and height based on the shape

2034 of the letter, unlike for normal elements.</p>

2035

2036 <div class="example">

2037 <p>Example:</p>

2038 <p>This example shows a possible rendering of an initial cap. Note

2039 that the 'line-height' that is inherited by the <code>::first-letter</code>

2040 pseudo-element is 1.1, but the UA in this example has computed the

2041 height of the first letter differently, so that it doesn't cause any

2042 unnecessary space between the first two lines. Also note that the

2043 fictional start tag of the first letter is inside the <span>span</span>, and thu s

2044 the font weight of the first letter is normal, not bold as the <span>span</span> :

2045 <pre>

2046 p { line-height: 1.1 }

2047 p::first-letter { font-size: 3em; font-weight: normal }

2048 span { font-weight: bold }

2049 ...

2050 <p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br >

2051 Erbarremt over my en mijn benaeuwde vesten<br>

2052 En arme burgery, en op mijn volcx gebed<br>

2053 En dagelix geschrey de bange stad ontzet.

2054 </pre>

2055 <div class="figure">

2056 <p><img src="initial-cap.png" alt="Image illustrating the ::first-letter pseudo- element">

2057 </div>

2058 </div>

2059

2060 <div class="example">

2061 <p>The following CSS will make a drop cap initial letter span about two lines:</ p>

2062

2063 <pre>

2064 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

2065 <HTML>

2066 <HEAD>

2067 <TITLE>Drop cap initial letter</TITLE>

2068 <STYLE type="text/css">

2069 P { font-size: 12pt; line-height: 1.2 }

2070 P::first-letter { font-size: 200%; font-weight: bold; float: left }

2071 SPAN { text-transform: uppercase }

2072 </STYLE>

2073 </HEAD>

2074 <BODY>

2075 <P><SPAN>The first</SPAN> few words of an article

2076 in The Economist.</P>

2077 </BODY>

2078 </HTML>

2079 </pre>

2080

2081 <p>This example might be formatted as follows:</p>

2082

2083 <div class="figure">

2084 <P><img src="first-letter.gif" alt="Image illustrating the combined effect of th e ::first-letter and ::first-line pseudo-elements"></p>

2085 </div>

2086

2087 <p>The <span class="index-inst" title="fictional tag

2088 sequence">fictional tag sequence</span> is:</p>

2089

2090 <pre>

2091 <P>

2092 <SPAN>

2093 <P::first-letter>

2094 T

2095 </P::first-letter>he first

2096 </SPAN>

2097 few words of an article in the Economist.

2098 </P>

2099 </pre>

2100

2101 <p>Note that the <code>::first-letter</code> pseudo-element tags abut

2102 the content (i.e., the initial character), while the ::first-line

2103 pseudo-element start tag is inserted right after the start tag of the

2104 block element.</p> </div>

2105

2106 <p>In order to achieve traditional drop caps formatting, user agents

2107 may approximate font sizes, for example to align baselines. Also, the

2108 glyph outline may be taken into account when formatting.</p>

2109

2110 <p>Punctuation (i.e, characters defined in Unicode in the "open" (Ps),

2111 "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po)

2112 punctuation classes), that precedes or follows the first letter should

2113 be included. <a href="#refsUNICODE">[UNICODE]</a></p>

2114

2115 <div class="figure">

2116 <P><img src="first-letter2.gif" alt="Quotes that precede the

2117 first letter should be included."></p>

2118 </div>

2119

2120 <p>The <code>::first-letter</code> also applies if the first letter is

2121 in fact a digit, e.g., the "6" in "67 million dollars is a lot of

2122 money."</p>

2123

2124 <p>In CSS, the <code>::first-letter</code> pseudo-element applies to

2125 block, list-item, table-cell, table-caption, and inline-block

2126 elements. <span class="note">A future version of this specification

2127 may allow this pesudo-element to apply to more element

2128 types.</span></p>

2129

2130 <p>The <code>::first-letter</code> pseudo-element can be used with all

2131 such elements that contain text, or that have a descendant in the same

2132 flow that contains text. A UA should act as if the fictional start tag

2133 of the ::first-letter pseudo-element is just before the first text of

2134 the element, even if that first text is in a descendant.</p>

2135

2136 <div class="example">

2137 <p>Example:</p>

2138 <p>The fictional tag sequence for this HTMLfragment:

2139 <pre><div>

2140 <p>The first text.</pre>

2141 <p>is:

2142 <pre><div>

2143 <p><div::first-letter><p::first-letter>T</...></...>he first text .</pre>

2144 </div>

2145

2146 <p>The first letter of a table-cell or inline-block cannot be the

2147 first letter of an ancestor element. Thus, in <code><DIV><P

2148 STYLE="display: inline-block">Hello<BR>Goodbye</P>

2149 etcetera</DIV></code> the first letter of the <code>div</code> is not the

2150 letter "H". In fact, the <code>div</code> doesn't have a first letter.

2151

2152 <p>The first letter must occur on the <a

2153 href="#first-formatted-line">first formatted line.</a> For example, in

2154 this fragment: <code><p&gt<br>First...</code> the first line

2155 doesn't contain any letters and <code>::first-letter</code> doesn't

2156 match anything (assuming the default style for <code>br</code> in HTML

2157 4). In particular, it does not match the "F" of "First."

2158

2159 <p>In CSS, if an element is a list item ('display: list-item'), the

2160 <code>::first-letter</code> applies to the first letter in the

2161 principal box after the marker. UAs may ignore

2162 <code>::first-letter</code> on list items with 'list-style-position:

2163 inside'. If an element has <code>::before</code> or

2164 <code>::after</code> content, the <code>::first-letter</code> applies

2165 to the first letter of the element <em>including</em> that content.

2166

2167 <div class="example">

2168 <p>Example:</p>

2169 <p>After the rule 'p::before {content: "Note: "}', the selector

2170 'p::first-letter' matches the "N" of "Note".</p>

2171 </div>

2172

2173 <p>Some languages may have specific rules about how to treat certain

2174 letter combinations. In Dutch, for example, if the letter combination

2175 "ij" appears at the beginning of a word, both letters should be

2176 considered within the <code>::first-letter</code> pseudo-element.

2177

2178 <p>If the letters that would form the ::first-letter are not in the

2179 same element, such as "'T" in <code><p>'<em>T...</code>, the UA

2180 may create a ::first-letter pseudo-element from one of the elements,

2181 both elements, or simply not create a pseudo-element.</p>

2182

2183 <p>Similarly, if the first letter(s) of the block are not at the start

2184 of the line (for example due to bidirectional reordering), then the UA

2185 need not create the pseudo-element(s).

2186

2187 <div class="example">

2188 <p>Example:</p>

2189 <p><a name="overlapping-example">The following example</a> illustrates

2190 how overlapping pseudo-elements may interact. The first letter of

2191 each P element will be green with a font size of '24pt'. The rest of

2192 the first formatted line will be 'blue' while the rest of the

2193 paragraph will be 'red'.</p>

2194

2195 <pre>p { color: red; font-size: 12pt }

2196 p::first-letter { color: green; font-size: 200% }

2197 p::first-line { color: blue }

2198

2199 <P>Some text that ends up on two lines</P></pre>

2200

2201 <p>Assuming that a line break will occur before the word "ends", the

2202 <span class="index-inst" title="fictional tag sequence">fictional tag

2203 sequence</span> for this fragment might be:</p>

2204

2205 <pre><P>

2206 <P::first-line>

2207 <P::first-letter>

2208 S

2209 </P::first-letter>ome text that

2210 </P::first-line>

2211 ends up on two lines

2212 </P></pre>

2213

2214 <p>Note that the <code>::first-letter</code> element is inside the <code>::first -line</code>

2215 element. Properties set on <code>::first-line</code> are inherited by

2216 <code>::first-letter</code>, but are overridden if the same property is set on

2217 <code>::first-letter</code>.</p>

2218 </div>

2219

2220

2221 <h4><a name=UIfragments>7.3.</a> <a name=selection>The ::selection pseudo-elemen t</a></h4>

2222

2223 <p>The <code>::selection</code> pseudo-element applies to the portion

2224 of a document that has been highlighted by the user. This also

2225 applies, for example, to selected text within an editable text

2226 field. This pseudo-element should not be confused with the <code><a

2227 href="#checked">:checked</a></code> pseudo-class (which used to be

2228 named <code>:selected</code>)

2229

2230 <p>Although the <code>::selection</code> pseudo-element is dynamic in

2231 nature, and is altered by user action, it is reasonable to expect that

2232 when a UA re-renders to a static medium (such as a printed page, see

2233 <a href="#refsCSS21">[CSS21]</a>) which was originally rendered to a

2234 dynamic medium (like screen), the UA may wish to transfer the current

2235 <code>::selection</code> state to that other medium, and have all the

2236 appropriate formatting and rendering take effect as well. This is not

2237 required — UAs may omit the <code>::selection</code>

2238 pseudo-element for static media.

2239

2240 <p>These are the CSS properties that apply to <code>::selection</code>

2241 pseudo-elements: color, background, cursor (optional), outline

2242 (optional). The computed value of the 'background-image' property on

2243 <code>::selection</code> may be ignored.

2244

2245

2246 <h4><a name=gen-content>7.4. The ::before and ::after pseudo-elements</a></h4>

2247

2248 <p>The <code>::before</code> and <code>::after</code> pseudo-elements

2249 can be used to describe generated content before or after an element's

2250 content. They are explained in CSS 2.1 <a

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

2252

2253 <p>When the <code>::first-letter</code> and <code>::first-line</code>

2254 pseudo-elements are combined with <code>::before</code> and

2255 <code>::after</code>, they apply to the first letter or line of the

2256 element including the inserted text.</p>

2257

2258 <h2><a name=combinators>8. Combinators</a></h2>

2259

2260 <h3><a name=descendant-combinators>8.1. Descendant combinator</a></h3>

2261

2262 <p>At times, authors may want selectors to describe an element that is

2263 the descendant of another element in the document tree (e.g., "an

2264 <code>EM</code> element that is contained within an <code>H1</code>

2265 element"). Descendant combinators express such a relationship. A

2266 descendant combinator is <a href="#whitespace">white space</a> that

2267 separates two sequences of simple selectors. A selector of the form

2268 "<code>A B</code>" represents an element <code>B</code> that is an

2269 arbitrary descendant of some ancestor element <code>A</code>.

2270

2271 <div class="example">

2272 <p>Examples:</p>

2273 <p>For example, consider the following selector:</p>

2274 <pre>h1 em</pre>

2275 <p>It represents an <code>em</code> element being the descendant of

2276 an <code>h1</code> element. It is a correct and valid, but partial,

2277 description of the following fragment:</p>

2278 <pre><h1>This <span class="myclass">headline

2279 is <em>very</em> important</span></h1></pre>

2280 <p>The following selector:</p>

2281 <pre>div * p</pre>

2282 <p>represents a <code>p</code> element that is a grandchild or later

2283 descendant of a <code>div</code> element. Note the whitespace on

2284 either side of the "*" is not part of the universal selector; the

2285 whitespace is a combinator indicating that the DIV must be the

2286 ancestor of some element, and that that element must be an ancestor

2287 of the P.</p>

2288 <p>The following selector, which combines descendant combinators and

2289 <a href="#attribute-selectors">attribute selectors</a>, represents an

2290 element that (1) has the <code>href</code> attribute set and (2) is

2291 inside a <code>p</code> that is itself inside a <code>div</code>:</p>

2292 <pre>div p *[href]</pre>

2293 </div>

2294

2295 <h3><a name=child-combinators>8.2. Child combinators</a></h3>

2296

2297 <p>A <dfn>child combinator</dfn> describes a childhood relationship

2298 between two elements. A child combinator is made of the

2299 "greater-than sign" (<code>></code>) character and

2300 separates two sequences of simple selectors.

2301

2302

2303 <div class="example">

2304 <p>Examples:</p>

2305 <p>The following selector represents a <code>p</code> element that is

2306 child of <code>body</code>:</p>

2307 <pre>body > p</pre>

2308 <p>The following example combines descendant combinators and child

2309 combinators.</p>

2310 <pre>div ol>li p</pre><!-- LEAVE THOSE SPACES OUT! see below -->

2311 <p>It represents a <code>p</code> element that is a descendant of an

2312 <code>li</code> element; the <code>li</code> element must be the

2313 child of an <code>ol</code> element; the <code>ol</code> element must

2314 be a descendant of a <code>div</code>. Notice that the optional white

2315 space around the ">" combinator has been left out.</p>

2316 </div>

2317

2318 <p>For information on selecting the first child of an element, please

2319 see the section on the <code><a

2320 href="#structural-pseudos">:first-child</a></code> pseudo-class

2321 above.</p>

2322

2323 <h3><a name=sibling-combinators>8.3. Sibling combinators</a></h3>

2324

2325 <p>There are two different sibling combinators: the adjacent sibling

2326 combinator and the general sibling combinator. In both cases,

2327 non-element nodes (e.g. text between elements) are ignored when

2328 considering adjacency of elements.</p>

2329

2330 <h4><a name=adjacent-sibling-combinators>8.3.1. Adjacent sibling combinator</a>< /h4>

2331

2332 <p>The adjacent sibling combinator is made of the "plus

2333 sign" (U+002B, <code>+</code>) character that separates two

2334 sequences of simple selectors. The elements represented by the two

2335 sequences share the same parent in the document tree and the element

2336 represented by the first sequence immediately precedes the element

2337 represented by the second one.</p>

2338

2339 <div class="example">

2340 <p>Examples:</p>

2341 <p>The following selector represents a <code>p</code> element

2342 immediately following a <code>math</code> element:</p>

2343 <pre>math + p</pre>

2344 <p>The following selector is conceptually similar to the one in the

2345 previous example, except that it adds an attribute selector — it

2346 adds a constraint to the <code>h1</code> element, that it must have

2347 <code>class="opener"</code>:</p>

2348 <pre>h1.opener + h2</pre>

2349 </div>

2350

2351

2352 <h4><a name=general-sibling-combinators>8.3.2. General sibling combinator</a></h 4>

2353

2354 <p>The general sibling combinator is made of the "tilde"

2355 (U+007E, <code>~</code>) character that separates two sequences of

2356 simple selectors. The elements represented by the two sequences share

2357 the same parent in the document tree and the element represented by

2358 the first sequence precedes (not necessarily immediately) the element

2359 represented by the second one.</p>

2360

2361 <div class="example">

2362 <p>Example:</p>

2363 <pre>h1 ~ pre</pre>

2364 <p>represents a <code>pre</code> element following an <code>h1</code>. It

2365 is a correct and valid, but partial, description of:</p>

2366 <pre><h1>Definition of the function a</h1>

2367 <p>Function a(x) has to be applied to all figures in the table.</p>

2368 <pre>function a(x) = 12x/13.5</pre></pre>

2369 </div>

2370

2371 <h2><a name=specificity>9. Calculating a selector's specificity</a></h2>

2372

2373 <p>A selector's specificity is calculated as follows:</p>

2374

2375 <ul>

2376 <li>count the number of ID selectors in the selector (= a)</li>

2377 <li>count the number of class selectors, attributes selectors, and pseudo-clas ses in the selector (= b)</li>

2378 <li>count the number of element names in the selector (= c)</li>

2379 <li>ignore pseudo-elements</li>

2380 </ul>

2381

2382 <p>Selectors inside <a href="#negation">the negation pseudo-class</a>

2383 are counted like any other, but the negation itself does not count as

2384 a pseudo-class.</p>

2385

2386 <p>Concatenating the three numbers a-b-c (in a number system with a

2387 large base) gives the specificity.</p>

2388

2389 <div class="example">

2390 <p>Examples:</p>

2391 <pre>* /* a=0 b=0 c=0 -> specificity = 0 */

2392 LI /* a=0 b=0 c=1 -> specificity = 1 */

2393 UL LI /* a=0 b=0 c=2 -> specificity = 2 */

2394 UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */

2395 H1 + [REL=up] / a=0 b=1 c=1 -> specificity = 11 */

2396 UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */

2397 LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */

2398 #x34y /* a=1 b=0 c=0 -> specificity = 100 */

2399 #s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */

2400 </pre>

2401 </div>

2402

2403 <p class="note"><strong>Note:</strong> the specificity of the styles

2404 specified in an HTML <code>style</code> attribute is described in CSS

2405 2.1. <a href="#refsCSS21">[CSS21]</a>.</p>

2406

2407 <h2><a name=w3cselgrammar>10. The grammar of Selectors</a></h2>

2408

2409 <h3><a name=grammar>10.1. Grammar</a></h3>

2410

2411 <p>The grammar below defines the syntax of Selectors. It is globally

2412 LL(1) and can be locally LL(2) (but note that most UA's should not use

2413 it directly, since it doesn't express the parsing conventions). The

2414 format of the productions is optimized for human consumption and some

2415 shorthand notations beyond Yacc (see <a href="#refsYACC">[YACC]</a>)

2416 are used:</p>

2417

2418 <ul>

2419 <li><b>*</b>: 0 or more

2420 <li><b>+</b>: 1 or more

2421 <li><b>?</b>: 0 or 1

2422 <li><b>\|</b>: separates alternatives

2423 <li><b>[ ]</b>: grouping </li>

2424 </ul>

2425

2426 <p>The productions are:</p>

2427

2428 <pre>selectors_group

2429 : selector [ COMMA S* selector ]*

2430 ;

2431

2432 selector

2433 : simple_selector_sequence [ combinator simple_selector_sequence ]*

2434 ;

2435

2436 combinator

2437 /* combinators can be surrounded by white space */

2438 : PLUS S* \| GREATER S* \| TILDE S* \| S+

2439 ;

2440

2441 simple_selector_sequence

2442 : [ type_selector \| universal ]

2443 [ HASH \| class \| attrib \| pseudo \| negation ]*

2444 \| [ HASH \| class \| attrib \| pseudo \| negation ]+

2445 ;

2446

2447 type_selector

2448 : [ namespace_prefix ]? element_name

2449 ;

2450

2451 namespace_prefix

2452 : [ IDENT \| '*' ]? '\|'

2453 ;

2454

2455 element_name

2456 : IDENT

2457 ;

2458

2459 universal

2460 : [ namespace_prefix ]? '*'

2461 ;

2462

2463 class

2464 : '.' IDENT

2465 ;

2466

2467 attrib

2468 : '[' S* [ namespace_prefix ]? IDENT S*

2469 [ [ PREFIXMATCH \|

2470 SUFFIXMATCH \|

2471 SUBSTRINGMATCH \|

2472 '=' \|

2473 INCLUDES \|

2474 DASHMATCH ] S* [ IDENT \| STRING ] S*

2475 ]? ']'

2476 ;

2477

2478 pseudo

2479 /* '::' starts a pseudo-element, ':' a pseudo-class */

2480 /* Exceptions: :first-line, :first-letter, :before and :after. */

2481 /* Note that pseudo-elements are restricted to one per selector and */

2482 /* occur only in the last simple_selector_sequence. */

2483 : ':' ':'? [ IDENT \| functional_pseudo ]

2484 ;

2485

2486 functional_pseudo

2487 : FUNCTION S* expression ')'

2488 ;

2489

2490 expression

2491 /* In CSS3, the expressions are identifiers, strings, */

2492 /* or of the form "an+b" */

2493 : [ [ PLUS \| '-' \| DIMENSION \| NUMBER \| STRING \| IDENT ] S* ]+

2494 ;

2495

2496 negation

2497 : NOT S* negation_arg S* ')'

2498 ;

2499

2500 negation_arg

2501 : type_selector \| universal \| HASH \| class \| attrib \| pseudo

2502 ;</pre>

2503

2504

2505 <h3><a name=lex>10.2. Lexical scanner</a></h3>

2506

2507 <p>The following is the <a name=x3>tokenizer</a>, written in Flex (see

2508 <a href="#refsFLEX">[FLEX]</a>) notation. The tokenizer is

2509 case-insensitive.</p>

2510

2511 <p>The two occurrences of "\377" represent the highest character

2512 number that current versions of Flex can deal with (decimal 255). They

2513 should be read as "\4177777" (decimal 1114111), which is the highest

2514 possible code point in Unicode/ISO-10646. <a

2515 href="#refsUNICODE">[UNICODE]</a></p>

2516

2517 <pre>%option case-insensitive

2518

2519 ident [-]?{nmstart}{nmchar}*

2520 name {nmchar}+

2521 nmstart [_a-z]\|{nonascii}\|{escape}

2522 nonascii [^\0-\177]

2523 unicode \\[0-9a-f]{1,6}(\r\n\|[ \n\r\t\f])?

2524 escape {unicode}\|\\[^\n\r\f0-9a-f]

2525 nmchar [_a-z0-9-]\|{nonascii}\|{escape}

2526 num [0-9]+\|[0-9]*\.[0-9]+

2527 string {string1}\|{string2}

2528 string1 \"([^\n\r\f\\"]\|\\{nl}\|{nonascii}\|{escape})*\"

2529 string2 \'([^\n\r\f\\']\|\\{nl}\|{nonascii}\|{escape})*\'

2530 invalid {invalid1}\|{invalid2}

2531 invalid1 \"([^\n\r\f\\"]\|\\{nl}\|{nonascii}\|{escape})*

2532 invalid2 \'([^\n\r\f\\']\|\\{nl}\|{nonascii}\|{escape})*

2533 nl \n\|\r\n\|\r\|\f

2534 w [ \t\r\n\f]*

2535

2536 %%

2537

2538 [ \t\r\n\f]+ return S;

2539

2540 "~=" return INCLUDES;

2541 "\|=" return DASHMATCH;

2542 "^=" return PREFIXMATCH;

2543 "$=" return SUFFIXMATCH;

2544 "*=" return SUBSTRINGMATCH;

2545 {ident} return IDENT;

2546 {string} return STRING;

2547 {ident}"(" return FUNCTION;

2548 {num} return NUMBER;

2549 "#"{name} return HASH;

2550 {w}"+" return PLUS;

2551 {w}">" return GREATER;

2552 {w}"," return COMMA;

2553 {w}"~" return TILDE;

2554 ":not(" return NOT;

2555 @{ident} return ATKEYWORD;

2556 {invalid} return INVALID;

2557 {num}% return PERCENTAGE;

2558 {num}{ident} return DIMENSION;

2559 "<!--" return CDO;

2560 "-->" return CDC;

2561

2562 "url("{w}{string}{w}")" return URI;

2563 "url("{w}([!#$%&-~]\|{nonascii}\|{escape}){w}")" return URI;

2564 U\+[0-9a-f?]{1,6}(-[0-9a-f]{1,6})? return UNICODE_RANGE;

2565

2566 \/\[^]\+([^/][^]\+)\/ / ignore comments */

2567

2568 . return *yytext;</pre>

2569

2570

2571

2572 <h2><a name=downlevel>11. Namespaces and down-level clients</a></h2>

2573

2574 <p>An important issue is the interaction of CSS selectors with XML

2575 documents in web clients that were produced prior to this

2576 document. Unfortunately, due to the fact that namespaces must be

2577 matched based on the URI which identifies the namespace, not the

2578 namespace prefix, some mechanism is required to identify namespaces in

2579 CSS by their URI as well. Without such a mechanism, it is impossible

2580 to construct a CSS style sheet which will properly match selectors in

2581 all cases against a random set of XML documents. However, given

2582 complete knowledge of the XML document to which a style sheet is to be

2583 applied, and a limited use of namespaces within the XML document, it

2584 is possible to construct a style sheet in which selectors would match

2585 elements and attributes correctly.</p>

2586

2587 <p>It should be noted that a down-level CSS client will (if it

2588 properly conforms to CSS forward compatible parsing rules) ignore all

2589 <code>@namespace</code> at-rules, as well as all style rules that make

2590 use of namespace qualified element type or attribute selectors. The

2591 syntax of delimiting namespace prefixes in CSS was deliberately chosen

2592 so that down-level CSS clients would ignore the style rules rather

2593 than possibly match them incorrectly.</p>

2594

2595 <p>The use of default namespaces in CSS makes it possible to write

2596 element type selectors that will function in both namespace aware CSS

2597 clients as well as down-level clients. It should be noted that

2598 down-level clients may incorrectly match selectors against XML

2599 elements in other namespaces.</p>

2600

2601 <p>The following are scenarios and examples in which it is possible to

2602 construct style sheets which would function properly in web clients

2603 that do not implement this proposal.</p>

2604

2605 <ol>

2606 <li>

2607

2608 <p>The XML document does not use namespaces.</p>

2609

2610 <ul>

2611

2612 <li>In this case, it is obviously not necessary to declare or use

2613 namespaces in the style sheet. Standard CSS element type and

2614 attribute selectors will function adequately in a down-level

2615 client.</li>

2616

2617 <li>In a CSS namespace aware client, the default behavior of

2618 element selectors matching without regard to namespace will

2619 function properly against all elements, since no namespaces are

2620 present. However, the use of specific element type selectors that

2621 match only elements that have no namespace ("<code>\|name</code>")

2622 will guarantee that selectors will match only XML elements that do

2623 not have a declared namespace. </li>

2624

2625 </ul>

2626

2627 </li>

2628

2629 <li>

2630

2631 <p>The XML document defines a single, default namespace used

2632 throughout the document. No namespace prefixes are used in element

2633 names.</p>

2634

2635 <ul>

2636

2637 <li>In this case, a down-level client will function as if

2638 namespaces were not used in the XML document at all. Standard CSS

2639 element type and attribute selectors will match against all

2640 elements. </li>

2641

2642 </ul>

2643

2644 </li>

2645

2646 <li>

2647

2648 <p>The XML document does <b>not</b> use a default namespace, all

2649 namespace prefixes used are known to the style sheet author, and

2650 there is a direct mapping between namespace prefixes and namespace

2651 URIs. (A given prefix may only be mapped to one namespace URI

2652 throughout the XML document; there may be multiple prefixes mapped

2653 to the same URI).</p>

2654

2655 <ul>

2656

2657 <li>In this case, the down-level client will view and match

2658 element type and attribute selectors based on their fully

2659 qualified name, not the local part as outlined in the <a

2660 href="#typenmsp">Type selectors and Namespaces</a> section. CSS

2661 selectors may be declared using an escaped colon "<code>\:</code>"

2662 to describe the fully qualified names, e.g.

2663 "<code>html\:h1</code>" will match

2664 <code><html:h1></code>. Selectors using the qualified name

2665 will only match XML elements that use the same prefix. Other

2666 namespace prefixes used in the XML that are mapped to the same URI

2667 will not match as expected unless additional CSS style rules are

2668 declared for them.</li>

2669

2670 <li>Note that selectors declared in this fashion will

2671 <em>only</em> match in down-level clients. A CSS namespace aware

2672 client will match element type and attribute selectors based on

2673 the name's local part. Selectors declared with the fully

2674 qualified name will not match (unless there is no namespace prefix

2675 in the fully qualified name).</li>

2676

2677 </ul>

2678

2679 </li>

2680

2681 </ol>

2682

2683 <p>In other scenarios: when the namespace prefixes used in the XML are

2684 not known in advance by the style sheet author; or a combination of

2685 elements with no namespace are used in conjunction with elements using

2686 a default namespace; or the same namespace prefix is mapped to

2687 <em>different</em> namespace URIs within the same document, or in

2688 different documents; it is impossible to construct a CSS style sheet

2689 that will function properly against all elements in those documents,

2690 unless, the style sheet is written using a namespace URI syntax (as

2691 outlined in this document or similar) and the document is processed by

2692 a CSS and XML namespace aware client.</p>

2693

2694 <h2><a name=profiling>12. Profiles</a></h2>

2695

2696 <p>Each specification using Selectors must define the subset of W3C

2697 Selectors it allows and excludes, and describe the local meaning of

2698 all the components of that subset.</p>

2699

2700 <p>Non normative examples:

2701

2702 <div class="profile">

2703 <table class="tprofile">

2704 <tbody>

2705 <tr>

2706 <th class="title" colspan=2>Selectors profile</th></tr>

2707 <tr>

2708 <th>Specification</th>

2709 <td>CSS level 1</td></tr>

2710 <tr>

2711 <th>Accepts</th>

2712 <td>type selectors<br>class selectors<br>ID selectors<br>:link,

2713 :visited and :active pseudo-classes<br>descendant combinator

2714 <br>::first-line and ::first-letter pseudo-elements</td></tr>

2715 <tr>

2716 <th>Excludes</th>

2717 <td>

2718

2719 <p>universal selector<br>attribute selectors<br>:hover and :focus

2720 pseudo-classes<br>:target pseudo-class<br>:lang() pseudo-class<br>all UI

2721 element states pseudo-classes<br>all structural

2722 pseudo-classes<br>negation pseudo-class<br>all

2723 UI element fragments pseudo-elements<br>::before and ::after

2724 pseudo-elements<br>child combinators<br>sibling combinators

2725

2726 <p>namespaces</td></tr>

2727 <tr>

2728 <th>Extra constraints</th>

2729 <td>only one class selector allowed per sequence of simple

2730 selectors</td></tr></tbody></table><br><br>

2731 <table class="tprofile">

2732 <tbody>

2733 <tr>

2734 <th class="title" colspan=2>Selectors profile</th></tr>

2735 <tr>

2736 <th>Specification</th>

2737 <td>CSS level 2</td></tr>

2738 <tr>

2739 <th>Accepts</th>

2740 <td>type selectors<br>universal selector<br>attribute presence and

2741 values selectors<br>class selectors<br>ID selectors<br>:link, :visited,

2742 :active, :hover, :focus, :lang() and :first-child pseudo-classes

2743 <br>descendant combinator<br>child combinator<br>adjacent sibling

2744 combinator<br>::first-line and ::first-letter pseudo-elements<br>::before

2745 and ::after pseudo-elements</td></tr>

2746 <tr>

2747 <th>Excludes</th>

2748 <td>

2749

2750 <p>content selectors<br>substring matching attribute

2751 selectors<br>:target pseudo-classes<br>all UI element

2752 states pseudo-classes<br>all structural pseudo-classes other

2753 than :first-child<br>negation pseudo-class<br>all UI element

2754 fragments pseudo-elements<br>general sibling combinators

2755

2756 <p>namespaces</td></tr>

2757 <tr>

2758 <th>Extra constraints</th>

2759 <td>more than one class selector per sequence of simple selectors (CSS1

2760 constraint) allowed</td></tr></tbody></table>

2761

2762 <p>In CSS, selectors express pattern matching rules that determine which style

2763 rules apply to elements in the document tree.

2764

2765 <p>The following selector (CSS level 2) will <b>match</b> all anchors <code>a</c ode>

2766 with attribute <code>name</code> set inside a section 1 header <code>h1</code>:

2767 <pre>h1 a[name]</pre>

2768

2769 <p>All CSS declarations attached to such a selector are applied to elements

2770 matching it. </div>

2771

2772 <div class="profile">

2773 <table class="tprofile">

2774 <tbody>

2775 <tr>

2776 <th class="title" colspan=2>Selectors profile</th></tr>

2777 <tr>

2778 <th>Specification</th>

2779 <td>STTS 3</td>

2780 </tr>

2781 <tr>

2782 <th>Accepts</th>

2783 <td>

2784

2785 <p>type selectors<br>universal selectors<br>attribute selectors<br>class

2786 selectors<br>ID selectors<br>all structural pseudo-classes<br>

2787 all combinators

2788

2789 <p>namespaces</td></tr>

2790 <tr>

2791 <th>Excludes</th>

2792 <td>non-accepted pseudo-classes<br>pseudo-elements<br></td></tr>

2793 <tr>

2794 <th>Extra constraints</th>

2795 <td>some selectors and combinators are not allowed in fragment

2796 descriptions on the right side of STTS declarations.</td></tr></tbody></ta ble>

2797 <form>

2798 <input type="text" name="test1"/>

2799 <input type="text" name="foo"/>

2800 <input type="text" name="foo"/>

2801 <input type="text" name="foo"/>

2802 <input type="text" name="foo"/>

2803 <input type="text" name="foo"/>

2804 <input type="text" name="foo"/>

2805 <input type="text" name="foo"/>

2806 <input type="text" name="foo"/>

2807 <input type="text" name="foo"/>

2808 <input type="text" name="foo"/>

2809 <input type="text" name="foo"/>

2810 <input type="text" name="foo"/>

2811 <input type="text" name="foo"/>

2812 <input type="text" name="foo"/>

2813 <input type="text" name="foo"/>

2814 <input type="text" name="foo"/>

2815 <input type="text" name="foo"/>

2816 <input type="text" name="foo"/>

2817 <input type="text" name="foo"/>

2818 <input type="text" name="foo"/>

2819 <input type="text" name="foo"/>

2820 <input type="text" name="foo"/>

2821 <input type="text" name="foo"/>

2822 <input type="text" name="foo"/>

2823 </form>

2824

2825 <p>Selectors can be used in STTS 3 in two different

2826 manners:

2827 <ol>

2828 <li>a selection mechanism equivalent to CSS selection mechanism: declarations

2829 attached to a given selector are applied to elements matching that selector,

2830 <li>fragment descriptions that appear on the right side of declarations.

2831 </li></ol></div>

2832

2833 <h2><a name=Conformance></a>13. Conformance and requirements</h2>

2834

2835 <p>This section defines conformance with the present specification only.

2836

2837 <p>The inability of a user agent to implement part of this specification due to

2838 the limitations of a particular device (e.g., non interactive user agents will

2839 probably not implement dynamic pseudo-classes because they make no sense without

2840 interactivity) does not imply non-conformance.

2841

2842 <p>All specifications reusing Selectors must contain a <a

2843 href="#profiling">Profile</a> listing the

2844 subset of Selectors it accepts or excludes, and describing the constraints

2845 it adds to the current specification.

2846

2847 <p>Invalidity is caused by a parsing error, e.g. an unrecognized token or a toke n

2848 which is not allowed at the current parsing point.

2849

2850 <p>User agents must observe the rules for handling parsing errors:

2851 <ul>

2852 <li>a simple selector containing an undeclared namespace prefix is invalid</li >

2853 <li>a selector containing an invalid simple selector, an invalid combinator

2854 or an invalid token is invalid. </li>

2855 <li>a group of selectors containing an invalid selector is invalid.</li>

2856 </ul>

2857

2858 <p class="foo test1 bar">Specifications reusing Selectors must define how to han dle parsing

2859 errors. (In the case of CSS, the entire rule in which the selector is

2860 used is dropped.)</p>

2861

2862 <!-- Apparently all these references are out of date:

2863 <p>Implementations of this specification must behave as

2864 "recipients of text data" as defined by <a href="#refsCWWW">[CWWW]</a>

2865 when parsing selectors and attempting matches. (In particular,

2866 implementations must assume the data is normalized and must not

2867 normalize it.) Normative rules for matching strings are defined in

2868 <a href="#refsCWWW">[CWWW]</a> and <a

2869 href="#refsUNICODE">[UNICODE]</a> and apply to implementations of this

2870 specification.</p>-->

2871

2872 <h2><a name=Tests></a>14. Tests</h2>

2873

2874 <p>This specification has <a

2875 href="http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/">a test

2876 suite</a> allowing user agents to verify their basic conformance to

2877 the specification. This test suite does not pretend to be exhaustive

2878 and does not cover all possible combined cases of Selectors.</p>

2879

2880 <h2><a name=ACKS></a>15. Acknowledgements</h2>

2881

2882 <p>The CSS working group would like to thank everyone who has sent

2883 comments on this specification over the years.</p>

2884

2885 <p>The working group would like to extend special thanks to Donna

2886 McManus, Justin Baker, Joel Sklar, and Molly Ives Brower who perfermed

2887 the final editorial review.</p>

2888

2889 <h2><a name=references>16. References</a></h2>

2890

2891 <dl class="refs">

2892

2893 <dt>[CSS1]

2894 <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

2895 <dd>(<code><a href="http://www.w3.org/TR/REC-CSS1">http://www.w3.org/TR/REC-CS S1</a></code>)

2896

2897 <dt>[CSS21]

2898 <dd><a name=refsCSS21></a> Bert Bos, Tantek Çelik, Ian Hickson, H&aring ;kon Wium Lie, editors; "<cite>Cascading Style Sheets, level 2 revision 1</cite> ", W3C Working Draft, 13 June 2005

2899 <dd>(<code><a href="http://www.w3.org/TR/CSS21">http://www.w3.org/TR/CSS21</a> </code>)

2900

2901 <dt>[CWWW]

2902 <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

2903 <dd>(<code><a href="http://www.w3.org/TR/charmod/">http://www.w3.org/TR/charmo d/</a></code>)

2904

2905 <dt>[FLEX]

2906 <dd><a name="refsFLEX"></a> "<cite>Flex: The Lexical Scanner Generator</cite>" , Version 2.3.7, ISBN 1882114213

2907

2908 <dt>[HTML4]

2909 <dd><a name="refsHTML4"></a> Dave Ragget, Arnaud Le Hors, Ian Jacobs, editors; "<cite>HTML 4.01 Specification</cite>", W3C Recommendation, 24 December 1999

2910 <dd>(<a href="http://www.w3.org/TR/html4/"><code>http://www.w3.org/TR/html4/</ code></a>)

2911

2912 <dt>[MATH]

2913 <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

2914 <dd>(<code><a href="http://www.w3.org/TR/REC-MathML/">http://www.w3.org/TR/REC -MathML/</a></code>)

2915

2916 <dt>[RFC3066]

2917 <dd><a name="refsRFC3066"></a> H. Alvestrand; "<cite>Tags for the Identificati on of Languages</cite>", Request for Comments 3066, January 2001

2918 <dd>(<a href="http://www.ietf.org/rfc/rfc3066.txt"><code>http://www.ietf.org/r fc/rfc3066.txt</code></a>)

2919

2920 <dt>[STTS]

2921 <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

2922 <dd>(<code><a href="http://www.w3.org/TR/NOTE-STTS3">http://www.w3.org/TR/NOTE -STTS3</a></code>)

2923

2924 <dt>[SVG]

2925 <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

2926 <dd>(<code><a href="http://www.w3.org/TR/SVG/">http://www.w3.org/TR/SVG/</a></ code>)

2927

2928 <dt>[UNICODE]</dt>

2929 <dd><a name="refsUNICODE"></a> <cite><a

2930 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>.

2931 <dd>(<code><a href="http://www.unicode.org/versions/">http://www.unicode.org/v ersions/</a></code>)</dd>

2932

2933 <dt>[XML10]

2934 <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

2935 <dd>(<a href="http://www.w3.org/TR/REC-xml/"><code>http://www.w3.org/TR/REC-xm l/</code></a>)

2936

2937 <dt>[XMLNAMES]

2938 <dd><a name="refsXMLNAMES"></a> Tim Bray, Dave Hollander, Andrew Layman, edito rs; "<cite>Namespaces in XML</cite>", W3C Recommendation, 14 January 1999

2939 <dd>(<a href="http://www.w3.org/TR/REC-xml-names/"><code>http://www.w3.org/TR/ REC-xml-names/</code></a>)

2940

2941 <dt>[YACC]

2942 <dd><a name="refsYACC"></a> S. C. Johnson; "<cite>YACC — Yet another com piler compiler</cite>", Technical Report, Murray Hill, 1975

2943

2944 </dl>

2945 </body>

2946 </html>

OLD	NEW

« no previous file with comments | « samples/third_party/dromaeo/web/tests/RunnerSuite.dart ('k') | samples/third_party/dromaeo/web/tests/dom-attr-html.dart » ('j') | no next file with comments »