PageRenderTime 393ms CodeModel.GetById 52ms RepoModel.GetById 1ms app.codeStats 0ms

/nodeJSstudy/superagent&cheerio pachong/node_modules/cheerio/node_modules/CSSselect/test/tools/docs/W3C_Selectors.html
HTML | 978 lines | 948 code | 22 blank | 8 comment | 0 complexity | 8a46386ecf60270199da0e7325807d7f MD5 | raw file
  1. <!-- -->
  2. <html><head><title>Selectors</title>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  4. <meta http-equiv="Content-Style-Type" content="text/css">
  5. <meta http-equiv="Content-Language" content="en">
  6. <link href="default.css" type="text/css" rel="stylesheet">
  7. <style type="text/css">
  8. pre {
  9. border-right: medium none; padding-right: 0.3cm; border-top: medium none; padding-left: 0.3cm; font-size: 92%; padding-bottom: 0px; margin: 1em 1cm; border-left: medium none; padding-top: 0px; border-bottom: medium none; white-space: pre; background-color: #d5d5d5
  10. }
  11. .code {
  12. font-family: monospace
  13. }
  14. table.selectorsReview th {
  15. background: gray; color: white
  16. }
  17. table.selectorsReview th .pattern {
  18. width: 20%; font-family: monospace
  19. }
  20. table.selectorsReview th .meaning {
  21. width: 45%
  22. }
  23. table.selectorsReview tr .described {
  24. WIDTH: 25%
  25. }
  26. table.selectorsReview tr .origin {
  27. width: 10%; text-align: center
  28. }
  29. table.tprofile th.title {
  30. background: gray; color: white
  31. }
  32. table.tprofile th {
  33. width: 29%
  34. }
  35. table.tprofile td {
  36. width: 71%
  37. }
  38. .toc {
  39. list-style-type: none
  40. }
  41. .subtoc ul {
  42. list-style-type: none
  43. }
  44. .subtoc ol {
  45. list-style-type: none
  46. }
  47. .profile {
  48. margin: 1cm
  49. }
  50. .editorNote {
  51. color: red; font-style: italic
  52. }
  53. .e-mail {
  54. font-size: 90%
  55. }
  56. h1 {
  57. font-size: 200%
  58. }
  59. h2 {
  60. font-size: 170%
  61. }
  62. h3 {
  63. font-size: 150%
  64. }
  65. h4 {
  66. font-size: 130%
  67. }
  68. h5 {
  69. font-size: 120%
  70. }
  71. h6 {
  72. font-size: 110%
  73. }
  74. ul.changes {
  75. font-size: smaller
  76. }
  77. table.selectorsReview {
  78. font-size: smaller; border-collapse: collapse
  79. }
  80. .figure {
  81. text-align: center
  82. }
  83. </style>
  84. <link href="" type="text/css" rel="stylesheet">
  85. </head>
  86. <body>
  87. <div class="head"><p><a href=""><img height="48" alt="W3C" src="" width="72"></a>
  88. </p><h1><span class="modulename">Selectors</span></h1>
  89. <h2>W3C Candidate Recommendation 13 November 2001</h2>
  90. <dl>
  91. <dt>This version:
  92. </dt><dd><a href="">
  94. </dd><dt>Latest version:
  95. </dt><dd><a href="">
  97. </dd><dt>Previous version:
  98. </dt><dd><a href="">
  100. </dd><dt><a name="editors-list"></a>Editors:
  101. </dt><dd><a href="">Daniel Glazman</a> (<span class="company"><a href="">Netscape/AOL</a></span>)
  102. </dd><dd><a href="">Tantek Çelik</a> (<span class="company"><a href="">Microsoft Corporation</a></span>)
  103. </dd><dd><a href="">Ian Hickson</a>
  104. </dd><dd>Peter Linss (former editor, formerly of&nbsp;<span class="company"><a href="">Netscape/AOL</a></span>)
  105. </dd><dd>John Williams (former editor, <span class="company"><a href="">Quark, Inc.</a></span>)
  106. </dd></dl>
  107. <p class="copyright"><a href="">Copyright</a>
  108. ©2001 <a href=""><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href=""><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href=""><abbr lang="fr" title="Institut National de Recherche en Informatique et Automatique">INRIA</abbr></a>,
  109. <a href="">Keio</a>), All Rights Reserved. W3C <a href="">liability</a>,
  110. <a href="">trademark</a>,
  111. <a href="">document
  112. use</a> and <a href="">software
  113. licensing</a> rules apply.
  114. </p><hr title="Separator for header">
  115. </div>
  116. <h2><a name="abstract"></a>Abstract</h2>
  117. <p><acronym title="Cascading Style Sheets">CSS</acronym> (Cascading Style Sheets) is a language for describing the rendering of
  118. <acronym title="Hypertext Markup Language">HTML</acronym> and <acronym title="Extensible Markup Language">XML</acronym>
  119. documents on screen, on paper, in speech, etc. To bind style properties
  120. to elements in the document, CSS uses <em>selectors,</em> which are patterns
  121. that match one or more elements. This document describes the selectors that are proposed
  122. for CSS level 3. It includes and extends the selectors of CSS level 2.
  123. </p><h2><a name="status"></a>Status of this document</h2>
  124. <p>This document is one of the "modules" of the upcoming CSS3 specification. It
  125. not only describes the selectors that already exist in <a href="#CSS1"><abbr title="CSS level 1">CSS1</abbr></a> and <a href="#CSS2"><abbr title="CSS level 2">CSS2</abbr></a>,
  126. but also proposes new selectors for <abbr title="CSS level 3">CSS3</abbr> as well as for
  127. other languages that may need them. The CSS Working Group doesn't expect that all
  128. implementations of CSS3 will have to implement all selectors. Instead,
  129. there will probably be a small number of variants of CSS3, so-called "profiles".
  130. For example, it may be that only a profile for non-interactive user agents
  131. will include all of the proposed selectors.
  132. </p><p>This specification is being put forth as a <a href="">Candidate
  133. Recommendation</a> by the <a href="">CSS Working
  134. Group</a>. This document is a revision of the <a href="">Working
  135. Draft dated 2001 January 26</a>, and has incorporated suggestions received
  136. during last call review, comments, and further deliberations of the W3C CSS
  137. Working Group.
  138. </p><p>The duration of Candidate Recommendation is expected to last approximately
  139. six months (ending <strong>May, 2002</strong>). All persons are encouraged
  140. to review and implement this specification and return comments to the (<a href="">archived</a>) public mailing
  141. list <a href="">www-style</a> (see <a href="">instructions</a>).
  142. W3C Members can also send comments directly to the CSS Working Group.
  143. </p><p>Should this specification prove impossible to implement, the Working Group
  144. will return the document to Working Draft status and make necessary changes.
  145. Otherwise, the Working Group anticipates asking the W3C Director to advance
  146. this document to Proposed Recommendation.
  147. </p><p>This is still a draft document and may be updated, replaced, or obsoleted by
  148. other documents at any time. It is inappropriate to cite a W3C Candidate Recommendation
  149. as other than "work in progress." A list of current W3C working drafts
  150. can be found at <a href=""></a>.<br>
  151. <br>
  152. This document may be available in <a href="">translation</a>.
  153. The English version of this specification is the only normative version.
  154. </p><h2><a name="dependencies"></a>Dependencies with other CSS3 Modules</h2>
  155. <ul>
  156. <li>General Syntax
  157. </li><li>Value Assignment, Cascade and Inheritance
  158. </li><li>Generated Content / Markers
  159. </li><li>User Interface
  160. </li></ul>
  161. <div class="subtoc">
  162. <h2><a name="contents">Table of contents</a></h2>
  163. <ul class="toc">
  164. <li class="tocline2"><a href="#context">1.
  165. Context</a>
  166. <ul>
  167. <li><a href="#changesFromCSS2">1.1
  168. Changes from CSS2</a> </li></ul>
  169. </li><li class="tocline2"><a href="#selectors">2.
  170. Selectors</a>
  171. </li><li class="tocline2"><a href="#casesens">3.
  172. Case sensitivity</a>
  173. </li><li class="tocline2"><a href="#selector-syntax">4. Selector
  174. syntax</a>
  175. </li><li class="tocline2"><a href="#grouping">5.
  176. Groups of selectors</a>
  177. </li><li class="tocline2"><a href="#simple-selectors">6. Simple
  178. selectors</a>
  179. <ul class="toc">
  180. <li class="tocline3"><a href="#type-selectors">6.1 Type
  181. selectors</a>
  182. <ul class="toc">
  183. <li class="tocline4"><a href="#typenmsp">6.1.1 Type selectors
  184. and Namespaces</a> </li></ul>
  185. </li><li class="tocline3"><a href="#universal-selector">6.2 Universal
  186. selector</a>
  187. <ul>
  188. <li><a href="#univnmsp">6.2.1
  189. Universal selector and Namespaces</a> </li></ul>
  190. </li><li class="tocline3"><a href="#attribute-selectors">6.3
  191. Attribute selectors</a>
  192. <ul class="toc">
  193. <li class="tocline4"><a href="#attribute-representation">6.3.1
  194. Representation of attributes and attributes values</a>
  195. </li><li><a href="#attribute-substrings">6.3.2
  196. Substring matching attribute selectors</a>
  197. </li><li class="tocline4"><a href="#attrnmsp">6.3.3 Attribute
  198. selectors and Namespaces</a>
  199. </li><li class="tocline4"><a href="#def-values">6.3.4 Default
  200. attribute values in DTDs</a> </li></ul>
  201. </li><li class="tocline3"><a href="#class-html">6.4 Class
  202. selectors</a>
  203. </li><li class="tocline3"><a href="#id-selectors">6.5 ID
  204. selectors</a>
  205. </li><li class="tocline3"><a href="#pseudo-classes">6.6
  206. Pseudo-classes</a>
  207. <ul class="toc">
  208. <li class="tocline4"><a href="#dynamic-pseudos">6.6.1 Dynamic
  209. pseudo-classes</a>
  210. </li><li class="tocline4"><a href="#target-pseudo">6.6.2 The
  211. :target pseudo-class</a>
  212. </li><li class="tocline4"><a href="#lang-pseudo">6.6.3 The :lang()
  213. pseudo-class</a>
  214. </li><li class="tocline4"><a href="#UIstates">6.6.4 UI element
  215. states pseudo-classes</a>
  216. </li><li class="tocline4"><a href="#structural-pseudos">6.6.5
  217. Structural pseudo-classes</a>
  218. <ul>
  219. <li><a href="#root-pseudo">:root
  220. pseudo-class</a>
  221. </li><li><a href="#nth-child-pseudo">:nth-child()
  222. pseudo-class</a>
  223. </li><li><a href="#nth-last-child-pseudo">:nth-last-child()</a>
  224. </li><li><a href="#nth-of-type-pseudo">:nth-of-type()
  225. pseudo-class</a>
  226. </li><li><a href="#nth-last-of-type-pseudo">:nth-last-of-type()</a>
  227. </li><li><a href="#first-child-pseudo">:first-child
  228. pseudo-class</a>
  229. </li><li><a href="#last-child-pseudo">:last-child
  230. pseudo-class</a>
  231. </li><li><a href="#first-of-type-pseudo">:first-of-type
  232. pseudo-class</a>
  233. </li><li><a href="#last-of-type-pseudo">:last-of-type
  234. pseudo-class</a>
  235. </li><li><a href="#only-child-pseudo">:only-child
  236. pseudo-class</a>
  237. </li><li><a href="#only-of-type-pseudo">:only-of-type
  238. pseudo-class</a>
  239. </li><li><a href="#empty-pseudo">:empty
  240. pseudo-class</a> </li></ul>
  241. </li><li class="tocline4"><a href="#content-selectors">6.6.6
  242. Content pseudo-class</a>
  243. </li><li><a href="#negation">6.6.7 The
  244. negation pseudo-class</a> </li></ul></li></ul>
  245. </li><li><a href="#pseudo-elements">7.
  246. Pseudo-elements</a>
  247. <ul>
  248. <li><a href="#first-line">7.1 The
  249. :first-line pseudo-element</a>
  250. </li><li><a href="#first-letter">7.2 The
  251. :first-letter pseudo-element</a>
  252. </li><li><a href="#UIfragments">7.3 UI
  253. element fragments pseudo-elements</a>
  254. </li><li><a href="#gen-content">7.4 The
  255. :before and :after pseudo-elements</a> </li></ul>
  256. </li><li class="tocline2"><a href="#combinators">8. Combinators</a>
  257. <ul class="toc">
  258. <li class="tocline3"><a href="#descendant-combinators">8.1
  259. Descendant combinators</a>
  260. </li><li class="tocline3"><a href="#child-combinators">8.2 Child
  261. combinators</a>
  262. </li><li class="tocline3"><a href="#adjacent-combinators">8.3
  263. Adjacent sibling combinators</a>
  264. <ul class="toc">
  265. <li class="tocline4"><a href="#adjacent-d-combinators">8.3.1
  266. Adjacent direct combinators</a>
  267. </li><li class="tocline4"><a href="#adjacent-i-combinators">8.3.2
  268. Adjacent indirect combinators</a> </li></ul></li></ul>
  269. </li><li class="tocline2"><a href="#specificity">9. Calculating a
  270. selector's specificity</a>
  271. </li><li class="tocline2"><a href="#w3cselgrammar">10. The grammar of
  272. <span class="modulename">Selectors</span></a>
  273. <ul class="toc">
  274. <li class="tocline3"><a href="#grammar">10.1 Grammar</a>
  275. </li><li class="tocline3"><a href="#lex">10.2
  276. Lexical scanner</a> </li></ul>
  277. </li><li class="tocline2"><a href="#downlevel">11. Namespaces and
  278. Down-Level clients</a>
  279. </li><li class="tocline2"><a href="#profiling">12. Profiles</a>
  280. </li><li><a href="#Conformance">13. Conformance
  281. and Requirements</a>
  282. </li><li><a href="#Tests">14. Tests</a>
  283. </li><li><a href="#ACKS">15.
  284. Acknowledgements</a>
  285. </li><li class="tocline2"><a href="#references">16. References</a> <!--<li class="tocline2"><a href="#changes">Changes from previous version</a>--></li></ul></div>
  286. <h2><a name="context">1. Context</a></h2>
  287. <p>Members of the CSS+FP Working Group proposed during the Clamart meeting to
  288. modularize the CSS specification.
  289. </p><p>This modularization, and the externalization of the general syntax of CSS
  290. will reduce the size of the specification and allow new specifications
  291. to use selectors and/or CSS general syntax. For instance, behaviors or tree
  292. transformations.
  293. </p><p>This specification contains its own <a href="#Tests">test cases</a>, one test per concept introduced in this document.
  294. These tests are not full conformance tests but are intended to provide users
  295. with a way to check if a part of this specification is implemented <i>ad minima</i>
  296. or is not implemented at all.
  297. </p><h3><a name="changesFromCSS2"></a>1.1 Changes from CSS2</h3>
  298. <p>The main differences between the selectors in CSS2 and those in
  299. <span class="modulename">Selectors</span> are:
  300. </p><ul>
  301. <li>the list of basic definitions (selector, group of selectors, simple
  302. selector, etc.) has been clarified
  303. </li><li>an optional namespace component is now allowed in type element selectors,
  304. the universal selector and attribute selectors
  305. </li><li>a new combinator
  306. </li><li>new simple selectors including substring matching attribute selectors, and new
  307. pseudo-classes
  308. </li><li>new pseudo-elements, and introduction of the "::" convention for pseudo-elements
  309. </li><li>a rewriting of the selectors grammar
  310. </li><li>profiles to be added to specifications integrating <span class="modulename">Selectors</span> and
  311. defining the set of selectors which is actually supported by each
  312. specification
  313. </li><li><span class="modulename">Selectors</span> are now a CSS3 Module and an independent specification.
  314. Other specifications can now refer to this document independently of CSS
  315. </li><li>the specification now contains its own test suite. </li>
  316. </ul>
  317. <h2><a name="selectors"></a>2. Selectors</h2>
  318. <p>A <span class="propernoun">Selector</span> represents a structure. This structure can be used
  319. as a condition (e.g. in a CSS rule) that determines which elements
  320. a selector matches in the document tree, or as a flat description of the
  321. HTML or XML fragment corresponding to that structure.
  322. </p><p><span class="propernoun">Selectors</span> may range from simple element names to rich contextual
  323. representations.
  324. </p><p>The following table summarizes <span class="propernoun">Selector</span> syntax:
  325. </p><table class="selectorsreview" width="100%" border="1">
  326. <tbody>
  327. <tr>
  328. <th class="pattern">Pattern</th>
  329. <th class="meaning">Meaning</th>
  330. <th class="described">Described in section</th>
  331. <th class="origin">First defined in CSS level</th></tr>
  332. <tr>
  333. <td class="pattern">*</td>
  334. <td class="meaning">any element</td>
  335. <td class="described"><a href="#universal-selector">Universal
  336. selector</a></td>
  337. <td class="origin">2</td></tr>
  338. <tr>
  339. <td class="pattern">E</td>
  340. <td class="meaning">an element of type E</td>
  341. <td class="described"><a href="#type-selectors">Type selector</a></td>
  342. <td class="origin">1</td></tr>
  343. <tr>
  344. <td class="pattern">E[foo]</td>
  345. <td class="meaning">an E element with a "foo" attribute</td>
  346. <td class="described"><a href="#attribute-selectors">Attribute
  347. selectors</a></td>
  348. <td class="origin">2</td></tr>
  349. <tr>
  350. <td class="pattern">E[foo="bar"]</td>
  351. <td class="meaning">an E element whose "foo" attribute value is exactly
  352. equal to "bar"</td>
  353. <td class="described"><a href="#attribute-selectors">Attribute
  354. selectors</a></td>
  355. <td class="origin">2</td></tr>
  356. <tr>
  357. <td class="pattern">E[foo~="bar"]</td>
  358. <td class="meaning">an E element whose "foo" attribute value is a list of
  359. space-separated values, one of which is exactly equal to "bar"</td>
  360. <td class="described"><a href="#attribute-selectors">Attribute
  361. selectors</a></td>
  362. <td class="origin">2</td></tr>
  363. <tr>
  364. <td class="pattern">E[foo^="bar"]</td>
  365. <td class="meaning">an E element whose "foo" attribute value begins exactly
  366. with the string "bar"</td>
  367. <td class="described"><a href="#attribute-selectors">Attribute
  368. selectors</a></td>
  369. <td class="origin">3</td></tr>
  370. <tr>
  371. <td class="pattern">E[foo$="bar"]</td>
  372. <td class="meaning">an E element whose "foo" attribute value ends exactly
  373. with the string "bar"</td>
  374. <td class="described"><a href="#attribute-selectors">Attribute
  375. selectors</a></td>
  376. <td class="origin">3</td></tr>
  377. <tr>
  378. <td class="pattern">E[foo*="bar"]</td>
  379. <td class="meaning">an E element whose "foo" attribute value contains the
  380. substring "bar"</td>
  381. <td class="described"><a href="#attribute-selectors">Attribute
  382. selectors</a></td>
  383. <td class="origin">3</td></tr>
  384. <tr>
  385. <td class="pattern">E[hreflang|="en"]</td>
  386. <td class="meaning">an E element whose "hreflang" attribute has a hyphen-separated
  387. list of values beginning (from the left) with "en"</td>
  388. <td class="described"><a href="#attribute-selectors">Attribute
  389. selectors</a></td>
  390. <td class="origin">2</td></tr>
  391. <tr>
  392. <td class="pattern">E:root</td>
  393. <td class="meaning">an E element, root of the document</td>
  394. <td class="described"><a href="#structural-pseudos">Structural
  395. pseudo-classes</a></td>
  396. <td class="origin">3</td></tr>
  397. <tr>
  398. <td class="pattern">E:nth-child(n)</td>
  399. <td class="meaning">an E element, the n-th child of its parent</td>
  400. <td class="described"><a href="#structural-pseudos">Structural
  401. pseudo-classes</a></td>
  402. <td class="origin">3</td></tr>
  403. <tr>
  404. <td class="pattern">E:nth-last-child(n)</td>
  405. <td class="meaning">an E element, the n-th child of its parent, counting
  406. from the last one</td>
  407. <td class="described"><a href="#structural-pseudos">Structural
  408. pseudo-classes</a></td>
  409. <td class="origin">3</td></tr>
  410. <tr>
  411. <td class="pattern">E:nth-of-type(n)</td>
  412. <td class="meaning">an E element, the n-th sibling of its type</td>
  413. <td class="described"><a href="#structural-pseudos">Structural
  414. pseudo-classes</a></td>
  415. <td class="origin">3</td></tr>
  416. <tr>
  417. <td class="pattern">E:nth-last-of-type(n)</td>
  418. <td class="meaning">an E element, the n-th sibling of its type, counting
  419. from the last one</td>
  420. <td class="described"><a href="#structural-pseudos">Structural
  421. pseudo-classes</a></td>
  422. <td class="origin">3</td></tr>
  423. <tr>
  424. <td class="pattern">E:first-child</td>
  425. <td class="meaning">an E element, first child of its parent</td>
  426. <td class="described"><a href="#structural-pseudos">Structural
  427. pseudo-classes</a></td>
  428. <td class="origin">2</td></tr>
  429. <tr>
  430. <td class="pattern">E:last-child</td>
  431. <td class="meaning">an E element, last child of its parent</td>
  432. <td class="described"><a href="#structural-pseudos">Structural
  433. pseudo-classes</a></td>
  434. <td class="origin">3</td></tr>
  435. <tr>
  436. <td class="pattern">E:first-of-type</td>
  437. <td class="meaning">an E element, first sibling of its type</td>
  438. <td class="described"><a href="#structural-pseudos">Structural
  439. pseudo-classes</a></td>
  440. <td class="origin">3</td></tr>
  441. <tr>
  442. <td class="pattern">E:last-of-type</td>
  443. <td class="meaning">an E element, last sibling of its type</td>
  444. <td class="described"><a href="#structural-pseudos">Structural
  445. pseudo-classes</a></td>
  446. <td class="origin">3</td></tr>
  447. <tr>
  448. <td class="pattern">E:only-child</td>
  449. <td class="meaning">an E element, only child of its parent</td>
  450. <td class="described"><a href="#structural-pseudos">Structural
  451. pseudo-classes</a></td>
  452. <td class="origin">3</td></tr>
  453. <tr>
  454. <td class="pattern">E:only-of-type</td>
  455. <td class="meaning">an E element, only sibling of its type</td>
  456. <td class="described"><a href="#structural-pseudos">Structural
  457. pseudo-classes</a></td>
  458. <td class="origin">3</td></tr>
  459. <tr>
  460. <td class="pattern">E:empty</td>
  461. <td class="meaning">an E element that has no children (including text
  462. nodes)</td>
  463. <td class="described"><a href="#structural-pseudos">Structural
  464. pseudo-classes</a></td>
  465. <td class="origin">3</td></tr>
  466. <tr>
  467. <td class="pattern">E:link <br>E:visited</td>
  468. <td class="meaning">an E element being the source anchor of a hyperlink of
  469. which the target is not yet visited (:link) or already visited
  470. (:visited)</td>
  471. <td class="described"><a href="#link">The link
  472. pseudo-classes</a></td>
  473. <td class="origin">1</td></tr>
  474. <tr>
  475. <td class="pattern">E:active <br>E:hover <br>E:focus</td>
  476. <td class="meaning">an E element during certain user actions</td>
  477. <td class="described"><a href="#useraction-pseudos">The user
  478. action pseudo-classes</a></td>
  479. <td class="origin">1 and 2</td></tr>
  480. <tr>
  481. <td class="pattern">E:target</td>
  482. <td class="meaning">an E element being the target of the referring URI</td>
  483. <td class="described"><a href="#target-pseudo">The target
  484. pseudo-class</a></td>
  485. <td class="origin">3</td></tr>
  486. <tr>
  487. <td class="pattern">E:lang(fr)</td>
  488. <td class="meaning">an element of type E in language "fr" (the document
  489. language specifies how language is determined)</td>
  490. <td class="described"><a href="#lang-pseudo">The :lang()
  491. pseudo-class&nbsp;</a></td>
  492. <td class="origin">2</td></tr>
  493. <tr>
  494. <td class="pattern">E:enabled<br>E:disabled&nbsp;</td>
  495. <td class="meaning">a user interface element E which is enabled or
  496. disabled</td>
  497. <td class="described"><a href="#UIstates">The UI element states
  498. pseudo-classes</a></td>
  499. <td class="origin">3</td></tr>
  500. <tr>
  501. <td class="pattern">E:checked<br>E:indeterminate&nbsp;</td>
  502. <td class="meaning">a user interface element E which is checked or in an
  503. indeterminate state (for instance a radio-button or checkbox)</td>
  504. <td class="described"><a href="#UIstates">The UI element states
  505. pseudo-classes</a></td>
  506. <td class="origin">3</td></tr>
  507. <tr>
  508. <td class="pattern">E:contains("foo")</td>
  509. <td class="meaning">an E element containing the substring "foo" in its textual
  510. contents</td>
  511. <td class="described"><a href="#content-selectors">Content
  512. pseudo-class</a></td>
  513. <td class="origin">3</td></tr>
  514. <tr>
  515. <td class="pattern">E::first-line</td>
  516. <td class="meaning">the first formatted line of an E element</td>
  517. <td class="described"><a href="#first-line">The :first-line
  518. pseudo-element</a></td>
  519. <td class="origin">1</td></tr>
  520. <tr>
  521. <td class="pattern">E::first-letter</td>
  522. <td class="meaning">the first formatted letter of an E element</td>
  523. <td class="described"><a href="#first-letter">The :first-letter
  524. pseudo-element</a></td>
  525. <td class="origin">1</td></tr>
  526. <tr>
  527. <td class="pattern">E::selection</td>
  528. <td class="meaning">the portion of an E element that is currently
  529. selected/highlighted by the user</td>
  530. <td class="described"><a href="#UIfragments">The UI element
  531. fragments pseudo-elements</a></td>
  532. <td class="origin">3</td></tr>
  533. <tr>
  534. <td class="pattern">E::before</td>
  535. <td class="meaning">generated content before an E element</td>
  536. <td class="described"><a href="#gen-content">The :before
  537. pseudo-element</a></td>
  538. <td class="origin">2</td></tr>
  539. <tr>
  540. <td class="pattern">E::after</td>
  541. <td class="meaning">generated content after an E element</td>
  542. <td class="described"><a href="#gen-content">The :after
  543. pseudo-element</a></td>
  544. <td class="origin">2</td></tr>
  545. <tr>
  546. <td class="pattern">E.warning</td>
  547. <td class="meaning">an E element whose class is
  548. "warning" (the document language specifies how class is determined).</td>
  549. <td class="described"><a href="#class-html">Class
  550. selectors</a></td>
  551. <td class="origin">1</td></tr>
  552. <tr>
  553. <td class="pattern">E#myid</td>
  554. <td class="meaning">an E element with ID equal to "myid".</td>
  555. <td class="described"><a href="#id-selectors">ID
  556. selectors</a></td>
  557. <td class="origin">1</td></tr>
  558. <tr>
  559. <td class="pattern">E:not(s)</td>
  560. <td class="meaning">an E element that does not match simple selector s</td>
  561. <td class="described"><a href="#negation">Negation
  562. pseudo-class</a></td>
  563. <td class="origin">3</td></tr>
  564. <tr>
  565. <td class="pattern">E F</td>
  566. <td class="meaning">an F element descendant of an E element</td>
  567. <td class="described"><a href="#descendant-combinators">Descendant
  568. combinator</a></td>
  569. <td class="origin">1</td></tr>
  570. <tr>
  571. <td class="pattern">E &gt; F</td>
  572. <td class="meaning">an F element child of an E element</td>
  573. <td class="described"><a href="#child-combinators">Child
  574. combinator</a></td>
  575. <td class="origin">2</td></tr>
  576. <tr>
  577. <td class="pattern">E + F</td>
  578. <td class="meaning">an F element immediately preceded by an E element</td>
  579. <td class="described"><a href="#adjacent-d-combinators">Direct
  580. adjacent combinator</a></td>
  581. <td class="origin">2</td></tr>
  582. <tr>
  583. <td class="pattern">E ~ F</td>
  584. <td class="meaning">an F element preceded by an E element</td>
  585. <td class="described"><a href="#adjacent-i-combinators">Indirect
  586. adjacent combinator</a></td>
  587. <td class="origin">3</td></tr></tbody></table>
  588. <p>The meaning of each selector is derived from the table above by
  589. prepending "matches" to the contents of each cell of the "Meaning" column.
  590. </p><h2><a name="casesens">3. Case sensitivity</a></h2>
  591. <p>The case-sensitivity of document language element names in selectors depends
  592. on the document language. For example, in HTML, element names are
  593. case-insensitive, but in XML they are case-sensitive.
  594. </p><p>The case-sensitivity of attribute names and attribute values in attribute
  595. selectors also depends on the document language.
  596. </p><h2><a name="selector-syntax">4. Selector syntax</a></h2>
  597. <p>A&nbsp;<dfn><a name="selector">selector</a></dfn> is a chain of one or more <a href="#sequence">sequences of simple
  598. selectors</a> separated by <a href="#combinators">combinators</a>.
  599. </p><p>A&nbsp;<dfn><a name="sequence">sequence of simple selectors</a></dfn> is a chain
  600. of <a href="#simple-selectors-dfn">simple selectors</a> that are not separated by a
  601. <a href="#combinators">combinator</a>. It always begins with a <a href="#type-selectors">type selector</a> or a <a href="#universal-selector">universal
  602. selector</a>. No other type selector or universal selector is allowed in the
  603. sequence.
  604. </p><p>A&nbsp;<dfn><a name="simple-selectors-dfn"></a><a href="#simple-selectors">simple selector</a></dfn> is either a <a href="#type-selectors">type selector</a>, <a href="#universal-selector">universal selector</a>, <a href="#attribute-selectors">attribute selector</a>, <a href="#id-selectors">ID
  605. selector</a>, <a href="#content-selectors">content selector</a>, or <a href="#pseudo-classes">pseudo-class</a>. One <a href="#pseudo-elements">pseudo-element</a> may be appended to the last sequence
  606. of simple selectors.
  607. </p><p><dfn>Combinators</dfn> are: white space, "greater-than sign" (<code>&gt;</code>),
  608. "plus sign" (<code>+</code>) and "tilde" (<code>~</code>).
  609. White space may appear between a combinator and the simple selectors around
  610. it. <a name="whitespace"></a>Only the characters "space" (Unicode code 32), "tab"
  611. (9), "line feed" (10), "carriage return" (13), and "form feed" (12) can occur
  612. in white space. Other space-like characters, such as "em-space" (8195) and "ideographic
  613. space" (12288), are never part of white space.
  614. </p><p>The elements of the document tree represented by a selector are called <dfn><a name="subject"></a>subjects
  615. of the selector</dfn>. A selector consisting of a single sequence of simple
  616. selectors represents any element satisfying its requirements. Prepending another
  617. sequence of simple selectors and a combinator to a sequence imposes additional
  618. matching constraints, so the subjects of a selector are always a subset of the
  619. elements represented by the rightmost sequence of simple selectors.
  620. </p><p><strong><em>Note</em></strong><em>: an empty selector, containing no sequence
  621. of simple selectors and no combinator, is an <a href="#Conformance">invalid
  622. selector</a>.</em>
  623. </p><h2><a name="grouping">5. Groups of selectors</a></h2>
  624. <p>When several selectors share the same declarations, they may be grouped into
  625. a comma-separated list.
  626. </p><div class="example">CSS example(s):
  627. <p>In this example, we condense three rules with identical declarations into
  628. one. Thus, </p><pre>h1 { font-family: sans-serif }
  629. h2 { font-family: sans-serif }
  630. h3 { font-family: sans-serif }</pre>is equivalent to: <pre>h1, h2, h3 { font-family: sans-serif }</pre></div>
  631. <p><b>Warning</b>: the equivalence is true in this example because all selectors
  632. are valid selectors. If just one of these selectors is invalid, the entire group
  633. of selectors is invalid thus invalidating the rule for all three heading elements,
  634. whereas only one of the three individual heading rules would be invalid.
  635. </p><h2><a name="simple-selectors">6. Simple selectors</a></h2>
  636. <h3><a name="type-selectors">6.1 Type selector</a></h3>
  637. <p>A&nbsp;<dfn>type selector</dfn> is the name of a document language element
  638. type. A type selector represents an instance of the element type in the document
  639. tree.
  640. </p><div class="example">Example:
  641. <p>The following selector represents an <code>h1</code> element in the document
  642. tree: </p><pre>h1</pre></div>
  643. <h4><a name="typenmsp">6.1.1 Type selectors and Namespaces</a></h4>
  644. <p>Type selectors allow an optional namespace (<a href="#XMLNAMES">[XML-NAMES]</a>) component.
  645. A namespace prefix that has been previously declared
  646. may be prepended to the element name separated by the namespace separator
  647. "vertical bar" (<code>|</code>). The namespace component may be left
  648. empty to indicate that the selector is only to represent elements with no declared
  649. namespace. Furthermore, an asterisk may be used for the namespace prefix, indicating
  650. that the selector represents elements in any namespace (including elements
  651. with no namespace). Element type selectors that have no namespace component
  652. (no namespace separator), represent elements without regard
  653. to the element's namespace (equivalent to "<code>*|</code>") unless a default
  654. namespace has been declared. In that case, the selector will represent only
  655. elements in the default namespace.
  656. </p><p>Note : a type selector containing a namespace prefix that has not been previously
  657. declared is an <a href="#Conformance">invalid</a> selector.
  658. The mechanism for declaring a namespace prefix is left up to the language
  659. implementing <span class="modulename">Selectors</span>.
  660. In CSS, such a mechanism is defined in the General Syntax module.
  661. <!--<p>An alternative approach would be to define element type selectors that have
  662. no namespace component to match only elements that have no namespace (unless
  663. a default namespace has been declared in the CSS). This would make the selector
  664. "<code>h1</code>" equivalent to the selector "<code>|h1</code>" as opposed to
  665. "<code>*|h1</code>". The downside to this approach is that legacy style sheets
  666. (those written without any namespace constructs) will fail to match in all XML
  667. documents where namespaces are used throughout, e.g. all XHTML documents. -->
  668. </p><p>It should be noted that if a namespace prefix used in a selector has not been
  669. previously declared, then the selector must be considered invalid and the entire
  670. style rule will be ignored in accordance with the <a href="#Conformance">standard
  671. error handling rules</a>.
  672. </p><p>It should further be noted that in a namespace aware client, element type
  673. selectors will only match against the <a href="">local part</a> of the
  674. element's <a href="">qualified
  675. name</a>. See <a href="#downlevel">below</a>
  676. for notes about matching behaviors in down-level clients.
  677. </p><p>In summary:
  678. </p><dl>
  679. <dt><code>ns|E</code>
  680. </dt><dd>elements with name E in namespace ns
  681. </dd><dt><code>*|E</code>
  682. </dt><dd>elements with name E in any namespace, including those without any
  683. declared namespace
  684. </dd><dt><code>|E</code>
  685. </dt><dd>elements with name E without any declared namespace
  686. </dd><dt><code>E</code>
  687. </dt><dd>if no default namespace has been specified, this is equivalent to *|E.
  688. Otherwise it is equivalent to ns|E where ns is the default namespace. </dd></dl>
  689. <div class="example">
  690. <p>CSS examples:
  691. </p><pre>@namespace foo url(;
  692. foo|h1 { color: blue }
  693. foo|* { color: yellow }
  694. |h1 { color: red }
  695. *|h1 { color: green }
  696. h1 { color: green }</pre>
  697. <p>The first rule will match only <code>h1</code> elements in the ""
  698. namespace.
  699. </p><p>The second rule will match all elements in the "" namespace.
  700. </p><p>The third rule will match only <code>h1</code> elements without any declared
  701. namespace.
  702. </p><p>The fourth rule will match <code>h1</code> elements in any namespace (including
  703. those without any declared namespace).
  704. </p><p>The last rule is equivalent to the fourth rule because no default namespace
  705. has been defined.</p></div>
  706. <h3><a name="universal-selector">6.2 Universal selector</a> </h3>
  707. <p>The&nbsp;<dfn>universal selector</dfn>, written "asterisk" (<code>*</code>),
  708. represents the qualified name of any element type. It represents then any single
  709. element in the document tree in any namespace (including those without any declared
  710. namespace) if no default namespace has been specified. If a default namespace
  711. has been specified, see <a href="#univnmsp">Universal selector and Namespaces</a> below.
  712. </p><p>If the universal selector is not the only component of a sequence of simple
  713. selectors, the <code>*</code> may be omitted. For example:
  714. </p><div class="example">
  715. <ul>
  716. <li><code>*[hreflang|=en]</code> and <code>[hreflang|=en]</code> are equivalent,
  717. </li><li><code>*.warning</code> and <code>.warning</code> are equivalent,
  718. </li><li><code>*#myid</code> and <code>#myid</code> are equivalent. </li></ul></div>
  719. <p><b>Note</b>: it is recommended that the <code>*</code>, representing the
  720. universal selector, not be omitted.
  721. </p><h4><a name="univnmsp">6.2.1 Universal selector and Namespaces</a></h4>
  722. <p>The universal selector allows an optional namespace component.
  723. </p><dl>
  724. <dt><code>ns|*</code>
  725. </dt><dd>all elements in namespace ns
  726. </dd><dt><code>*|*</code>
  727. </dt><dd>all elements
  728. </dd><dt><code>|*</code>
  729. </dt><dd>all elements without any declared namespace
  730. </dd><dt><code>*</code>
  731. </dt><dd>if no default namespace has been specified, this is equivalent to *|*.
  732. Otherwise it is equivalent to ns|* where ns is the default namespace. </dd></dl>
  733. <p>Note: a universal selector containing a namespace prefix that has not been
  734. previously declared is an <a href="#Conformance">invalid</a> selector.
  735. The mechanism for declaring a namespace prefix is left up to the language
  736. implementing <span class="modulename">Selectors</span>.
  737. In CSS, such a mechanism is defined in the General Syntax module.
  738. </p><h3><a name="attribute-selectors">6.3 Attribute selectors</a></h3>
  739. <p><span class="propernoun">Selectors</span> allow the representation of an element's attributes.
  740. </p><h4><a name="attribute-representation">6.3.1 Attribute presence and values
  741. selectors</a></h4>
  742. <p>CSS2 introduced four attribute selectors:
  743. </p><dl>
  744. <dt><code>[att]</code>
  745. </dt><dd>Represents the <code>att</code> attribute, whatever the value of the
  746. attribute.
  747. </dd><dt><code>[att=val]</code>
  748. </dt><dd>Represents the <code>att</code> attribute with value exactly "val".
  749. </dd><dt><code>[att~=val]</code>
  750. </dt><dd>Represents the <code>att</code> attribute whose value is a space-separated list of words,
  751. one of which is exactly "val". If this selector is used, the
  752. words in the value must not contain spaces (since they are separated by
  753. spaces).
  754. </dd><dt><code>[att|=val]</code>
  755. </dt><dd>Represents the <code>att</code> attribute, its value either being exactly "val" or
  756. beginning with "val" immediately followed by "-".
  757. This is primarily intended to allow language subcode matches
  758. (e.g., the <code>hreflang</code> attribute on the <code>link</code> element in HTML)
  759. as described in RFC 3066 (<a class="noxref" href="#rfc3066" rel="biblioentry">[RFC3066]</a>).
  760. Note: for <code>lang</code> (or <code>xml:lang</code>) language subcode matching,
  761. please see <a href="#lang-pseudo">the <code>:lang</code> pseudo-class</a>.
  762. </dd></dl>
  763. <p>Attribute values must be identifiers or strings. The case-sensitivity of
  764. attribute names and values in selectors depends on the document language.
  765. </p><div class="example">Examples:
  766. <p>For example, the following attribute selector represents an <code>h1</code>
  767. element that carries the <code>title</code> attribute, whatever its value: </p><pre>h1[title]</pre>
  768. <p>In the following example, the selector represents a <code>span</code> element
  769. whose <code>class</code> attribute has exactly the value "example": </p><pre>span[class=example]</pre>
  770. Multiple attribute selectors can be used to represent several attributes of
  771. an element, or several conditions on the same attribute.
  772. <p>Here, the selector represents a <code>span</code> element whose <code>hello</code>
  773. attribute has exactly the value "Cleveland" and whose <code>goodbye</code> attribute
  774. has exactly the value "Columbus": </p><pre>span[hello="Cleveland"][goodbye="Columbus"]</pre>
  775. <p>The following selectors illustrate the differences between "=" and "~=".
  776. The first selector will represent, for example, the value "copyright copyleft
  777. copyeditor" on a <code>rel</code> attribute. The second selector will only
  778. represent an <code>a</code> element with an <code>href</code> attribute having
  779. the exact value "".
  780. </p><pre>a[rel~="copyright"]
  781. a[href=""]</pre>
  782. <p>The following selector represents a <code>link</code> element whose
  783. <code>hreflang</code> attribute is exactly "fr".
  784. </p><pre>link[hreflang=fr]</pre>
  785. <p>The following selector represents a <code>link</code> element for which the
  786. values of the <code>hreflang</code> attribute begins with "en", including
  787. "en", "en-US", and "en-cockney":
  788. </p><pre>link[hreflang|="en"]</pre>
  789. <p>Similarly, the following selectors represents a <code>DIALOGUE</code> element
  790. whenever it has one of two different values for an attribute <code>character</code>:
  791. </p><pre>DIALOGUE[character=romeo]&nbsp;
  792. DIALOGUE[character=juliet]</pre></div>
  793. <h4><a name="attribute-substrings"></a>6.3.2 Substring matching attribute
  794. selectors</h4>
  795. <p>Three additional attribute selectors are provided
  796. for matching substrings in the value of an attribute:
  797. </p><dl>
  798. <dt><code>[att^=val]</code>
  799. </dt><dd>Represents the <code>att</code> attribute whose value begins with
  800. the prefix "val"
  801. </dd><dt><code>[att$=val]</code>
  802. </dt><dd>Represents the <code>att</code> attribute whose value ends with the
  803. suffix "val"
  804. </dd><dt><code>[att*=val]</code>
  805. </dt><dd>Represents the <code>att</code> attribute whose value contains at least
  806. one instance of the substring "val" </dd></dl>
  807. <p>Attribute values must be identifiers or strings. The case-sensitivity of
  808. attribute names in selectors depends on the document language.
  809. </p><p>Example:
  810. </p><p>The following selector represents an HTML <code>object</code>, referencing an
  811. image:</p><pre>object[type^="image/"]
  812. </pre>
  813. <p>The following selector represents an HTML anchor <code>a</code> with an
  814. <code>href</code> attribute whose value ends with ".html".
  815. </p><pre>a[href$=".html"]</pre>
  816. <p>The following selector represents a HTML paragraph with a <code>title</code>
  817. attribute whose value contains the substring "hello"</p><pre>p[title*="hello"] </pre>
  818. <h4><a name="attrnmsp">6.3.3 Attribute selectors and Namespaces</a></h4>
  819. <p>Attribute selectors allow an optional namespace component to the attribute
  820. name. A namespace prefix that has been previously declared may be prepended
  821. to the attribute name separated by the namespace separator
  822. "vertical bar" (<code>|</code>). In keeping with the Namespaces in
  823. the XML recommendation, default namespaces do not apply to attributes, therefore
  824. attribute selectors without a namespace component apply only to attributes that
  825. have no declared namespace (equivalent to "<code>|attr</code>"). An asterisk
  826. may be used for the namespace prefix indicating that the selector is to match
  827. all attribute names without regard to the attribute's namespace.
  828. </p><p>Note : an attribute
  829. selector with an attribute name containing a namespace prefix that has
  830. not been previously declared is an <a href="#Conformance">invalid</a> selector.
  831. The mechanism for declaring a namespace prefix is left up to the language
  832. implementing <span class="modulename">Selectors</span>.
  833. In CSS, such a mechanism is defined in the General Syntax module.
  834. </p><p>CSS examples:
  835. </p><div class="example">
  836. <pre>@namespace foo "";
  837. [foo|att=val] { color: blue }
  838. [*|att] { color: yellow }
  839. [|att] { color: green }
  840. [att] { color: green }</pre>
  841. The first rule will match only elements with the attribute <code>att</code>
  842. in the "" namespace with the value "val".
  843. <p>The second rule will match only elements with the attribute <code>att</code>
  844. regardless of the namespace of the attribute (including no declared namespace).
  845. </p><p>The last two rules are equivalent and will match only elements with the
  846. attribute <code>att</code> where the attribute is not declared to be in a
  847. namespace.</p></div>
  848. <h4><a name="def-values">6.3.4 Default attribute values in DTDs</a></h4>
  849. <p>Attribute selectors represent explicitly set attribute values in the document
  850. tree. Default attribute values may be defined in a DTD or elsewhere.
  851. <span class="propernoun">Selectors</span> should be designed so that they work
  852. even if the default values are not included in the document tree.
  853. </p><div class="example">Examples:
  854. <p>For example, consider an element <code>EXAMPLE</code> with an attribute
  855. <code>notation</code> that has a default value of "decimal". The DTD fragment
  856. might be </p><pre>&lt;!ATTLIST EXAMPLE notation (decimal,octal) "decimal"&gt;</pre>
  857. If the selectors represent an <code>EXAMPLE</code> element when the value of
  858. the attribute is explicitly set:
  859. <pre>EXAMPLE[notation=decimal]
  860. EXAMPLE[notation=octal]</pre>
  861. then to represent only the case where this attribute is set by default, and
  862. not explicitly, the following selector might be used:
  863. <pre>EXAMPLE:not([notation])</pre>
  864. </div>
  865. <h3><a name="class-html">6.4 Class selectors</a></h3>
  866. <p>Working with HTML, authors may use the period (<code>.</code>) notation as
  867. an alternative to the <code>~=</code> notation when representing the <code>class</code>
  868. attribute. Thus, for HTML, <code>div.value</code> and <code>div[class~=value]</code>
  869. have the same meaning. The attribute value must immediately follow the "period"
  870. (<code>.</code>). Note: UAs may apply selectors using the period (.) notation
  871. in XML documents if the UA has namespace specific knowledge that allows it to
  872. determine which attribute is the "class" attribute for the respective
  873. namespace. One such example of namespace specific knowledge is the prose in
  874. the specification for a particular namespace (e.g. SVG 1.0 [<a href="#SVG">SVG</a>]
  875. describes the <a href="">SVG
  876. "class" attribute</a> and how a UA should interpret it, and similarly
  877. MathML 1.01 [<a href="#MATH">MATH</a>] describes the <a href="">MathML
  878. "class" attribute</a>.)
  879. </p><p>
  880. </p><div class="example">Examples:
  881. <p>For example, we can represent an arbitrary element with
  882. <code>class~="pastoral"</code> as follows: </p><pre>*.pastoral</pre>or just <pre>.pastoral</pre>
  883. The following selector represents an <code>h1</code> element with <code>class~="pastoral"</code>:
  884. <pre>h1.pastoral</pre>
  885. <p>For example, the following selector represents a <code>p</code> element whose
  886. <code>class</code> attribute has been assigned a list of space-separated values that
  887. includes "pastoral" and "marine": </p><pre>p.pastoral.marine</pre>
  888. <p>It is fully identical to:</p><pre>p.marine.pastoral</pre>
  889. <p>This selector represents for example a <code>p</code> with <code>class="pastoral
  890. blue aqua marine"</code> or <code>class="marine blue pastoral aqua" </code>but
  891. not <code>class="pastoral blue"</code>.
  892. </p></div>
  893. <h3><a name="id-selectors">6.5 ID selectors</a></h3>
  894. <p>Document languages may contain attributes that are declared to be of type ID.
  895. What makes attributes of type ID special is that no two such attributes can
  896. have the same value in a document, regardless of the type of the elements that
  897. carry them; whatever the document language, an ID typed attribute can be used
  898. to uniquely identify its element. In HTML all ID attributes are named "id";
  899. XML applications may name ID attributes differently, but the same restriction
  900. applies.
  901. </p><p>An ID typed attribute of a document language allows authors to assign an identifier
  902. to one element instance in the document tree. W3C ID selectors represent an
  903. element instance based on its identifier. An ID selector contains a "number
  904. sign" (#) immediately followed by the ID value.
  905. </p><div class="example">Examples:
  906. <p>The following ID selector represents an <code>h1</code> element whose ID typed
  907. attribute has the value "chapter1":
  908. </p><pre>h1#chapter1</pre>
  909. <p>The following ID selector represents any element whose ID typed attribute
  910. has the value "chapter1":
  911. </p><pre>#chapter1</pre>
  912. The following selector represents any element whose ID typed attribute has the
  913. value "z98y".
  914. <pre>*#z98y</pre></div>
  915. <div class="note"><i><b>Note.</b> In XML 1.0 <a class="noxref" href="" rel="biblioentry">[XML10]</a>, the information about which attribute contains an
  916. element's IDs is contained in a DTD or a schema. When parsing XML, UAs do not
  917. always read the DTD, and thus may not know what the ID of an element is
  918. (though a UA may have namespace specific knowledge that allows it to determine
  919. which attribute is the ID attribute for that namespace). If
  920. a style sheet designer knows or suspects that a UA may not know what the ID of an
  921. element is, he should use normal attribute selectors instead:
  922. <code>[name=p371]</code> instead of <code>#p371</code>.
  923. Elements in XML 1.0 documents without a DTD do not have IDs at all.</i></div>
  924. <h3><a name="pseudo-classes">6.6 Pseudo-classes</a></h3>
  925. <p>The pseudo-class concept is introduced to permit selection based on information
  926. that lies outside of the document tree or that cannot be expressed using the
  927. other simple selectors.
  928. </p><p>A pseudo-class always contains a "colon" (<code>:</code>) followed
  929. by the name of the pseudo-class and optionally by a value between parentheses.
  930. </p><p>Pseudo-classes are allowed in all sequences of simple selectors contained in
  931. a selector. Pseudo-classes are allowed anywhere in sequences of simple selectors,
  932. after the leading type selector or universal selector (possibly omitted). Pseudo-class
  933. names are case-insensitive. Some pseudo-classes are mutually exclusive, while
  934. others can be applied simultaneously to the same element. Pseudo-classes may
  935. be dynamic, in the sense that an element may acquire or lose a pseudo-class
  936. while a user interacts with the document.
  937. </p><h4><a name="dynamic-pseudos">6.6.1 Dynamic pseudo-classes</a></h4>
  938. <p>Dynamic pseudo-classes classify elements on characteristics other than their
  939. name, attributes or content, in principle characteristics that cannot be deduced
  940. from the document tree.
  941. </p><p>Dynamic pseudo-classes do not appear in the document source or document tree.
  942. </p><h5>The&nbsp;<a name="link">link pseudo-classes: :link and :visited</a></h5>
  943. <p>User agents commonly display unvisited links differently from previously
  944. visited ones. <span class="modulename">Selectors</span> provides the pseudo-classes <code>:link</code> and
  945. <code>:visited</code> to distinguish them:
  946. </p><ul>
  947. <li>The <code>:link</code> pseudo-class applies for links that have not yet been
  948. visited.
  949. </li><li>The <code>:visited</code> pseudo-class applies once the link has been visited
  950. by the user. </li></ul>
  951. <div class="note"><i><b>Note.</b> After some amount of time, user agents may
  952. choose to return a visited link to the (unvisited) ':link' state.</i></div>
  953. <p>The two states are mutually exclusive.
  954. </p><div class="example">Example:
  955. <p>The following selector represents links carrying class <code>external</code> and
  956. already visited: </p><pre>a.exte