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