Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(171)

Side by Side Diff: samples/third_party/dromaeo/tests/dom-traverse-htmlidiomatic.html

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

Powered by Google App Engine
This is Rietveld 408576698