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