client/dom/benchmarks/dromaeo/tests/dom-query.html - Issue 9374026: Move dromaeo to third_party

Side by Side Diff: client/dom/benchmarks/dromaeo/tests/dom-query.html

Issue 9374026: Move dromaeo to third_party (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart

Patch Set: Moved Dromaeo to third party. Created 8 years, 10 months ago

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

Jump to:

View unified diff | Download patch | Annotate | Revision Log

OLD	NEW
	(Empty)
1 <html>

2 <head>

3 <script type="application/dart" src="dom-query.dart"></script>

4 </head>

5 <body>

6 <div class="head">

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

8

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

10

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

12

13 <dl>

14

15 <dt>This version:

16

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

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

19

20 <dt>Latest version:

21

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

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

24

25 <dt>Previous version:

26

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

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

29

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

31

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

33

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

35

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

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

38

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

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

41

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

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

44

45 </dl>

46

47 <p class="copyright"><a

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

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

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

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

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

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

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

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

56 <a

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

58 <a

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

60 <a

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

62 use</a> rules apply.

63

64 <hr title="Separator for header">

65

66 </div>

67

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

69

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

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

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

73

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

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

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

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

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

79 style properties to elements in the document. This document

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

81 extended selectors will be used by CSS level 3.

82

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

84

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

86

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

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

89

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

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

92 evaluating the expression across all the elements in a

93 subtree. <acronym title="Simple Tree Transformation

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

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

96

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

98

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

100 time of its publication. Other documents may supersede this

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

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

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

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

105

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

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

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

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

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

111

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

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

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

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

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

117

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

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

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

121 document is a revision of the <a

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

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

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

125 expected that this last call will proceed straight to Proposed

126 Recommendation stage since it is believed that interoperability will

127 be demonstrable.</p>

128

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

130 specification and return comments to the (<a

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

132 public mailing list <a

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

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

135 Members can also send comments directly to the CSS Working

136 Group.

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

138

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

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

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

142

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

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

145 The English version of this specification is the only normative

146 version.

147

148 <div class="subtoc">

149

150 <h2 id="testF10"><a name=contents>Table of contents</a></h2>

151

152 <ul class="toc">

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

154 <ul>

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

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

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

158 </ul>

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

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

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

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

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

164 <ul class="toc">

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

166 <ul class="toc">

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

168 </ul>

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

170 <ul>

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

172 </ul>

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

174 <ul class="toc">

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

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

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

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

179 </ul>

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

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

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

183 <ul class="toc">

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

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

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

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

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

189 <ul>

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

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

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

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

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

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

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

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

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

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

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

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

202 </ul>

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

204 </ul>

205 </li>

206 </ul>

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

208 <ul>

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

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

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

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

213 </ul>

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

215 <ul class="toc">

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

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

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

219 <ul class="toc">

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

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

222 </ul>

223 </li>

224 </ul>

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

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

227 <ul class="toc">

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

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

230 </ul>

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

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

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

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

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

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

237 </ul>

238

239 </div>

240

241 <h2 id="testA10"><a name=context>1. Introduction</a></h2>

242

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

244

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

246 particular limitations or rules specific to CSS. In this

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

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

249

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

251

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

253 examples, notes, and sections explicitly marked as

254 non-normative.</p>

255

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

257

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

259

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

261 Selectors are:

262

263 <ul>

264

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

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

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

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

269 the components of this sequence</li>

270

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

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

273

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

275

276 <li>new simple selectors including substring matching attribute

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

278

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

280 for pseudo-elements</li>

281

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

283

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

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

286 each specification</li>

287

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

289 specification; other specifications can now refer to this document

290 independently of CSS</li>

291

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

293

294 </ul>

295

296 <h2 id="testB10"><a name=selectors></a>2. Selectors</h2>

297

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

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

300

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

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

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

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

305

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

307 representations.</p>

308

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

310

311 <table class="selectorsReview">

312 <thead>

313 <tr>

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

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

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

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

318 <tbody>

319 <tr>

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

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

322 <td class="described"><a

323 href="#universal-selector">Universal

324 selector</a></td>

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

326 <tr>

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

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

329 <td class="described"><a

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

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

332 <tr>

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

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

335 <td class="described"><a

336 href="#attribute-selectors">Attribute

337 selectors</a></td>

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

339 <tr>

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

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

342 equal to "bar"</td>

343 <td class="described"><a

344 href="#attribute-selectors">Attribute

345 selectors</a></td>

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

347 <tr>

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

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

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

351 <td class="described"><a

352 href="#attribute-selectors">Attribute

353 selectors</a></td>

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

355 <tr>

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

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

358 with the string "bar"</td>

359 <td class="described"><a

360 href="#attribute-selectors">Attribute

361 selectors</a></td>

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

363 <tr>

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

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

366 with the string "bar"</td>

367 <td class="described"><a

368 href="#attribute-selectors">Attribute

369 selectors</a></td>

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

371 <tr>

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

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

374 substring "bar"</td>

375 <td class="described"><a

376 href="#attribute-selectors">Attribute

377 selectors</a></td>

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

379 <tr>

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

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

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

383 <td class="described"><a

384 href="#attribute-selectors">Attribute

385 selectors</a></td>

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

387 <tr>

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

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

390 <td class="described"><a

391 href="#structural-pseudos">Structural

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

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

394 <tr>

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

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

397 <td class="described"><a

398 href="#structural-pseudos">Structural

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

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

401 <tr>

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

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

404 from the last one</td>

405 <td class="described"><a

406 href="#structural-pseudos">Structural

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

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

409 <tr>

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

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

412 <td class="described"><a

413 href="#structural-pseudos">Structural

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

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

416 <tr>

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

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

419 from the last one</td>

420 <td class="described"><a

421 href="#structural-pseudos">Structural

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

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

424 <tr>

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

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

427 <td class="described"><a

428 href="#structural-pseudos">Structural

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

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

431 <tr>

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

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

434 <td class="described"><a

435 href="#structural-pseudos">Structural

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

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

438 <tr>

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

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

441 <td class="described"><a

442 href="#structural-pseudos">Structural

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

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

445 <tr>

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

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

448 <td class="described"><a

449 href="#structural-pseudos">Structural

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

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

452 <tr>

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

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

455 <td class="described"><a

456 href="#structural-pseudos">Structural

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

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

459 <tr>

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

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

462 <td class="described"><a

463 href="#structural-pseudos">Structural

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

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

466 <tr>

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

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

469 nodes)</td>

470 <td class="described"><a

471 href="#structural-pseudos">Structural

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

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

474 <tr>

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

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

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

478 (:visited)</td>

479 <td class="described"><a

480 href="#link">The link

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

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

483 <tr>

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

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

486 <td class="described"><a

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

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

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

490 <tr>

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

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

493 <td class="described"><a

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

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

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

497 <tr>

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

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

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

501 <td class="described"><a

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

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

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

505 <tr>

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

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

508 disabled</td>

509 <td class="described"><a

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

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

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

513 <tr>

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

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

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

517 <td class="described"><a

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

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

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

521 <tr>

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

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

524 <td class="described"><a

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

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

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

528 <tr>

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

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

531 <td class="described"><a

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

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

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

535 <tr>

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

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

538 selected/highlighted by the user</td>

539 <td class="described"><a

540 href="#UIfragments">The UI element

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

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

543 <tr>

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

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

546 <td class="described"><a

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

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

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

550 <tr>

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

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

553 <td class="described"><a

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

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

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

557 <tr>

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

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

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

561 <td class="described"><a

562 href="#class-html">Class

563 selectors</a></td>

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

565 <tr>

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

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

568 <td class="described"><a

569 href="#id-selectors">ID

570 selectors</a></td>

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

572 <tr>

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

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

575 <td class="described"><a

576 href="#negation">Negation

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

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

579 <tr>

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

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

582 <td class="described"><a

583 href="#descendant-combinators">Descendant

584 combinator</a></td>

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

586 <tr>

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

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

589 <td class="described"><a

590 href="#child-combinators">Child

591 combinator</a></td>

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

593 <tr>

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

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

596 <td class="described"><a

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

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

599 <tr>

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

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

602 <td class="described"><a

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

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

605

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

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

608 column.</p>

609

610 <h2 id="testC10"><a name=casesens>3. Case sensitivity</a></h2>

611

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

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

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

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

616

617 <h2 id="testD10"><a name=selector-syntax>4. Selector syntax</a></h2>

618

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

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

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

622

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

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

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

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

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

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

629

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

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

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

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

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

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

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

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

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

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

640 sequence of simple selectors.</p>

641

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

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

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

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

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

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

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

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

650 never part of white space.</p>

651

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

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

654 selector consisting of a single sequence of simple selectors

655 represents any element satisfying its requirements. Prepending another

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

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

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

659 simple selectors.</p>

660

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

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

663 selector</a>.</p>

664

665 <h2 id="testE10"><a name=grouping>5. Groups of selectors</a></h2>

666

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

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

669

670 <div class="example">

671 <p>CSS examples:</p>

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

673 declarations into one. Thus,</p>

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

675 h2 { font-family: sans-serif }

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

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

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

679 </div>

680

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

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

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

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

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

686 heading rules would be invalidated.</p>

687

688

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

690

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

692

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

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

695 type in the document tree.</p>

696

697 <div class="example">

698 <p>Example:</p>

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

700 <pre>h1</pre>

701 </div>

702

703

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

705

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

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

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

709 separated by the namespace separator "vertical bar"

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

711

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

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

714

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

716 the selector represents elements in any namespace (including elements

717 with no namespace).</p>

718

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

720 namespace separator), represent elements without regard to the

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

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

723 the selector will represent only elements in the default

724 namespace.</p>

725

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

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

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

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

730 in the General Syntax module.</p>

731

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

733 against the <a

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

735 of the element's <a

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

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

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

739

740 <p>In summary:</p>

741

742 <dl>

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

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

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

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

747 declared namespace</dd>

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

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

750 <dt><code>E</code></dt>

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

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

753 </dl>

754

755 <div class="example">

756 <p>CSS examples:</p>

757

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

759 foo\|h1 { color: blue }

760 foo\|* { color: yellow }

761 \|h1 { color: red }

762 *\|h1 { color: green }

763 h1 { color: green }</pre>

764

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

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

767

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

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

770

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

772 any declared namespace.</p>

773

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

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

776

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

778 namespace has been defined.</p>

779

780 </div>

781

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

783

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

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

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

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

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

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

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

791

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

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

794

795 <div class="example">

796 <p>Examples:</p>

797 <ul>

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

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

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

801 </ul>

802 </div>

803

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

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

806 omitted.</p>

807

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

809

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

811 is used as follows:</p>

812

813 <dl>

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

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

816 <dt><code>\|</code></dt>

817 <dd>all elements</dd>

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

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

820 <dt><code>*</code></dt>

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

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

823 </dl>

824

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

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

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

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

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

830

831

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

833

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

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

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

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

838 attribute selector.</p>

839

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

841 selectors</a></h4>

842

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

844

845 <dl>

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

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

848 the attribute.</dd>

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

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

851 "val".</dd>

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

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

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

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

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

857 spaces).</dd>

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

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

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

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

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

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

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

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

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

867 </dl>

868

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

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

871 the document language.</p>

872

873 <div class="example">

874

875 <p>Examples:</p>

876

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

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

879 value:</p>

880

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

882

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

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

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

886

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

888

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

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

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

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

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

894 "Columbus":</p>

895

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

897

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

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

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

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

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

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

904

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

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

907

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

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

910

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

912

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

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

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

916

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

918

919 <p>Similarly, the following selectors represents a

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

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

922

923 <pre>DIALOGUE[character=romeo]

924 DIALOGUE[character=juliet]</pre>

925

926 </div>

927

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

929 selectors</h4>

930

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

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

933

934 <dl>

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

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

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

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

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

940 the suffix "val".</dd>

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

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

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

944 </dl>

945

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

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

948 document language.</p>

949

950 <div class="example">

951 <p>Examples:</p>

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

953 image:</p>

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

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

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

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

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

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

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

961 </div>

962

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

964

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

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

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

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

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

970 apply to attributes, therefore attribute selectors without a namespace

971 component apply only to attributes that have no declared namespace

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

973 namespace prefix indicating that the selector is to match all

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

975

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

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

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

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

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

981

982 <div class="example">

983 <p>CSS examples:</p>

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

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

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

987 [\|att] { color: green }

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

989

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

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

992 value "val".</p>

993

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

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

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

997

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

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

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

1001

1002 </div>

1003

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

1005

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

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

1008 elsewhere, but cannot always be selected by attribute

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

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

1011

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

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

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

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

1016

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

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

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

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

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

1022

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

1024 choose to ignore external subsets.</p>

1025

1026 <div class="example">

1027 <p>Example:</p>

1028

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

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

1031

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

1033

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

1035

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

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

1038

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

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

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

1042

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

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

1045

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

1047 more specific than the tag

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

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

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

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

1052 cases' style rules.</p>

1053

1054 </div>

1055

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

1057

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

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

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

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

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

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

1064

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

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

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

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

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

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

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

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

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

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

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

1076

1077 <div class="example">

1078 <p>CSS examples:</p>

1079

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

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

1082

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

1084

1085 <p>or just</p>

1086

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

1088

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

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

1091

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

1093

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

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

1096

1097 <pre><H1>Not green</H1>

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

1099

1100 </div>

1101

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

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

1104

1105 <div class="example">

1106

1107 <p>CSS example:</p>

1108

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

1110 has been assigned a list of <a

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

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

1113

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

1115

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

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

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

1119

1120 </div>

1121

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

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

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

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

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

1127 practice since the structural elements of a document language often

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

1129 not.</p>

1130

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

1132 class attributes, their values must be concatenated with spaces

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

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

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

1136 this specification.</p>

1137

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

1139

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

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

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

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

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

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

1146 may name ID attributes differently, but the same restriction

1147 applies.</p>

1148

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

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

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

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

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

1154 identifier.</p>

1155

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

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

1158 information hard-coded or ask the user.

1159

1160 <div class="example">

1161 <p>Examples:</p>

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

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

1164 <pre>h1#chapter1</pre>

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

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

1167 <pre>#chapter1</pre>

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

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

1170 <pre>*#z98y</pre>

1171 </div>

1172

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

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

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

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

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

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

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

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

1181 should use normal attribute selectors instead:

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

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

1184

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

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

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

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

1189

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

1191

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

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

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

1195

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

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

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

1199

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

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

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

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

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

1205 others can be applied simultaneously to the same

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

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

1208 document.</p>

1209

1210

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

1212

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

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

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

1216

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

1218 document tree.</p>

1219

1220

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

1222

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

1224 previously visited ones. Selectors

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

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

1227

1228 <ul>

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

1230 not yet been visited.</li>

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

1232 been visited by the user. </li>

1233 </ul>

1234

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

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

1237

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

1239

1240 <div class="example">

1241

1242 <p>Example:</p>

1243

1244 <p>The following selector represents links carrying class

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

1246

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

1248

1249 </div>

1250

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

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

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

1254

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

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

1257 and unvisited links differently.</p>

1258

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

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

1261

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

1263 to user actions. Selectors provides

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

1265 acting on.</p>

1266

1267 <ul>

1268

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

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

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

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

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

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

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

1276 user agents that support <a

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

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

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

1280

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

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

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

1284

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

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

1287 input). </li>

1288

1289 </ul>

1290

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

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

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

1294

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

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

1297

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

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

1300

1301 <div class="example">

1302 <p>Examples:</p>

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

1304 a:visited /* visited links */

1305 a:hover /* user hovers */

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

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

1308 <pre>a:focus

1309 a:focus:hover</pre>

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

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

1312 </div>

1313

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

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

1316

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

1318

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

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

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

1322

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

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

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

1326 document:</p>

1327

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

1329

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

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

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

1333

1334 <div class="example">

1335 <p>Example:</p>

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

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

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

1339 URI.</p>

1340 </div>

1341

1342 <div class="example">

1343 <p>CSS example:</p>

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

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

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

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

1348 </div>

1349

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

1351

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

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

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

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

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

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

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

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

1360 the language.</p>

1361

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

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

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

1365 being either equal to, or a hyphen-separated substring of, the

1366 element's language value, in the same way as if performed by the <a

1367 href="#attribute-representation">'\|='</a> operator in attribute

1368 selectors. The identifier C does not have to be a valid language

1369 name.</p>

1370

1371 <p>C must not be empty. (If it is, the selector is invalid.)</p>

1372

1373 <p class="note"><strong>Note:</strong> It is recommended that

1374 documents and protocols indicate language using codes from RFC 3066 <a

1375 href="#refsRFC3066">[RFC3066]</a> or its successor, and by means of

1376 "xml:lang" attributes in the case of XML-based documents <a

1377 href="#refsXML10">[XML10]</a>. See <a

1378 href="http://www.w3.org/International/questions/qa-lang-2or3.html">

1379 "FAQ: Two-letter or three-letter language codes."</a></p>

1380

1381 <div class="example">

1382 <p>Examples:</p>

1383 <p>The two following selectors represent an HTML document that is in

1384 Belgian, French, or German. The two next selectors represent

1385 <code>q</code> quotations in an arbitrary element in Belgian, French,

1386 or German.</p>

1387 <pre>html:lang(fr-be)

1388 html:lang(de)

1389 :lang(fr-be) > q

1390 :lang(de) > q</pre>

1391 </div>

1392

1393 <h4><a name=UIstates>6.6.4. The UI element states pseudo-classes</a></h4>

1394

1395 <h5><a name=enableddisabled>The :enabled and :disabled pseudo-classes</a></h5>

1396

1397 <p>The <code>:enabled</code> pseudo-class allows authors to customize

1398 the look of user interface elements that are enabled — which the

1399 user can select or activate in some fashion (e.g. clicking on a button

1400 with a mouse). There is a need for such a pseudo-class because there

1401 is no way to programmatically specify the default appearance of say,

1402 an enabled <code>input</code> element without also specifying what it

1403 would look like when it was disabled.</p>

1404

1405 <p>Similar to <code>:enabled</code>, <code>:disabled</code> allows the

1406 author to specify precisely how a disabled or inactive user interface

1407 element should look.</p>

1408

1409 <p>Most elements will be neither enabled nor disabled. An element is

1410 enabled if the user can either activate it or transfer the focus to

1411 it. An element is disabled if it could be enabled, but the user cannot

1412 presently activate it or transfer focus to it.</p>

1413

1414

1415 <h5><a name=checked>The :checked pseudo-class</a></h5>

1416

1417 <p>Radio and checkbox elements can be toggled by the user. Some menu

1418 items are "checked" when the user selects them. When such elements are

1419 toggled "on" the <code>:checked</code> pseudo-class applies. The

1420 <code>:checked</code> pseudo-class initially applies to such elements

1421 that have the HTML4 <code>selected</code> and <code>checked</code>

1422 attributes as described in <a

1423 href="http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.2.1">Section

1424 17.2.1 of HTML4</a>, but of course the user can toggle "off" such

1425 elements in which case the <code>:checked</code> pseudo-class would no

1426 longer apply. While the <code>:checked</code> pseudo-class is dynamic

1427 in nature, and is altered by user action, since it can also be based

1428 on the presence of the semantic HTML4 <code>selected</code> and

1429 <code>checked</code> attributes, it applies to all media.

1430

1431

1432 <h5><a name=indeterminate>The :indeterminate pseudo-class</a></h5>

1433

1434 <div class="note">

1435

1436 <p>Radio and checkbox elements can be toggled by the user, but are

1437 sometimes in an indeterminate state, neither checked nor unchecked.

1438 This can be due to an element attribute, or DOM manipulation.</p>

1439

1440 <p>A future version of this specification may introduce an

1441 <code>:indeterminate</code> pseudo-class that applies to such elements.

1442 <!--While the <code>:indeterminate</code> pseudo-class is dynamic in

1443 nature, and is altered by user action, since it can also be based on

1444 the presence of an element attribute, it applies to all media.</p>

1445

1446 <p>Components of a radio-group initialized with no pre-selected choice

1447 are an example of :indeterminate state.--></p>

1448

1449 </div>

1450

1451

1452 <h4><a name=structural-pseudos>6.6.5. Structural pseudo-classes</a></h4>

1453

1454 <p>Selectors introduces the concept of <dfn>structural

1455 pseudo-classes</dfn> to permit selection based on extra information that lies in

1456 the document tree but cannot be represented by other simple selectors or

1457 combinators.

1458

1459 <p>Note that standalone pieces of PCDATA (text nodes in the DOM) are

1460 not counted when calculating the position of an element in the list of

1461 children of its parent. When calculating the position of an element in

1462 the list of children of its parent, the index numbering starts at 1.

1463

1464

1465 <h5><a name=root-pseudo>:root pseudo-class</a></h5>

1466

1467 <p>The <code>:root</code> pseudo-class represents an element that is

1468 the root of the document. In HTML 4, this is always the

1469 <code>HTML</code> element.

1470

1471

1472 <h5><a name=nth-child-pseudo>:nth-child() pseudo-class</a></h5>

1473

1474 <p>The

1475 <code>:nth-child(<var>a</var><code>n</code>+<var>b</var>)</code>

1476 pseudo-class notation represents an element that has

1477 <var>a</var><code>n</code>+<var>b</var>-1 siblings

1478 <strong>before</strong> it in the document tree, for a given positive

1479 integer or zero value of <code>n</code>, and has a parent element. In

1480 other words, this matches the <var>b</var>th child of an element after

1481 all the children have been split into groups of <var>a</var> elements

1482 each. For example, this allows the selectors to address every other

1483 row in a table, and could be used to alternate the color

1484 of paragraph text in a cycle of four. The <var>a</var> and

1485 <var>b</var> values must be zero, negative integers or positive

1486 integers. The index of the first child of an element is 1.

1487

1488 <p>In addition to this, <code>:nth-child()</code> can take

1489 '<code>odd</code>' and '<code>even</code>' as arguments instead.

1490 '<code>odd</code>' has the same signification as <code>2n+1</code>,

1491 and '<code>even</code>' has the same signification as <code>2n</code>.

1492

1493

1494 <div class="example">

1495 <p>Examples:</p>

1496 <pre>tr:nth-child(2n+1) /* represents every odd row of an HTML table */

1497 tr:nth-child(odd) /* same */

1498 tr:nth-child(2n) /* represents every even row of an HTML table */

1499 tr:nth-child(even) /* same */

1500

1501 /* Alternate paragraph colours in CSS */

1502 p:nth-child(4n+1) { color: navy; }

1503 p:nth-child(4n+2) { color: green; }

1504 p:nth-child(4n+3) { color: maroon; }

1505 p:nth-child(4n+4) { color: purple; }</pre>

1506 </div>

1507

1508 <p>When <var>a</var>=0, no repeating is used, so for example

1509 <code>:nth-child(0n+5)</code> matches only the fifth child. When

1510 <var>a</var>=0, the <var>a</var><code>n</code> part need not be

1511 included, so the syntax simplifies to

1512 <code>:nth-child(<var>b</var>)</code> and the last example simplifies

1513 to <code>:nth-child(5)</code>.

1514

1515 <div class="example">

1516 <p>Examples:</p>

1517 <pre>foo:nth-child(0n+1) /* represents an element foo, first child of its pare nt element */

1518 foo:nth-child(1) /* same */</pre>

1519 </div>

1520

1521 <p>When <var>a</var>=1, the number may be omitted from the rule.

1522

1523 <div class="example">

1524 <p>Examples:</p>

1525 <p>The following selectors are therefore equivalent:</p>

1526 <pre>bar:nth-child(1n+0) /* represents all bar elements, specificity (0,1,1) * /

1527 bar:nth-child(n+0) /* same */

1528 bar:nth-child(n) /* same */

1529 bar /* same but lower specificity (0,0,1) */</pre>

1530 </div>

1531

1532 <p>If <var>b</var>=0, then every <var>a</var>th element is picked. In

1533 such a case, the <var>b</var> part may be omitted.

1534

1535 <div class="example">

1536 <p>Examples:</p>

1537 <pre>tr:nth-child(2n+0) /* represents every even row of an HTML table */

1538 tr:nth-child(2n) /* same */</pre>

1539 </div>

1540

1541 <p>If both <var>a</var> and <var>b</var> are equal to zero, the

1542 pseudo-class represents no element in the document tree.</p>

1543

1544 <p>The value <var>a</var> can be negative, but only the positive

1545 values of <var>a</var><code>n</code>+<var>b</var>, for

1546 <code>n</code>≥0, may represent an element in the document

1547 tree.</p>

1548

1549 <div class="example">

1550 <p>Example:</p>

1551 <pre>html\|tr:nth-child(-n+6) /* represents the 6 first rows of XHTML tables */< /pre>

1552 </div>

1553

1554 <p>When the value <var>b</var> is negative, the "+" character in the

1555 expression must be removed (it is effectively replaced by the "-"

1556 character indicating the negative value of <var>b</var>).</p>

1557

1558 <div class="example">

1559 <p>Examples:</p>

1560 <pre>:nth-child(10n-1) /* represents the 9th, 19th, 29th, etc, element */

1561 :nth-child(10n+9) /* Same */

1562 :nth-child(10n+-1) /* Syntactically invalid, and would be ignored */</pre>

1563 </div>

1564

1565

1566 <h5><a name=nth-last-child-pseudo>:nth-last-child() pseudo-class</a></h5>

1567

1568 <p>The <code>:nth-last-child(<var>a</var>n+<var>b</var>)</code>

1569 pseudo-class notation represents an element that has

1570 <var>a</var><code>n</code>+<var>b</var>-1 siblings

1571 <strong>after</strong> it in the document tree, for a given positive

1572 integer or zero value of <code>n</code>, and has a parent element. See

1573 <code>:nth-child()</code> pseudo-class for the syntax of its argument.

1574 It also accepts the '<code>even</code>' and '<code>odd</code>' values

1575 as arguments.

1576

1577

1578 <div class="example">

1579 <p>Examples:</p>

1580 <pre>tr:nth-last-child(-n+2) /* represents the two last rows of an HTML table */

1581

1582 foo:nth-last-child(odd) /* represents all odd foo elements in their parent el ement,

1583 counting from the last one */</pre>

1584 </div>

1585

1586

1587 <h5><a name=nth-of-type-pseudo>:nth-of-type() pseudo-class</a></h5>

1588

1589 <p>The <code>:nth-of-type(<var>a</var>n+<var>b</var>)</code>

1590 pseudo-class notation represents an element that has

1591 <var>a</var><code>n</code>+<var>b</var>-1 siblings with the same

1592 element name <strong>before</strong> it in the document tree, for a

1593 given zero or positive integer value of <code>n</code>, and has a

1594 parent element. In other words, this matches the <var>b</var>th child

1595 of that type after all the children of that type have been split into

1596 groups of a elements each. See <code>:nth-child()</code> pseudo-class

1597 for the syntax of its argument. It also accepts the

1598 '<code>even</code>' and '<code>odd</code>' values.

1599

1600

1601 <div class="example">

1602 <p>CSS example:</p>

1603 <p>This allows an author to alternate the position of floated images:</p>

1604 <pre>img:nth-of-type(2n+1) { float: right; }

1605 img:nth-of-type(2n) { float: left; }</pre>

1606 </div>

1607

1608

1609 <h5><a name=nth-last-of-type-pseudo>:nth-last-of-type() pseudo-class</a></h5>

1610

1611 <p>The <code>:nth-last-of-type(<var>a</var>n+<var>b</var>)</code>

1612 pseudo-class notation represents an element that has

1613 <var>a</var><code>n</code>+<var>b</var>-1 siblings with the same

1614 element name <strong>after</strong> it in the document tree, for a

1615 given zero or positive integer value of <code>n</code>, and has a

1616 parent element. See <code>:nth-child()</code> pseudo-class for the

1617 syntax of its argument. It also accepts the '<code>even</code>' and '<code>odd</ code>' values.

1618

1619

1620 <div class="example">

1621 <p>Example:</p>

1622 <p>To represent all <code>h2</code> children of an XHTML

1623 <code>body</code> except the first and last, one could use the

1624 following selector:</p>

1625 <pre>body > h2:nth-of-type(n+2):nth-last-of-type(n+2)</pre>

1626 <p>In this case, one could also use <code>:not()</code>, although the

1627 selector ends up being just as long:</p>

1628 <pre>body > h2:not(:first-of-type):not(:last-of-type)</pre>

1629 </div>

1630

1631

1632 <h5><a name=first-child-pseudo>:first-child pseudo-class</a></h5>

1633

1634 <p>Same as <code>:nth-child(1)</code>. The <code>:first-child</code> pseudo-clas s

1635 represents an element that is the first child of some other element.

1636

1637

1638 <div class="example">

1639 <p>Examples:</p>

1640 <p>The following selector represents a <code>p</code> element that is

1641 the first child of a <code>div</code> element:</p>

1642 <pre>div > p:first-child</pre>

1643 <p>This selector can represent the <code>p</code> inside the

1644 <code>div</code> of the following fragment:</p>

1645 <pre><p> The last P before the note.</p>

1646 <div class="note">

1647 <p> The first P inside the note.</p>

1648 </div></pre>but cannot represent the second <code>p</code> in the followin g

1649 fragment:

1650 <pre><p> The last P before the note.</p>

1651 <div class="note">

1652 <h2> Note </h2>

1653 <p> The first P inside the note.</p>

1654 </div></pre>

1655 <p>The following two selectors are usually equivalent:</p>

1656 <pre>* > a:first-child /* a is first child of any element */

1657 a:first-child /* Same (assuming a is not the root element) */</pre>

1658 </div>

1659

1660 <h5><a name=last-child-pseudo>:last-child pseudo-class</a></h5>

1661

1662 <p>Same as <code>:nth-last-child(1)</code>. The <code>:last-child</code> pseudo- class

1663 represents an element that is the last child of some other element.

1664

1665 <div class="example">

1666 <p>Example:</p>

1667 <p>The following selector represents a list item <code>li</code> that

1668 is the last child of an ordered list <code>ol</code>.

1669 <pre>ol > li:last-child</pre>

1670 </div>

1671

1672 <h5><a name=first-of-type-pseudo>:first-of-type pseudo-class</a></h5>

1673

1674 <p>Same as <code>:nth-of-type(1)</code>. The <code>:first-of-type</code> pseudo- class

1675 represents an element that is the first sibling of its type in the list of

1676 children of its parent element.

1677

1678 <div class="example">

1679 <p>Example:</p>

1680 <p>The following selector represents a definition title

1681 <code>dt</code> inside a definition list <code>dl</code>, this

1682 <code>dt</code> being the first of its type in the list of children of

1683 its parent element.</p>

1684 <pre>dl dt:first-of-type</pre>

1685 <p>It is a valid description for the first two <code>dt</code>

1686 elements in the following example but not for the third one:</p>

1687 <pre><dl>

1688 <dt>gigogne</dt>

1689 <dd>

1690 <dl>

1691 <dt>fusée</dt>

1692 <dd>multistage rocket</dd>

1693 <dt>table</dt>

1694 <dd>nest of tables</dd>

1695 </dl>

1696 </dd>

1697 </dl></pre>

1698 </div>

1699

1700 <h5><a name=last-of-type-pseudo>:last-of-type pseudo-class</a></h5>

1701

1702 <p>Same as <code>:nth-last-of-type(1)</code>. The

1703 <code>:last-of-type</code> pseudo-class represents an element that is

1704 the last sibling of its type in the list of children of its parent

1705 element.</p>

1706

1707 <div class="example">

1708 <p>Example:</p>

1709 <p>The following selector represents the last data cell

1710 <code>td</code> of a table row.</p>

1711 <pre>tr > td:last-of-type</pre>

1712 </div>

1713

1714 <h5><a name=only-child-pseudo>:only-child pseudo-class</a></h5>

1715

1716 <p>Represents an element that has a parent element and whose parent

1717 element has no other element children. Same as

1718 <code>:first-child:last-child</code> or

1719 <code>:nth-child(1):nth-last-child(1)</code>, but with a lower

1720 specificity.</p>

1721

1722 <h5><a name=only-of-type-pseudo>:only-of-type pseudo-class</a></h5>

1723

1724 <p>Represents an element that has a parent element and whose parent

1725 element has no other element children with the same element name. Same

1726 as <code>:first-of-type:last-of-type</code> or

1727 <code>:nth-of-type(1):nth-last-of-type(1)</code>, but with a lower

1728 specificity.</p>

1729

1730

1731 <h5><a name=empty-pseudo></a>:empty pseudo-class</h5>

1732

1733 <p>The <code>:empty</code> pseudo-class represents an element that has

1734 no children at all. In terms of the DOM, only element nodes and text

1735 nodes (including CDATA nodes and entity references) whose data has a

1736 non-zero length must be considered as affecting emptiness; comments,

1737 PIs, and other nodes must not affect whether an element is considered

1738 empty or not.</p>

1739

1740 <div class="example">

1741 <p>Examples:</p>

1742 <p><code>p:empty</code> is a valid representation of the following fragment:</p >

1743 <pre><p></p></pre>

1744 <p><code>foo:empty</code> is not a valid representation for the

1745 following fragments:</p>

1746 <pre><foo>bar</foo></pre>

1747 <pre><foo><bar>bla</bar></foo></pre>

1748 <pre><foo>this is not <bar>:empty</bar></foo></pre>

1749 </div>

1750

1751 <h4><a name=content-selectors>6.6.6. Blank</a></h4> <!-- It's the Return of Appe ndix H!!! Run away! -->

1752

1753 <p>This section intentionally left blank.</p>

1754 <!-- (used to be :contains()) -->

1755

1756 <h4><a name=negation></a>6.6.7. The negation pseudo-class</h4>

1757

1758 <p>The negation pseudo-class, <code>:not(<var>X</var>)</code>, is a

1759 functional notation taking a <a href="#simple-selectors-dfn">simple

1760 selector</a> (excluding the negation pseudo-class itself and

1761 pseudo-elements) as an argument. It represents an element that is not

1762 represented by the argument.

1763

1764 <!-- pseudo-elements are not simple selectors, so the above paragraph

1765 may be a bit confusing -->

1766

1767 <div class="example">

1768 <p>Examples:</p>

1769 <p>The following CSS selector matches all <code>button</code>

1770 elements in an HTML document that are not disabled.</p>

1771 <pre>button:not([DISABLED])</pre>

1772 <p>The following selector represents all but <code>FOO</code>

1773 elements.</p>

1774 <pre>*:not(FOO)</pre>

1775 <p>The following group of selectors represents all HTML elements

1776 except links.</p>

1777 <pre>html\|*:not(:link):not(:visited)</pre>

1778 </div>

1779

1780 <p>Default namespace declarations do not affect the argument of the

1781 negation pseudo-class unless the argument is a universal selector or a

1782 type selector.</p>

1783

1784 <div class="example">

1785 <p>Examples:</p>

1786 <p>Assuming that the default namespace is bound to

1787 "http://example.com/", the following selector represents all

1788 elements that are not in that namespace:</p>

1789 <pre>\|:not(*)</pre>

1790 <p>The following CSS selector matches any element being hovered,

1791 regardless of its namespace. In particular, it is not limited to

1792 only matching elements in the default namespace that are not being

1793 hovered, and elements not in the default namespace don't match the

1794 rule when they <em>are</em> being hovered.</p>

1795 <pre>\|:not(:hover)</pre>

1796 </div>

1797

1798 <p class="note"><strong>Note</strong>: the :not() pseudo allows

1799 useless selectors to be written. For instance <code>:not(\|)</code>,

1800 which represents no element at all, or <code>foo:not(bar)</code>,

1801 which is equivalent to <code>foo</code> but with a higher

1802 specificity.</p>

1803

1804 <h3><a name=pseudo-elements>7. Pseudo-elements</a></h3>

1805

1806 <p>Pseudo-elements create abstractions about the document tree beyond

1807 those specified by the document language. For instance, document

1808 languages do not offer mechanisms to access the first letter or first

1809 line of an element's content. Pseudo-elements allow designers to refer

1810 to this otherwise inaccessible information. Pseudo-elements may also

1811 provide designers a way to refer to content that does not exist in the

1812 source document (e.g., the <code>::before</code> and

1813 <code>::after</code> pseudo-elements give access to generated

1814 content).</p>

1815

1816 <p>A pseudo-element is made of two colons (<code>::</code>) followed

1817 by the name of the pseudo-element.</p>

1818

1819 <p>This <code>::</code> notation is introduced by the current document

1820 in order to establish a discrimination between pseudo-classes and

1821 pseudo-elements. For compatibility with existing style sheets, user

1822 agents must also accept the previous one-colon notation for

1823 pseudo-elements introduced in CSS levels 1 and 2 (namely,

1824 <code>:first-line</code>, <code>:first-letter</code>,

1825 <code>:before</code> and <code>:after</code>). This compatibility is

1826 not allowed for the new pseudo-elements introduced in CSS level 3.</p>

1827

1828 <p>Only one pseudo-element may appear per selector, and if present it

1829 must appear after the sequence of simple selectors that represents the

1830 <a href="#subject">subjects</a> of the selector. <span class="note">A

1831 future version of this specification may allow multiple

1832 pesudo-elements per selector.</span></p>

1833

1834 <h4><a name=first-line>7.1. The ::first-line pseudo-element</a></h4>

1835

1836 <p>The <code>::first-line</code> pseudo-element describes the contents

1837 of the first formatted line of an element.

1838

1839 <div class="example">

1840 <p>CSS example:</p>

1841 <pre>p::first-line { text-transform: uppercase }</pre>

1842 <p>The above rule means "change the letters of the first line of every

1843 paragraph to uppercase".</p>

1844 </div>

1845

1846 <p>The selector <code>p::first-line</code> does not match any real

1847 HTML element. It does match a pseudo-element that conforming user

1848 agents will insert at the beginning of every paragraph.</p>

1849

1850 <p>Note that the length of the first line depends on a number of

1851 factors, including the width of the page, the font size, etc. Thus,

1852 an ordinary HTML paragraph such as:</p>

1853

1854 <pre>

1855 <P>This is a somewhat long HTML

1856 paragraph that will be broken into several

1857 lines. The first line will be identified

1858 by a fictional tag sequence. The other lines

1859 will be treated as ordinary lines in the

1860 paragraph.</P>

1861 </pre>

1862

1863 <p>the lines of which happen to be broken as follows:

1864

1865 <pre>

1866 THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT

1867 will be broken into several lines. The first

1868 line will be identified by a fictional tag

1869 sequence. The other lines will be treated as

1870 ordinary lines in the paragraph.

1871 </pre>

1872

1873 <p>This paragraph might be "rewritten" by user agents to include the

1874 <em>fictional tag sequence</em> for <code>::first-line</code>. This

1875 fictional tag sequence helps to show how properties are inherited.</p>

1876

1877 <pre>

1878 <P><b><P::first-line></b> This is a somewhat long HTML

1879 paragraph that <b></P::first-line></b> will be broken into several

1880 lines. The first line will be identified

1881 by a fictional tag sequence. The other lines

1882 will be treated as ordinary lines in the

1883 paragraph.</P>

1884 </pre>

1885

1886 <p>If a pseudo-element breaks up a real element, the desired effect

1887 can often be described by a fictional tag sequence that closes and

1888 then re-opens the element. Thus, if we mark up the previous paragraph

1889 with a <code>span</code> element:</p>

1890

1891 <pre>

1892 <P><b><SPAN class="test"></b> This is a somewhat long HTML

1893 paragraph that will be broken into several

1894 lines.<b></SPAN></b> The first line will be identified

1895 by a fictional tag sequence. The other lines

1896 will be treated as ordinary lines in the

1897 paragraph.</P>

1898 </pre>

1899

1900 <p>the user agent could simulate start and end tags for

1901 <code>span</code> when inserting the fictional tag sequence for

1902 <code>::first-line</code>.

1903

1904 <pre>

1905 <P><P::first-line><b><SPAN class="test"></b> This is a

1906 somewhat long HTML

1907 paragraph that will <b></SPAN></b></P::first-line><b><SPAN class= "test"></b> be

1908 broken into several

1909 lines.<b></SPAN></b> The first line will be identified

1910 by a fictional tag sequence. The other lines

1911 will be treated as ordinary lines in the

1912 paragraph.</P>

1913 </pre>

1914

1915 <p>In CSS, the <code>::first-line</code> pseudo-element can only be

1916 attached to a block-level element, an inline-block, a table-caption,

1917 or a table-cell.</p>

1918

1919 <p><a name="first-formatted-line"></a>The "first formatted line" of an

1920 element may occur inside a

1921 block-level descendant in the same flow (i.e., a block-level

1922 descendant that is not positioned and not a float). E.g., the first

1923 line of the <code>div</code> in <code><DIV><P>This

1924 line...</P>&lt/DIV></code> is the first line of the <code>p</code> (assuming

1925 that both <code>p</code> and <code>div</code> are block-level).

1926

1927 <p>The first line of a table-cell or inline-block cannot be the first

1928 formatted line of an ancestor element. Thus, in <code><DIV><P

1929 STYLE="display: inline-block">Hello<BR>Goodbye</P>

1930 etcetera</DIV></code> the first formatted line of the

1931 <code>div</code> is not the line "Hello".

1932

1933 <p class="note">Note that the first line of the <code>p</code> in this

1934 fragment: <code><p&gt<br>First...</code> doesn't contain any

1935 letters (assuming the default style for <code>br</code> in HTML

1936 4). The word "First" is not on the first formatted line.

1937

1938 <p>A UA should act as if the fictional start tags of the

1939 <code>::first-line</code> pseudo-elements were nested just inside the

1940 innermost enclosing block-level element. (Since CSS1 and CSS2 were

1941 silent on this case, authors should not rely on this behavior.) Here

1942 is an example. The fictional tag sequence for</p>

1943

1944 <pre>

1945 <DIV>

1946 <P>First paragraph</P>

1947 <P>Second paragraph</P>

1948 </DIV>

1949 </pre>

1950

1951 <p>is</p>

1952

1953 <pre>

1954 <DIV>

1955 <P><DIV::first-line><P::first-line>First paragraph</P::first-line> </DIV::first-line></P>

1956 <P><P::first-line>Second paragraph</P::first-line></P>

1957 </DIV>

1958 </pre>

1959

1960 <p>The <code>::first-line</code> pseudo-element is similar to an

1961 inline-level element, but with certain restrictions. In CSS, the

1962 following properties apply to a <code>::first-line</code>

1963 pseudo-element: font properties, color property, background

1964 properties, 'word-spacing', 'letter-spacing', 'text-decoration',

1965 'vertical-align', 'text-transform', 'line-height'. UAs may apply other

1966 properties as well.</p>

1967

1968

1969 <h4><a name=first-letter>7.2. The ::first-letter pseudo-element</a></h4>

1970

1971 <p>The <code>::first-letter</code> pseudo-element represents the first

1972 letter of the first line of a block, if it is not preceded by any

1973 other content (such as images or inline tables) on its line. The

1974 ::first-letter pseudo-element may be used for "initial caps" and "drop

1975 caps", which are common typographical effects. This type of initial

1976 letter is similar to an inline-level element if its 'float' property

1977 is 'none'; otherwise, it is similar to a floated element.</p>

1978

1979 <p>In CSS, these are the properties that apply to <code>::first-letter</code>

1980 pseudo-elements: font properties, 'text-decoration', 'text-transform',

1981 'letter-spacing', 'word-spacing' (when appropriate), 'line-height',

1982 'float', 'vertical-align' (only if 'float' is 'none'), margin

1983 properties, padding properties, border properties, color property,

1984 background properties. UAs may apply other properties as well. To

1985 allow UAs to render a typographically correct drop cap or initial cap,

1986 the UA may choose a line-height, width and height based on the shape

1987 of the letter, unlike for normal elements.</p>

1988

1989 <div class="example">

1990 <p>Example:</p>

1991 <p>This example shows a possible rendering of an initial cap. Note

1992 that the 'line-height' that is inherited by the <code>::first-letter</code>

1993 pseudo-element is 1.1, but the UA in this example has computed the

1994 height of the first letter differently, so that it doesn't cause any

1995 unnecessary space between the first two lines. Also note that the

1996 fictional start tag of the first letter is inside the <span>span</span>, and thu s

1997 the font weight of the first letter is normal, not bold as the <span>span</span> :

1998 <pre>

1999 p { line-height: 1.1 }

2000 p::first-letter { font-size: 3em; font-weight: normal }

2001 span { font-weight: bold }

2002 ...

2003 <p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br >

2004 Erbarremt over my en mijn benaeuwde vesten<br>

2005 En arme burgery, en op mijn volcx gebed<br>

2006 En dagelix geschrey de bange stad ontzet.

2007 </pre>

2008 <div class="figure">

2009 <p><img src="initial-cap.png" alt="Image illustrating the ::first-letter pseudo- element">

2010 </div>

2011 </div>

2012

2013 <div class="example">

2014 <p>The following CSS will make a drop cap initial letter span about two lines:</ p>

2015

2016 <pre>

2017 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

2018 <HTML>

2019 <HEAD>

2020 <TITLE>Drop cap initial letter</TITLE>

2021 <STYLE type="text/css">

2022 P { font-size: 12pt; line-height: 1.2 }

2023 P::first-letter { font-size: 200%; font-weight: bold; float: left }

2024 SPAN { text-transform: uppercase }

2025 </STYLE>

2026 </HEAD>

2027 <BODY>

2028 <P><SPAN>The first</SPAN> few words of an article

2029 in The Economist.</P>

2030 </BODY>

2031 </HTML>

2032 </pre>

2033

2034 <p>This example might be formatted as follows:</p>

2035

2036 <div class="figure">

2037 <P><img src="first-letter.gif" alt="Image illustrating the combined effect of th e ::first-letter and ::first-line pseudo-elements"></p>

2038 </div>

2039

2040 <p>The <span class="index-inst" title="fictional tag

2041 sequence">fictional tag sequence</span> is:</p>

2042

2043 <pre>

2044 <P>

2045 <SPAN>

2046 <P::first-letter>

2047 T

2048 </P::first-letter>he first

2049 </SPAN>

2050 few words of an article in the Economist.

2051 </P>

2052 </pre>

2053

2054 <p>Note that the <code>::first-letter</code> pseudo-element tags abut

2055 the content (i.e., the initial character), while the ::first-line

2056 pseudo-element start tag is inserted right after the start tag of the

2057 block element.</p> </div>

2058

2059 <p>In order to achieve traditional drop caps formatting, user agents

2060 may approximate font sizes, for example to align baselines. Also, the

2061 glyph outline may be taken into account when formatting.</p>

2062

2063 <p>Punctuation (i.e, characters defined in Unicode in the "open" (Ps),

2064 "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po)

2065 punctuation classes), that precedes or follows the first letter should

2066 be included. <a href="#refsUNICODE">[UNICODE]</a></p>

2067

2068 <div class="figure">

2069 <P><img src="first-letter2.gif" alt="Quotes that precede the

2070 first letter should be included."></p>

2071 </div>

2072

2073 <p>The <code>::first-letter</code> also applies if the first letter is

2074 in fact a digit, e.g., the "6" in "67 million dollars is a lot of

2075 money."</p>

2076

2077 <p>In CSS, the <code>::first-letter</code> pseudo-element applies to

2078 block, list-item, table-cell, table-caption, and inline-block

2079 elements. <span class="note">A future version of this specification

2080 may allow this pesudo-element to apply to more element

2081 types.</span></p>

2082

2083 <p>The <code>::first-letter</code> pseudo-element can be used with all

2084 such elements that contain text, or that have a descendant in the same

2085 flow that contains text. A UA should act as if the fictional start tag

2086 of the ::first-letter pseudo-element is just before the first text of

2087 the element, even if that first text is in a descendant.</p>

2088

2089 <div class="example">

2090 <p>Example:</p>

2091 <p>The fictional tag sequence for this HTMLfragment:

2092 <pre><div>

2093 <p>The first text.</pre>

2094 <p>is:

2095 <pre><div>

2096 <p><div::first-letter><p::first-letter>T</...></...>he first text .</pre>

2097 </div>

2098

2099 <p>The first letter of a table-cell or inline-block cannot be the

2100 first letter of an ancestor element. Thus, in <code><DIV><P

2101 STYLE="display: inline-block">Hello<BR>Goodbye</P>

2102 etcetera</DIV></code> the first letter of the <code>div</code> is not the

2103 letter "H". In fact, the <code>div</code> doesn't have a first letter.

2104

2105 <p>The first letter must occur on the <a

2106 href="#first-formatted-line">first formatted line.</a> For example, in

2107 this fragment: <code><p&gt<br>First...</code> the first line

2108 doesn't contain any letters and <code>::first-letter</code> doesn't

2109 match anything (assuming the default style for <code>br</code> in HTML

2110 4). In particular, it does not match the "F" of "First."

2111

2112 <p>In CSS, if an element is a list item ('display: list-item'), the

2113 <code>::first-letter</code> applies to the first letter in the

2114 principal box after the marker. UAs may ignore

2115 <code>::first-letter</code> on list items with 'list-style-position:

2116 inside'. If an element has <code>::before</code> or

2117 <code>::after</code> content, the <code>::first-letter</code> applies

2118 to the first letter of the element <em>including</em> that content.

2119

2120 <div class="example">

2121 <p>Example:</p>

2122 <p>After the rule 'p::before {content: "Note: "}', the selector

2123 'p::first-letter' matches the "N" of "Note".</p>

2124 </div>

2125

2126 <p>Some languages may have specific rules about how to treat certain

2127 letter combinations. In Dutch, for example, if the letter combination

2128 "ij" appears at the beginning of a word, both letters should be

2129 considered within the <code>::first-letter</code> pseudo-element.

2130

2131 <p>If the letters that would form the ::first-letter are not in the

2132 same element, such as "'T" in <code><p>'<em>T...</code>, the UA

2133 may create a ::first-letter pseudo-element from one of the elements,

2134 both elements, or simply not create a pseudo-element.</p>

2135

2136 <p>Similarly, if the first letter(s) of the block are not at the start

2137 of the line (for example due to bidirectional reordering), then the UA

2138 need not create the pseudo-element(s).

2139

2140 <div class="example">

2141 <p>Example:</p>

2142 <p><a name="overlapping-example">The following example</a> illustrates

2143 how overlapping pseudo-elements may interact. The first letter of

2144 each P element will be green with a font size of '24pt'. The rest of

2145 the first formatted line will be 'blue' while the rest of the

2146 paragraph will be 'red'.</p>

2147

2148 <pre>p { color: red; font-size: 12pt }

2149 p::first-letter { color: green; font-size: 200% }

2150 p::first-line { color: blue }

2151

2152 <P>Some text that ends up on two lines</P></pre>

2153

2154 <p>Assuming that a line break will occur before the word "ends", the

2155 <span class="index-inst" title="fictional tag sequence">fictional tag

2156 sequence</span> for this fragment might be:</p>

2157

2158 <pre><P>

2159 <P::first-line>

2160 <P::first-letter>

2161 S

2162 </P::first-letter>ome text that

2163 </P::first-line>

2164 ends up on two lines

2165 </P></pre>

2166

2167 <p>Note that the <code>::first-letter</code> element is inside the <code>::first -line</code>

2168 element. Properties set on <code>::first-line</code> are inherited by

2169 <code>::first-letter</code>, but are overridden if the same property is set on

2170 <code>::first-letter</code>.</p>

2171 </div>

2172

2173

2174 <h4><a name=UIfragments>7.3.</a> <a name=selection>The ::selection pseudo-elemen t</a></h4>

2175

2176 <p>The <code>::selection</code> pseudo-element applies to the portion

2177 of a document that has been highlighted by the user. This also

2178 applies, for example, to selected text within an editable text

2179 field. This pseudo-element should not be confused with the <code><a

2180 href="#checked">:checked</a></code> pseudo-class (which used to be

2181 named <code>:selected</code>)

2182

2183 <p>Although the <code>::selection</code> pseudo-element is dynamic in

2184 nature, and is altered by user action, it is reasonable to expect that

2185 when a UA re-renders to a static medium (such as a printed page, see

2186 <a href="#refsCSS21">[CSS21]</a>) which was originally rendered to a

2187 dynamic medium (like screen), the UA may wish to transfer the current

2188 <code>::selection</code> state to that other medium, and have all the

2189 appropriate formatting and rendering take effect as well. This is not

2190 required — UAs may omit the <code>::selection</code>

2191 pseudo-element for static media.

2192

2193 <p>These are the CSS properties that apply to <code>::selection</code>

2194 pseudo-elements: color, background, cursor (optional), outline

2195 (optional). The computed value of the 'background-image' property on

2196 <code>::selection</code> may be ignored.

2197

2198

2199 <h4><a name=gen-content>7.4. The ::before and ::after pseudo-elements</a></h4>

2200

2201 <p>The <code>::before</code> and <code>::after</code> pseudo-elements

2202 can be used to describe generated content before or after an element's

2203 content. They are explained in CSS 2.1 <a

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

2205

2206 <p>When the <code>::first-letter</code> and <code>::first-line</code>

2207 pseudo-elements are combined with <code>::before</code> and

2208 <code>::after</code>, they apply to the first letter or line of the

2209 element including the inserted text.</p>

2210

2211 <h2><a name=combinators>8. Combinators</a></h2>

2212

2213 <h3><a name=descendant-combinators>8.1. Descendant combinator</a></h3>

2214

2215 <p>At times, authors may want selectors to describe an element that is

2216 the descendant of another element in the document tree (e.g., "an

2217 <code>EM</code> element that is contained within an <code>H1</code>

2218 element"). Descendant combinators express such a relationship. A

2219 descendant combinator is <a href="#whitespace">white space</a> that

2220 separates two sequences of simple selectors. A selector of the form

2221 "<code>A B</code>" represents an element <code>B</code> that is an

2222 arbitrary descendant of some ancestor element <code>A</code>.

2223

2224 <div class="example">

2225 <p>Examples:</p>

2226 <p>For example, consider the following selector:</p>

2227 <pre>h1 em</pre>

2228 <p>It represents an <code>em</code> element being the descendant of

2229 an <code>h1</code> element. It is a correct and valid, but partial,

2230 description of the following fragment:</p>

2231 <pre><h1>This <span class="myclass">headline

2232 is <em>very</em> important</span></h1></pre>

2233 <p>The following selector:</p>

2234 <pre>div * p</pre>

2235 <p>represents a <code>p</code> element that is a grandchild or later

2236 descendant of a <code>div</code> element. Note the whitespace on

2237 either side of the "*" is not part of the universal selector; the

2238 whitespace is a combinator indicating that the DIV must be the

2239 ancestor of some element, and that that element must be an ancestor

2240 of the P.</p>

2241 <p>The following selector, which combines descendant combinators and

2242 <a href="#attribute-selectors">attribute selectors</a>, represents an

2243 element that (1) has the <code>href</code> attribute set and (2) is

2244 inside a <code>p</code> that is itself inside a <code>div</code>:</p>

2245 <pre>div p *[href]</pre>

2246 </div>

2247

2248 <h3><a name=child-combinators>8.2. Child combinators</a></h3>

2249

2250 <p>A <dfn>child combinator</dfn> describes a childhood relationship

2251 between two elements. A child combinator is made of the

2252 "greater-than sign" (<code>></code>) character and

2253 separates two sequences of simple selectors.

2254

2255

2256 <div class="example">

2257 <p>Examples:</p>

2258 <p>The following selector represents a <code>p</code> element that is

2259 child of <code>body</code>:</p>

2260 <pre>body > p</pre>

2261 <p>The following example combines descendant combinators and child

2262 combinators.</p>

2263 <pre>div ol>li p</pre><!-- LEAVE THOSE SPACES OUT! see below -->

2264 <p>It represents a <code>p</code> element that is a descendant of an

2265 <code>li</code> element; the <code>li</code> element must be the

2266 child of an <code>ol</code> element; the <code>ol</code> element must

2267 be a descendant of a <code>div</code>. Notice that the optional white

2268 space around the ">" combinator has been left out.</p>

2269 </div>

2270

2271 <p>For information on selecting the first child of an element, please

2272 see the section on the <code><a

2273 href="#structural-pseudos">:first-child</a></code> pseudo-class

2274 above.</p>

2275

2276 <h3><a name=sibling-combinators>8.3. Sibling combinators</a></h3>

2277

2278 <p>There are two different sibling combinators: the adjacent sibling

2279 combinator and the general sibling combinator. In both cases,

2280 non-element nodes (e.g. text between elements) are ignored when

2281 considering adjacency of elements.</p>

2282

2283 <h4><a name=adjacent-sibling-combinators>8.3.1. Adjacent sibling combinator</a>< /h4>

2284

2285 <p>The adjacent sibling combinator is made of the "plus

2286 sign" (U+002B, <code>+</code>) character that separates two

2287 sequences of simple selectors. The elements represented by the two

2288 sequences share the same parent in the document tree and the element

2289 represented by the first sequence immediately precedes the element

2290 represented by the second one.</p>

2291

2292 <div class="example">

2293 <p>Examples:</p>

2294 <p>The following selector represents a <code>p</code> element

2295 immediately following a <code>math</code> element:</p>

2296 <pre>math + p</pre>

2297 <p>The following selector is conceptually similar to the one in the

2298 previous example, except that it adds an attribute selector — it

2299 adds a constraint to the <code>h1</code> element, that it must have

2300 <code>class="opener"</code>:</p>

2301 <pre>h1.opener + h2</pre>

2302 </div>

2303

2304

2305 <h4><a name=general-sibling-combinators>8.3.2. General sibling combinator</a></h 4>

2306

2307 <p>The general sibling combinator is made of the "tilde"

2308 (U+007E, <code>~</code>) character that separates two sequences of

2309 simple selectors. The elements represented by the two sequences share

2310 the same parent in the document tree and the element represented by

2311 the first sequence precedes (not necessarily immediately) the element

2312 represented by the second one.</p>

2313

2314 <div class="example">

2315 <p>Example:</p>

2316 <pre>h1 ~ pre</pre>

2317 <p>represents a <code>pre</code> element following an <code>h1</code>. It

2318 is a correct and valid, but partial, description of:</p>

2319 <pre><h1>Definition of the function a</h1>

2320 <p>Function a(x) has to be applied to all figures in the table.</p>

2321 <pre>function a(x) = 12x/13.5</pre></pre>

2322 </div>

2323

2324 <h2><a name=specificity>9. Calculating a selector's specificity</a></h2>

2325

2326 <p>A selector's specificity is calculated as follows:</p>

2327

2328 <ul>

2329 <li>count the number of ID selectors in the selector (= a)</li>

2330 <li>count the number of class selectors, attributes selectors, and pseudo-clas ses in the selector (= b)</li>

2331 <li>count the number of element names in the selector (= c)</li>

2332 <li>ignore pseudo-elements</li>

2333 </ul>

2334

2335 <p>Selectors inside <a href="#negation">the negation pseudo-class</a>

2336 are counted like any other, but the negation itself does not count as

2337 a pseudo-class.</p>

2338

2339 <p>Concatenating the three numbers a-b-c (in a number system with a

2340 large base) gives the specificity.</p>

2341

2342 <div class="example">

2343 <p>Examples:</p>

2344 <pre>* /* a=0 b=0 c=0 -> specificity = 0 */

2345 LI /* a=0 b=0 c=1 -> specificity = 1 */

2346 UL LI /* a=0 b=0 c=2 -> specificity = 2 */

2347 UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */

2348 H1 + [REL=up] / a=0 b=1 c=1 -> specificity = 11 */

2349 UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */

2350 LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */

2351 #x34y /* a=1 b=0 c=0 -> specificity = 100 */

2352 #s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */

2353 </pre>

2354 </div>

2355

2356 <p class="note"><strong>Note:</strong> the specificity of the styles

2357 specified in an HTML <code>style</code> attribute is described in CSS

2358 2.1. <a href="#refsCSS21">[CSS21]</a>.</p>

2359

2360 <h2><a name=w3cselgrammar>10. The grammar of Selectors</a></h2>

2361

2362 <h3><a name=grammar>10.1. Grammar</a></h3>

2363

2364 <p>The grammar below defines the syntax of Selectors. It is globally

2365 LL(1) and can be locally LL(2) (but note that most UA's should not use

2366 it directly, since it doesn't express the parsing conventions). The

2367 format of the productions is optimized for human consumption and some

2368 shorthand notations beyond Yacc (see <a href="#refsYACC">[YACC]</a>)

2369 are used:</p>

2370

2371 <ul>

2372 <li><b>*</b>: 0 or more

2373 <li><b>+</b>: 1 or more

2374 <li><b>?</b>: 0 or 1

2375 <li><b>\|</b>: separates alternatives

2376 <li><b>[ ]</b>: grouping </li>

2377 </ul>

2378

2379 <p>The productions are:</p>

2380

2381 <pre>selectors_group

2382 : selector [ COMMA S* selector ]*

2383 ;

2384

2385 selector

2386 : simple_selector_sequence [ combinator simple_selector_sequence ]*

2387 ;

2388

2389 combinator

2390 /* combinators can be surrounded by white space */

2391 : PLUS S* \| GREATER S* \| TILDE S* \| S+

2392 ;

2393

2394 simple_selector_sequence

2395 : [ type_selector \| universal ]

2396 [ HASH \| class \| attrib \| pseudo \| negation ]*

2397 \| [ HASH \| class \| attrib \| pseudo \| negation ]+

2398 ;

2399

2400 type_selector

2401 : [ namespace_prefix ]? element_name

2402 ;

2403

2404 namespace_prefix

2405 : [ IDENT \| '*' ]? '\|'

2406 ;

2407

2408 element_name

2409 : IDENT

2410 ;

2411

2412 universal

2413 : [ namespace_prefix ]? '*'

2414 ;

2415

2416 class

2417 : '.' IDENT

2418 ;

2419

2420 attrib

2421 : '[' S* [ namespace_prefix ]? IDENT S*

2422 [ [ PREFIXMATCH \|

2423 SUFFIXMATCH \|

2424 SUBSTRINGMATCH \|

2425 '=' \|

2426 INCLUDES \|

2427 DARTMATCH ] S* [ IDENT \| STRING ] S*

2428 ]? ']'

2429 ;

2430

2431 pseudo

2432 /* '::' starts a pseudo-element, ':' a pseudo-class */

2433 /* Exceptions: :first-line, :first-letter, :before and :after. */

2434 /* Note that pseudo-elements are restricted to one per selector and */

2435 /* occur only in the last simple_selector_sequence. */

2436 : ':' ':'? [ IDENT \| functional_pseudo ]

2437 ;

2438

2439 functional_pseudo

2440 : FUNCTION S* expression ')'

2441 ;

2442

2443 expression

2444 /* In CSS3, the expressions are identifiers, strings, */

2445 /* or of the form "an+b" */

2446 : [ [ PLUS \| '-' \| DIMENSION \| NUMBER \| STRING \| IDENT ] S* ]+

2447 ;

2448

2449 negation

2450 : NOT S* negation_arg S* ')'

2451 ;

2452

2453 negation_arg

2454 : type_selector \| universal \| HASH \| class \| attrib \| pseudo

2455 ;</pre>

2456

2457

2458 <h3><a name=lex>10.2. Lexical scanner</a></h3>

2459

2460 <p>The following is the <a name=x3>tokenizer</a>, written in Flex (see

2461 <a href="#refsFLEX">[FLEX]</a>) notation. The tokenizer is

2462 case-insensitive.</p>

2463

2464 <p>The two occurrences of "\377" represent the highest character

2465 number that current versions of Flex can deal with (decimal 255). They

2466 should be read as "\4177777" (decimal 1114111), which is the highest

2467 possible code point in Unicode/ISO-10646. <a

2468 href="#refsUNICODE">[UNICODE]</a></p>

2469

2470 <pre>%option case-insensitive

2471

2472 ident [-]?{nmstart}{nmchar}*

2473 name {nmchar}+

2474 nmstart [_a-z]\|{nonascii}\|{escape}

2475 nonascii [^\0-\177]

2476 unicode \\[0-9a-f]{1,6}(\r\n\|[ \n\r\t\f])?

2477 escape {unicode}\|\\[^\n\r\f0-9a-f]

2478 nmchar [_a-z0-9-]\|{nonascii}\|{escape}

2479 num [0-9]+\|[0-9]*\.[0-9]+

2480 string {string1}\|{string2}

2481 string1 \"([^\n\r\f\\"]\|\\{nl}\|{nonascii}\|{escape})*\"

2482 string2 \'([^\n\r\f\\']\|\\{nl}\|{nonascii}\|{escape})*\'

2483 invalid {invalid1}\|{invalid2}

2484 invalid1 \"([^\n\r\f\\"]\|\\{nl}\|{nonascii}\|{escape})*

2485 invalid2 \'([^\n\r\f\\']\|\\{nl}\|{nonascii}\|{escape})*

2486 nl \n\|\r\n\|\r\|\f

2487 w [ \t\r\n\f]*

2488

2489 %%

2490

2491 [ \t\r\n\f]+ return S;

2492

2493 "~=" return INCLUDES;

2494 "\|=" return DARTMATCH;

2495 "^=" return PREFIXMATCH;

2496 "$=" return SUFFIXMATCH;

2497 "*=" return SUBSTRINGMATCH;

2498 {ident} return IDENT;

2499 {string} return STRING;

2500 {ident}"(" return FUNCTION;

2501 {num} return NUMBER;

2502 "#"{name} return HASH;

2503 {w}"+" return PLUS;

2504 {w}">" return GREATER;

2505 {w}"," return COMMA;

2506 {w}"~" return TILDE;

2507 ":not(" return NOT;

2508 @{ident} return ATKEYWORD;

2509 {invalid} return INVALID;

2510 {num}% return PERCENTAGE;

2511 {num}{ident} return DIMENSION;

2512 "<!--" return CDO;

2513 "-->" return CDC;

2514

2515 "url("{w}{string}{w}")" return URI;

2516 "url("{w}([!#$%&-~]\|{nonascii}\|{escape}){w}")" return URI;

2517 U\+[0-9a-f?]{1,6}(-[0-9a-f]{1,6})? return UNICODE_RANGE;

2518

2519 \/\[^]\+([^/][^]\+)\/ / ignore comments */

2520

2521 . return *yytext;</pre>

2522

2523

2524

2525 <h2><a name=downlevel>11. Namespaces and down-level clients</a></h2>

2526

2527 <p>An important issue is the interaction of CSS selectors with XML

2528 documents in web clients that were produced prior to this

2529 document. Unfortunately, due to the fact that namespaces must be

2530 matched based on the URI which identifies the namespace, not the

2531 namespace prefix, some mechanism is required to identify namespaces in

2532 CSS by their URI as well. Without such a mechanism, it is impossible

2533 to construct a CSS style sheet which will properly match selectors in

2534 all cases against a random set of XML documents. However, given

2535 complete knowledge of the XML document to which a style sheet is to be

2536 applied, and a limited use of namespaces within the XML document, it

2537 is possible to construct a style sheet in which selectors would match

2538 elements and attributes correctly.</p>

2539

2540 <p>It should be noted that a down-level CSS client will (if it

2541 properly conforms to CSS forward compatible parsing rules) ignore all

2542 <code>@namespace</code> at-rules, as well as all style rules that make

2543 use of namespace qualified element type or attribute selectors. The

2544 syntax of delimiting namespace prefixes in CSS was deliberately chosen

2545 so that down-level CSS clients would ignore the style rules rather

2546 than possibly match them incorrectly.</p>

2547

2548 <p>The use of default namespaces in CSS makes it possible to write

2549 element type selectors that will function in both namespace aware CSS

2550 clients as well as down-level clients. It should be noted that

2551 down-level clients may incorrectly match selectors against XML

2552 elements in other namespaces.</p>

2553

2554 <p>The following are scenarios and examples in which it is possible to

2555 construct style sheets which would function properly in web clients

2556 that do not implement this proposal.</p>

2557

2558 <ol>

2559 <li>

2560

2561 <p>The XML document does not use namespaces.</p>

2562

2563 <ul>

2564

2565 <li>In this case, it is obviously not necessary to declare or use

2566 namespaces in the style sheet. Standard CSS element type and

2567 attribute selectors will function adequately in a down-level

2568 client.</li>

2569

2570 <li>In a CSS namespace aware client, the default behavior of

2571 element selectors matching without regard to namespace will

2572 function properly against all elements, since no namespaces are

2573 present. However, the use of specific element type selectors that

2574 match only elements that have no namespace ("<code>\|name</code>")

2575 will guarantee that selectors will match only XML elements that do

2576 not have a declared namespace. </li>

2577

2578 </ul>

2579

2580 </li>

2581

2582 <li>

2583

2584 <p>The XML document defines a single, default namespace used

2585 throughout the document. No namespace prefixes are used in element

2586 names.</p>

2587

2588 <ul>

2589

2590 <li>In this case, a down-level client will function as if

2591 namespaces were not used in the XML document at all. Standard CSS

2592 element type and attribute selectors will match against all

2593 elements. </li>

2594

2595 </ul>

2596

2597 </li>

2598

2599 <li>

2600

2601 <p>The XML document does <b>not</b> use a default namespace, all

2602 namespace prefixes used are known to the style sheet author, and

2603 there is a direct mapping between namespace prefixes and namespace

2604 URIs. (A given prefix may only be mapped to one namespace URI

2605 throughout the XML document; there may be multiple prefixes mapped

2606 to the same URI).</p>

2607

2608 <ul>

2609

2610 <li>In this case, the down-level client will view and match

2611 element type and attribute selectors based on their fully

2612 qualified name, not the local part as outlined in the <a

2613 href="#typenmsp">Type selectors and Namespaces</a> section. CSS

2614 selectors may be declared using an escaped colon "<code>\:</code>"

2615 to describe the fully qualified names, e.g.

2616 "<code>html\:h1</code>" will match

2617 <code><html:h1></code>. Selectors using the qualified name

2618 will only match XML elements that use the same prefix. Other

2619 namespace prefixes used in the XML that are mapped to the same URI

2620 will not match as expected unless additional CSS style rules are

2621 declared for them.</li>

2622

2623 <li>Note that selectors declared in this fashion will

2624 <em>only</em> match in down-level clients. A CSS namespace aware

2625 client will match element type and attribute selectors based on

2626 the name's local part. Selectors declared with the fully

2627 qualified name will not match (unless there is no namespace prefix

2628 in the fully qualified name).</li>

2629

2630 </ul>

2631

2632 </li>

2633

2634 </ol>

2635

2636 <p>In other scenarios: when the namespace prefixes used in the XML are

2637 not known in advance by the style sheet author; or a combination of

2638 elements with no namespace are used in conjunction with elements using

2639 a default namespace; or the same namespace prefix is mapped to

2640 <em>different</em> namespace URIs within the same document, or in

2641 different documents; it is impossible to construct a CSS style sheet

2642 that will function properly against all elements in those documents,

2643 unless, the style sheet is written using a namespace URI syntax (as

2644 outlined in this document or similar) and the document is processed by

2645 a CSS and XML namespace aware client.</p>

2646

2647 <h2><a name=profiling>12. Profiles</a></h2>

2648

2649 <p>Each specification using Selectors must define the subset of W3C

2650 Selectors it allows and excludes, and describe the local meaning of

2651 all the components of that subset.</p>

2652

2653 <p>Non normative examples:

2654

2655 <div class="profile">

2656 <table class="tprofile">

2657 <tbody>

2658 <tr>

2659 <th class="title" colspan=2>Selectors profile</th></tr>

2660 <tr>

2661 <th>Specification</th>

2662 <td>CSS level 1</td></tr>

2663 <tr>

2664 <th>Accepts</th>

2665 <td>type selectors<br>class selectors<br>ID selectors<br>:link,

2666 :visited and :active pseudo-classes<br>descendant combinator

2667 <br>::first-line and ::first-letter pseudo-elements</td></tr>

2668 <tr>

2669 <th>Excludes</th>

2670 <td>

2671

2672 <p>universal selector<br>attribute selectors<br>:hover and :focus

2673 pseudo-classes<br>:target pseudo-class<br>:lang() pseudo-class<br>all UI

2674 element states pseudo-classes<br>all structural

2675 pseudo-classes<br>negation pseudo-class<br>all

2676 UI element fragments pseudo-elements<br>::before and ::after

2677 pseudo-elements<br>child combinators<br>sibling combinators

2678

2679 <p>namespaces</td></tr>

2680 <tr>

2681 <th>Extra constraints</th>

2682 <td>only one class selector allowed per sequence of simple

2683 selectors</td></tr></tbody></table><br><br>

2684 <table class="tprofile">

2685 <tbody>

2686 <tr>

2687 <th class="title" colspan=2>Selectors profile</th></tr>

2688 <tr>

2689 <th>Specification</th>

2690 <td>CSS level 2</td></tr>

2691 <tr>

2692 <th>Accepts</th>

2693 <td>type selectors<br>universal selector<br>attribute presence and

2694 values selectors<br>class selectors<br>ID selectors<br>:link, :visited,

2695 :active, :hover, :focus, :lang() and :first-child pseudo-classes

2696 <br>descendant combinator<br>child combinator<br>adjacent sibling

2697 combinator<br>::first-line and ::first-letter pseudo-elements<br>::before

2698 and ::after pseudo-elements</td></tr>

2699 <tr>

2700 <th>Excludes</th>

2701 <td>

2702

2703 <p>content selectors<br>substring matching attribute

2704 selectors<br>:target pseudo-classes<br>all UI element

2705 states pseudo-classes<br>all structural pseudo-classes other

2706 than :first-child<br>negation pseudo-class<br>all UI element

2707 fragments pseudo-elements<br>general sibling combinators

2708

2709 <p>namespaces</td></tr>

2710 <tr>

2711 <th>Extra constraints</th>

2712 <td>more than one class selector per sequence of simple selectors (CSS1

2713 constraint) allowed</td></tr></tbody></table>

2714

2715 <p>In CSS, selectors express pattern matching rules that determine which style

2716 rules apply to elements in the document tree.

2717

2718 <p>The following selector (CSS level 2) will <b>match</b> all anchors <code>a</c ode>

2719 with attribute <code>name</code> set inside a section 1 header <code>h1</code>:

2720 <pre>h1 a[name]</pre>

2721

2722 <p>All CSS declarations attached to such a selector are applied to elements

2723 matching it. </div>

2724

2725 <div class="profile">

2726 <table class="tprofile">

2727 <tbody>

2728 <tr>

2729 <th class="title" colspan=2>Selectors profile</th></tr>

2730 <tr>

2731 <th>Specification</th>

2732 <td>STTS 3</td>

2733 </tr>

2734 <tr>

2735 <th>Accepts</th>

2736 <td>

2737

2738 <p>type selectors<br>universal selectors<br>attribute selectors<br>class

2739 selectors<br>ID selectors<br>all structural pseudo-classes<br>

2740 all combinators

2741

2742 <p>namespaces</td></tr>

2743 <tr>

2744 <th>Excludes</th>

2745 <td>non-accepted pseudo-classes<br>pseudo-elements<br></td></tr>

2746 <tr>

2747 <th>Extra constraints</th>

2748 <td>some selectors and combinators are not allowed in fragment

2749 descriptions on the right side of STTS declarations.</td></tr></tbody></ta ble>

2750 <form>

2751 <input type="text" name="test10"/>

2752 <input type="text" name="foo"/>

2753 <input type="text" name="foo"/>

2754 <input type="text" name="foo"/>

2755 <input type="text" name="foo"/>

2756 <input type="text" name="foo"/>

2757 <input type="text" name="foo"/>

2758 <input type="text" name="foo"/>

2759 <input type="text" name="foo"/>

2760 <input type="text" name="foo"/>

2761 <input type="text" name="foo"/>

2762 <input type="text" name="foo"/>

2763 <input type="text" name="foo"/>

2764 <input type="text" name="foo"/>

2765 <input type="text" name="foo"/>

2766 <input type="text" name="foo"/>

2767 <input type="text" name="foo"/>

2768 <input type="text" name="foo"/>

2769 <input type="text" name="foo"/>

2770 <input type="text" name="foo"/>

2771 <input type="text" name="foo"/>

2772 <input type="text" name="foo"/>

2773 <input type="text" name="foo"/>

2774 <input type="text" name="foo"/>

2775 <input type="text" name="foo"/>

2776 </form>

2777

2778 <p>Selectors can be used in STTS 3 in two different

2779 manners:

2780 <ol>

2781 <li>a selection mechanism equivalent to CSS selection mechanism: declarations

2782 attached to a given selector are applied to elements matching that selector,

2783 <li>fragment descriptions that appear on the right side of declarations.

2784 </li></ol></div>

2785

2786 <h2><a name=Conformance></a>13. Conformance and requirements</h2>

2787

2788 <p>This section defines conformance with the present specification only.

2789

2790 <p>The inability of a user agent to implement part of this specification due to

2791 the limitations of a particular device (e.g., non interactive user agents will

2792 probably not implement dynamic pseudo-classes because they make no sense without

2793 interactivity) does not imply non-conformance.

2794

2795 <p>All specifications reusing Selectors must contain a <a

2796 href="#profiling">Profile</a> listing the

2797 subset of Selectors it accepts or excludes, and describing the constraints

2798 it adds to the current specification.

2799

2800 <p>Invalidity is caused by a parsing error, e.g. an unrecognized token or a toke n

2801 which is not allowed at the current parsing point.

2802

2803 <p>User agents must observe the rules for handling parsing errors:

2804 <ul>

2805 <li>a simple selector containing an undeclared namespace prefix is invalid</li >

2806 <li>a selector containing an invalid simple selector, an invalid combinator

2807 or an invalid token is invalid. </li>

2808 <li>a group of selectors containing an invalid selector is invalid.</li>

2809 </ul>

2810

2811 <p class="foo test10 bar">Specifications reusing Selectors must define how to ha ndle parsing

2812 errors. (In the case of CSS, the entire rule in which the selector is

2813 used is dropped.)</p>

2814

2815 <!-- Apparently all these references are out of date:

2816 <p>Implementations of this specification must behave as

2817 "recipients of text data" as defined by <a href="#refsCWWW">[CWWW]</a>

2818 when parsing selectors and attempting matches. (In particular,

2819 implementations must assume the data is normalized and must not

2820 normalize it.) Normative rules for matching strings are defined in

2821 <a href="#refsCWWW">[CWWW]</a> and <a

2822 href="#refsUNICODE">[UNICODE]</a> and apply to implementations of this

2823 specification.</p>-->

2824

2825 <h2><a name=Tests></a>14. Tests</h2>

2826

2827 <p>This specification has <a

2828 href="http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/">a test

2829 suite</a> allowing user agents to verify their basic conformance to

2830 the specification. This test suite does not pretend to be exhaustive

2831 and does not cover all possible combined cases of Selectors.</p>

2832

2833 <h2><a name=ACKS></a>15. Acknowledgements</h2>

2834

2835 <p>The CSS working group would like to thank everyone who has sent

2836 comments on this specification over the years.</p>

2837

2838 <p>The working group would like to extend special thanks to Donna

2839 McManus, Justin Baker, Joel Sklar, and Molly Ives Brower who perfermed

2840 the final editorial review.</p>

2841

2842 <h2><a name=references>16. References</a></h2>

2843

2844 <dl class="refs">

2845

2846 <dt>[CSS1]

2847 <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

2848 <dd>(<code><a href="http://www.w3.org/TR/REC-CSS1">http://www.w3.org/TR/REC-CS S1</a></code>)

2849

2850 <dt>[CSS21]

2851 <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

2852 <dd>(<code><a href="http://www.w3.org/TR/CSS21">http://www.w3.org/TR/CSS21</a> </code>)

2853

2854 <dt>[CWWW]

2855 <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

2856 <dd>(<code><a href="http://www.w3.org/TR/charmod/">http://www.w3.org/TR/charmo d/</a></code>)

2857

2858 <dt>[FLEX]

2859 <dd><a name="refsFLEX"></a> "<cite>Flex: The Lexical Scanner Generator</cite>" , Version 2.3.7, ISBN 1882114213

2860

2861 <dt>[HTML4]

2862 <dd><a name="refsHTML4"></a> Dave Ragget, Arnaud Le Hors, Ian Jacobs, editors; "<cite>HTML 4.01 Specification</cite>", W3C Recommendation, 24 December 1999

2863 <dd>(<a href="http://www.w3.org/TR/html4/"><code>http://www.w3.org/TR/html4/</ code></a>)

2864

2865 <dt>[MATH]

2866 <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

2867 <dd>(<code><a href="http://www.w3.org/TR/REC-MathML/">http://www.w3.org/TR/REC -MathML/</a></code>)

2868

2869 <dt>[RFC3066]

2870 <dd><a name="refsRFC3066"></a> H. Alvestrand; "<cite>Tags for the Identificati on of Languages</cite>", Request for Comments 3066, January 2001

2871 <dd>(<a href="http://www.ietf.org/rfc/rfc3066.txt"><code>http://www.ietf.org/r fc/rfc3066.txt</code></a>)

2872

2873 <dt>[STTS]

2874 <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

2875 <dd>(<code><a href="http://www.w3.org/TR/NOTE-STTS3">http://www.w3.org/TR/NOTE -STTS3</a></code>)

2876

2877 <dt>[SVG]

2878 <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

2879 <dd>(<code><a href="http://www.w3.org/TR/SVG/">http://www.w3.org/TR/SVG/</a></ code>)

2880

2881 <dt>[UNICODE]</dt>

2882 <dd><a name="refsUNICODE"></a> <cite><a

2883 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>.

2884 <dd>(<code><a href="http://www.unicode.org/versions/">http://www.unicode.org/v ersions/</a></code>)</dd>

2885

2886 <dt>[XML10]

2887 <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

2888 <dd>(<a href="http://www.w3.org/TR/REC-xml/"><code>http://www.w3.org/TR/REC-xm l/</code></a>)

2889

2890 <dt>[XMLNAMES]

2891 <dd><a name="refsXMLNAMES"></a> Tim Bray, Dave Hollander, Andrew Layman, edito rs; "<cite>Namespaces in XML</cite>", W3C Recommendation, 14 January 1999

2892 <dd>(<a href="http://www.w3.org/TR/REC-xml-names/"><code>http://www.w3.org/TR/ REC-xml-names/</code></a>)

2893

2894 <dt>[YACC]

2895 <dd><a name="refsYACC"></a> S. C. Johnson; "<cite>YACC — Yet another com piler compiler</cite>", Technical Report, Murray Hill, 1975

2896

2897 </dl>

2898 </body>

2899 </html>

OLD	NEW

« no previous file with comments | « client/dom/benchmarks/dromaeo/tests/dom-query.dart ('k') | client/dom/benchmarks/dromaeo/tests/dom-traverse.dart » ('j') | no next file with comments »