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