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