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

https://gitlab.com/shidang/nodejs-serve-test
HTML | 978 lines | 948 code | 22 blank | 8 comment | 0 complexity | 8a46386ecf60270199da0e7325807d7f MD5 | raw file
    

  1. <!-- http://www.w3.org/TR/2001/CR-css3-selectors-20011113/ -->
    2. 

  2. <html><head><title>Selectors</title>
    3. 

  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    4. 

  4. <meta http-equiv="Content-Style-Type" content="text/css">
    5. 

  5. <meta http-equiv="Content-Language" content="en">
    6. 

  6. <link href="default.css" type="text/css" rel="stylesheet">
    7. 

  7. <style type="text/css">
    8. 

  8. pre {
    9. 

  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. 

  10. }
    11. 

  11. .code {
    12. 

  12. 	font-family: monospace
    13. 

  13. }
    14. 

  14. table.selectorsReview th {
    15. 

  15. 	background: gray; color: white
    16. 

  16. }
    17. 

  17. table.selectorsReview th .pattern {
    18. 

  18. 	width: 20%; font-family: monospace
    19. 

  19. }
    20. 

  20. table.selectorsReview th .meaning {
    21. 

  21. 	width: 45%
    22. 

  22. }
    23. 

  23. table.selectorsReview tr .described {
    24. 

  24. 	WIDTH: 25%
    25. 

  25. }
    26. 

  26. table.selectorsReview tr .origin {
    27. 

  27. 	width: 10%; text-align: center
    28. 

  28. }
    29. 

  29. table.tprofile th.title {
    30. 

  30. 	background: gray; color: white
    31. 

  31. }
    32. 

  32. table.tprofile th {
    33. 

  33. 	width: 29%
    34. 

  34. }
    35. 

  35. table.tprofile td {
    36. 

  36. 	width: 71%
    37. 

  37. }
    38. 

  38. .toc {
    39. 

  39. 	list-style-type: none
    40. 

  40. }
    41. 

  41. .subtoc ul {
    42. 

  42. 	list-style-type: none
    43. 

  43. }
    44. 

  44. .subtoc ol {
    45. 

  45. 	list-style-type: none
    46. 

  46. }
    47. 

  47. .profile {
    48. 

  48. 	margin: 1cm
    49. 

  49. }
    50. 

  50. .editorNote {
    51. 

  51. 	color: red; font-style: italic
    52. 

  52. }
    53. 

  53. .e-mail {
    54. 

  54. 	font-size: 90%
    55. 

  55. }
    56. 

  56. h1 {
    57. 

  57. 	font-size: 200%
    58. 

  58. }
    59. 

  59. h2 {
    60. 

  60. 	font-size: 170%
    61. 

  61. }
    62. 

  62. h3 {
    63. 

  63. 	font-size: 150%
    64. 

  64. }
    65. 

  65. h4 {
    66. 

  66. 	font-size: 130%
    67. 

  67. }
    68. 

  68. h5 {
    69. 

  69. 	font-size: 120%
    70. 

  70. }
    71. 

  71. h6 {
    72. 

  72. 	font-size: 110%
    73. 

  73. }
    74. 

  74. ul.changes {
    75. 

  75. 	font-size: smaller
    76. 

  76. }
    77. 

  77. table.selectorsReview {
    78. 

  78. 	font-size: smaller; border-collapse: collapse
    79. 

  79. }
    80. 

  80. .figure {
    81. 

  81. 	text-align: center
    82. 

  82. }
    83. 

  83. </style>
    84. 

  84. <link href="http://www.w3.org/StyleSheets/TR/W3C-CR.css" type="text/css" rel="stylesheet">
    85. 

  85. </head>
    86. 

  86. <body>
    87. 

  87. <div class="head"><p><a href="http://www.w3.org/"><img height="48" alt="W3C" src="http://www.w3.org/Icons/w3c_home" width="72"></a>
    88. 

  88. </p><h1><span class="modulename">Selectors</span></h1>
    89. 

  89.   <h2>W3C Candidate Recommendation 13 November 2001</h2>
    90. 

  90.   <dl>
    91. 

  91.     <dt>This version:
    92. 

  92.     </dt><dd><a href="http://www.w3.org/TR/2001/CR-css3-selectors-20011113">
    93. 

  93.                  http://www.w3.org/TR/2001/CR-css3-selectors-20011113</a>
    94. 

  94.     </dd><dt>Latest version:
    95. 

  95.     </dt><dd><a href="http://www.w3.org/TR/css3-selectors">
    96. 

  96.                  http://www.w3.org/TR/css3-selectors</a>
    97. 

  97.     </dd><dt>Previous version:
    98. 

  98.     </dt><dd><a href="http://www.w3.org/TR/2001/WD-css3-selectors-20010126">
    99. 

  99.                  http://www.w3.org/TR/2001/WD-css3-selectors-20010126</a>
    100. 

  100.     </dd><dt><a name="editors-list"></a>Editors:
    101. 

  101.     </dt><dd><a href="mailto:glazman@netscape.com">Daniel Glazman</a> (<span class="company"><a href="http://www.netscape.com/">Netscape/AOL</a></span>)
    102. 

  102.     </dd><dd><a href="mailto:tantekc@microsoft.com">Tantek Çelik</a> (<span class="company"><a href="http://www.microsoft.com/">Microsoft Corporation</a></span>)
    103. 

  103.     </dd><dd><a href="mailto:ian@hixie.ch">Ian Hickson</a>
    104. 

  104.     </dd><dd>Peter Linss (former editor, formerly of&nbsp;<span class="company"><a href="http://www.netscape.com/">Netscape/AOL</a></span>)
    105. 

  105.     </dd><dd>John Williams (former editor, <span class="company"><a href="http://www.quark.com/">Quark, Inc.</a></span>) 
    106. 

  106.   </dd></dl>
    107. 

  107. <p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice-20000612#Copyright">Copyright</a>
    108. 

  108. ©2001 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.lcs.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.inria.fr/"><abbr lang="fr" title="Institut National de Recherche en Informatique et Automatique">INRIA</abbr></a>,
    109. 

  109. <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice-20000612#Legal_Disclaimer">liability</a>,
    110. 

  110. <a href="http://www.w3.org/Consortium/Legal/ipr-notice-20000612#W3C_Trademarks">trademark</a>,
    111. 

  111. <a href="http://www.w3.org/Consortium/Legal/copyright-documents-19990405">document
    112. 

  112. use</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-software-19980720">software
    113. 

  113. licensing</a> rules apply.
    114. 

  114. </p><hr title="Separator for header">
    115. 

  115. </div>
    116. 

  116. 

  117. <h2><a name="abstract"></a>Abstract</h2>
    118. 

  118. <p><acronym title="Cascading Style Sheets">CSS</acronym> (Cascading Style Sheets) is a language for describing the rendering of
    119. 

  119.   <acronym title="Hypertext Markup Language">HTML</acronym> and <acronym title="Extensible Markup Language">XML</acronym>
    120. 

  120.   documents on screen, on paper, in speech, etc. To bind style properties
    121. 

  121.   to elements in the document, CSS uses <em>selectors,</em> which are patterns
    122. 

  122.   that match one or more elements. This document describes the selectors that are proposed
    123. 

  123.   for CSS level 3. It includes and extends the selectors of CSS level 2. 
    124. 

  124. </p><h2><a name="status"></a>Status of this document</h2>
    125. 

  125. <p>This document is one of the "modules" of the upcoming CSS3 specification. It
    126. 

  126.   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>,
    127. 

  127.   but also proposes new selectors for <abbr title="CSS level 3">CSS3</abbr> as well as for
    128. 

  128.   other languages that may need them. The CSS Working Group doesn't expect that all
    129. 

  129.   implementations of CSS3 will have to implement all selectors. Instead,
    130. 

  130.   there will probably be a small number of variants of CSS3, so-called "profiles".
    131. 

  131.   For example, it may be that only a profile for non-interactive user agents
    132. 

  132.   will include all of the proposed selectors. 
    133. 

  133. </p><p>This specification is being put forth as a <a href="http://www.w3.org/TR/#About">Candidate
    134. 

  134.   Recommendation</a> by the <a href="http://www.w3.org/Style/Group">CSS Working
    135. 

  135.   Group</a>. This document is a revision of the <a href="http://www.w3.org/TR/2001/WD-css3-selectors-20010126">Working
    136. 

  136.   Draft dated 2001 January 26</a>, and has incorporated suggestions received
    137. 

  137.   during last call review, comments, and further deliberations of the W3C CSS
    138. 

  138.   Working Group.
    139. 

  139. </p><p>The duration of Candidate Recommendation is expected to last approximately
    140. 

  140.   six months (ending <strong>May, 2002</strong>). All persons are encouraged
    141. 

  141.   to review and implement this specification and return comments to the (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public mailing
    142. 

  142.   list <a href="http://www.w3.org/Mail/Lists.html#www-style">www-style</a> (see <a href="http://www.w3.org/Mail/Request">instructions</a>).
    143. 

  143.   W3C Members can also send comments directly to the CSS Working Group. 
    144. 

  144. </p><p>Should this specification prove impossible to implement, the Working Group
    145. 

  145.   will return the document to Working Draft status and make necessary changes.
    146. 

  146.   Otherwise, the Working Group anticipates asking the W3C Director to advance
    147. 

  147.   this document to Proposed Recommendation.
    148. 

  148. </p><p>This is still a draft document and may be updated, replaced, or obsoleted by
    149. 

  149.   other documents at any time. It is inappropriate to cite a W3C Candidate Recommendation
    150. 

  150.   as other than "work in progress." A list of current W3C working drafts
    151. 

  151.   can be found at <a href="http://www.w3.org/TR">http://www.w3.org/TR</a>.<br>
    152. 

  152.   <br>
    153. 

  153.   This document may be available in <a href="http://www.w3.org/Style/css3-selectors-updates/translations">translation</a>.
    154. 

  154.   The English version of this specification is the only normative version.
    155. 

  155. </p><h2><a name="dependencies"></a>Dependencies with other CSS3 Modules</h2>
    156. 

  156. <ul>
    157. 

  157.   <li>General Syntax
    158. 

  158.   </li><li>Value Assignment, Cascade and Inheritance
    159. 

  159.   </li><li>Generated Content / Markers
    160. 

  160.   </li><li>User Interface
    161. 

  161. </li></ul>
    162. 

  162. <div class="subtoc">
    163. 

  163. <h2><a name="contents">Table of contents</a></h2>
    164. 

  164. <ul class="toc">
    165. 

  165.   <li class="tocline2"><a href="#context">1.
    166. 

  166.   Context</a>
    167. 

  167.   <ul>
    168. 

  168.     <li><a href="#changesFromCSS2">1.1
    169. 

  169.     Changes from CSS2</a> </li></ul>
    170. 

  170.   </li><li class="tocline2"><a href="#selectors">2.
    171. 

  171.   Selectors</a>
    172. 

  172.   </li><li class="tocline2"><a href="#casesens">3.
    173. 

  173.   Case sensitivity</a>
    174. 

  174.   </li><li class="tocline2"><a href="#selector-syntax">4. Selector
    175. 

  175.   syntax</a>
    176. 

  176.   </li><li class="tocline2"><a href="#grouping">5.
    177. 

  177.   Groups of selectors</a>
    178. 

  178.   </li><li class="tocline2"><a href="#simple-selectors">6. Simple
    179. 

  179.   selectors</a>
    180. 

  180.   <ul class="toc">
    181. 

  181.     <li class="tocline3"><a href="#type-selectors">6.1 Type
    182. 

  182.     selectors</a>
    183. 

  183.     <ul class="toc">
    184. 

  184.       <li class="tocline4"><a href="#typenmsp">6.1.1 Type selectors
    185. 

  185.       and Namespaces</a> </li></ul>
    186. 

  186.     </li><li class="tocline3"><a href="#universal-selector">6.2 Universal
    187. 

  187.     selector</a>
    188. 

  188.     <ul>
    189. 

  189.       <li><a href="#univnmsp">6.2.1
    190. 

  190.       Universal selector and Namespaces</a> </li></ul>
    191. 

  191.     </li><li class="tocline3"><a href="#attribute-selectors">6.3
    192. 

  192.     Attribute selectors</a>
    193. 

  193.     <ul class="toc">
    194. 

  194.       <li class="tocline4"><a href="#attribute-representation">6.3.1
    195. 

  195.       Representation of attributes and attributes values</a>
    196. 

  196.       </li><li><a href="#attribute-substrings">6.3.2
    197. 

  197.       Substring matching attribute selectors</a>
    198. 

  198.       </li><li class="tocline4"><a href="#attrnmsp">6.3.3 Attribute
    199. 

  199.       selectors and Namespaces</a>
    200. 

  200.       </li><li class="tocline4"><a href="#def-values">6.3.4 Default
    201. 

  201.       attribute values in DTDs</a> </li></ul>
    202. 

  202.     </li><li class="tocline3"><a href="#class-html">6.4 Class
    203. 

  203.     selectors</a>
    204. 

  204.     </li><li class="tocline3"><a href="#id-selectors">6.5 ID
    205. 

  205.     selectors</a>
    206. 

  206.     </li><li class="tocline3"><a href="#pseudo-classes">6.6
    207. 

  207.     Pseudo-classes</a>
    208. 

  208.     <ul class="toc">
    209. 

  209.       <li class="tocline4"><a href="#dynamic-pseudos">6.6.1 Dynamic
    210. 

  210.       pseudo-classes</a>
    211. 

  211.       </li><li class="tocline4"><a href="#target-pseudo">6.6.2 The
    212. 

  212.       :target pseudo-class</a>
    213. 

  213.       </li><li class="tocline4"><a href="#lang-pseudo">6.6.3 The :lang()
    214. 

  214.       pseudo-class</a>
    215. 

  215.       </li><li class="tocline4"><a href="#UIstates">6.6.4 UI element
    216. 

  216.       states pseudo-classes</a>
    217. 

  217.       </li><li class="tocline4"><a href="#structural-pseudos">6.6.5
    218. 

  218.       Structural pseudo-classes</a>
    219. 

  219.       <ul>
    220. 

  220.         <li><a href="#root-pseudo">:root
    221. 

  221.         pseudo-class</a>
    222. 

  222.         </li><li><a href="#nth-child-pseudo">:nth-child()
    223. 

  223.         pseudo-class</a>
    224. 

  224.         </li><li><a href="#nth-last-child-pseudo">:nth-last-child()</a>
    225. 

  225. 

  226.         </li><li><a href="#nth-of-type-pseudo">:nth-of-type()
    227. 

  227.         pseudo-class</a>
    228. 

  228.         </li><li><a href="#nth-last-of-type-pseudo">:nth-last-of-type()</a>
    229. 

  229. 

  230.         </li><li><a href="#first-child-pseudo">:first-child
    231. 

  231.         pseudo-class</a>
    232. 

  232.         </li><li><a href="#last-child-pseudo">:last-child
    233. 

  233.         pseudo-class</a>
    234. 

  234.         </li><li><a href="#first-of-type-pseudo">:first-of-type
    235. 

  235.         pseudo-class</a>
    236. 

  236.         </li><li><a href="#last-of-type-pseudo">:last-of-type
    237. 

  237.         pseudo-class</a>
    238. 

  238.         </li><li><a href="#only-child-pseudo">:only-child
    239. 

  239.         pseudo-class</a>
    240. 

  240.         </li><li><a href="#only-of-type-pseudo">:only-of-type
    241. 

  241.         pseudo-class</a>
    242. 

  242.         </li><li><a href="#empty-pseudo">:empty
    243. 

  243.         pseudo-class</a> </li></ul>
    244. 

  244.       </li><li class="tocline4"><a href="#content-selectors">6.6.6
    245. 

  245.       Content pseudo-class</a>
    246. 

  246.       </li><li><a href="#negation">6.6.7 The
    247. 

  247.       negation pseudo-class</a> </li></ul></li></ul>
    248. 

  248.   </li><li><a href="#pseudo-elements">7.
    249. 

  249.   Pseudo-elements</a>
    250. 

  250.   <ul>
    251. 

  251.     <li><a href="#first-line">7.1 The
    252. 

  252.     :first-line pseudo-element</a>
    253. 

  253.     </li><li><a href="#first-letter">7.2 The
    254. 

  254.     :first-letter pseudo-element</a>
    255. 

  255.     </li><li><a href="#UIfragments">7.3 UI
    256. 

  256.     element fragments pseudo-elements</a>
    257. 

  257.     </li><li><a href="#gen-content">7.4 The
    258. 

  258.     :before and :after pseudo-elements</a> </li></ul>
    259. 

  259.   </li><li class="tocline2"><a href="#combinators">8. Combinators</a>
    260. 

  260.   <ul class="toc">
    261. 

  261.     <li class="tocline3"><a href="#descendant-combinators">8.1
    262. 

  262.     Descendant combinators</a>
    263. 

  263.     </li><li class="tocline3"><a href="#child-combinators">8.2 Child
    264. 

  264.     combinators</a>
    265. 

  265.     </li><li class="tocline3"><a href="#adjacent-combinators">8.3
    266. 

  266.     Adjacent sibling combinators</a>
    267. 

  267.     <ul class="toc">
    268. 

  268.       <li class="tocline4"><a href="#adjacent-d-combinators">8.3.1
    269. 

  269.       Adjacent direct combinators</a>
    270. 

  270.       </li><li class="tocline4"><a href="#adjacent-i-combinators">8.3.2
    271. 

  271.       Adjacent indirect combinators</a> </li></ul></li></ul>
    272. 

  272.   </li><li class="tocline2"><a href="#specificity">9. Calculating a
    273. 

  273.   selector's specificity</a>
    274. 

  274.   </li><li class="tocline2"><a href="#w3cselgrammar">10. The grammar of
    275. 

  275.   <span class="modulename">Selectors</span></a>
    276. 

  276.   <ul class="toc">
    277. 

  277.     <li class="tocline3"><a href="#grammar">10.1 Grammar</a>
    278. 

  278.     </li><li class="tocline3"><a href="#lex">10.2
    279. 

  279.     Lexical scanner</a> </li></ul>
    280. 

  280.   </li><li class="tocline2"><a href="#downlevel">11. Namespaces and
    281. 

  281.   Down-Level clients</a>
    282. 

  282.   </li><li class="tocline2"><a href="#profiling">12. Profiles</a>
    283. 

  283.   </li><li><a href="#Conformance">13. Conformance
    284. 

  284.   and Requirements</a>
    285. 

  285.   </li><li><a href="#Tests">14. Tests</a>
    286. 

  286.   </li><li><a href="#ACKS">15.
    287. 

  287.   Acknowledgements</a>
    288. 

  288.   </li><li class="tocline2"><a href="#references">16. References</a> <!--<li class="tocline2"><a href="#changes">Changes from previous version</a>--></li></ul></div>
    289. 

  289. <h2><a name="context">1. Context</a></h2>
    290. 

  290. <p>Members of the CSS+FP Working Group proposed during the Clamart meeting to
    291. 

  291. modularize the CSS specification. 
    292. 

  292. </p><p>This modularization, and the externalization of the general syntax of CSS
    293. 

  293. will reduce the size of the specification and allow new specifications
    294. 

  294. to use selectors and/or CSS general syntax. For instance, behaviors or tree
    295. 

  295. transformations. 
    296. 

  296. </p><p>This specification contains its own <a href="#Tests">test cases</a>, one test per concept introduced in this document.
    297. 

  297.   These tests are not full conformance tests but are intended to provide users
    298. 

  298.   with a way to check if a part of this specification is implemented <i>ad minima</i>
    299. 

  299.   or is not implemented at all.
    300. 

  300. </p><h3><a name="changesFromCSS2"></a>1.1 Changes from CSS2</h3>
    301. 

  301. <p>The main differences between the selectors in CSS2 and those in
    302. 

  302.  <span class="modulename">Selectors</span> are:
    303. 

  303. </p><ul>
    304. 

  304.   <li>the list of basic definitions (selector, group of selectors, simple
    305. 

  305.   selector, etc.) has been clarified
    306. 

  306.   </li><li>an optional namespace component is now allowed in type element selectors,
    307. 

  307.   the universal selector and attribute selectors
    308. 

  308.   </li><li>a new combinator
    309. 

  309.   </li><li>new simple selectors including substring matching attribute selectors, and new
    310. 

  310.   pseudo-classes
    311. 

  311.   </li><li>new pseudo-elements, and introduction of the "::" convention for pseudo-elements
    312. 

  312.   </li><li>a rewriting of the selectors grammar
    313. 

  313.   </li><li>profiles to be added to specifications integrating <span class="modulename">Selectors</span> and
    314. 

  314.   defining the set of selectors which is actually supported by each
    315. 

  315.   specification
    316. 

  316.   </li><li><span class="modulename">Selectors</span> are now a CSS3 Module and an independent specification.
    317. 

  317.   Other  specifications can now refer to this document independently of CSS
    318. 

  318.   </li><li>the specification now contains its own test suite. </li>
    319. 

  319. </ul>
    320. 

  320. <h2><a name="selectors"></a>2. Selectors</h2>
    321. 

  321. <p>A <span class="propernoun">Selector</span> represents a structure. This structure can be used
    322. 

  322. as a condition (e.g. in a CSS rule) that determines which elements
    323. 

  323. a selector matches in the document tree, or as a flat description of the
    324. 

  324. HTML or XML fragment corresponding to that structure. 
    325. 

  325. </p><p><span class="propernoun">Selectors</span> may range from simple element names to rich contextual
    326. 

  326. representations. 
    327. 

  327. </p><p>The following table summarizes <span class="propernoun">Selector</span> syntax: 
    328. 

  328. </p><table class="selectorsreview" width="100%" border="1">
    329. 

  329.   <tbody>
    330. 

  330.   <tr>
    331. 

  331.     <th class="pattern">Pattern</th>
    332. 

  332.     <th class="meaning">Meaning</th>
    333. 

  333.     <th class="described">Described in section</th>
    334. 

  334.     <th class="origin">First defined in CSS level</th></tr>
    335. 

  335.   <tr>
    336. 

  336.     <td class="pattern">*</td>
    337. 

  337.     <td class="meaning">any element</td>
    338. 

  338.     <td class="described"><a href="#universal-selector">Universal
    339. 

  339.       selector</a></td>
    340. 

  340.     <td class="origin">2</td></tr>
    341. 

  341.   <tr>
    342. 

  342.     <td class="pattern">E</td>
    343. 

  343.     <td class="meaning">an element of type E</td>
    344. 

  344.     <td class="described"><a href="#type-selectors">Type selector</a></td>
    345. 

  345.     <td class="origin">1</td></tr>
    346. 

  346.   <tr>
    347. 

  347.     <td class="pattern">E[foo]</td>
    348. 

  348.     <td class="meaning">an E element with a "foo" attribute</td>
    349. 

  349.     <td class="described"><a href="#attribute-selectors">Attribute
    350. 

  350.       selectors</a></td>
    351. 

  351.     <td class="origin">2</td></tr>
    352. 

  352.   <tr>
    353. 

  353.     <td class="pattern">E[foo="bar"]</td>
    354. 

  354.     <td class="meaning">an E element whose "foo" attribute value is exactly
    355. 

  355.       equal to "bar"</td>
    356. 

  356.     <td class="described"><a href="#attribute-selectors">Attribute
    357. 

  357.       selectors</a></td>
    358. 

  358.     <td class="origin">2</td></tr>
    359. 

  359.   <tr>
    360. 

  360.     <td class="pattern">E[foo~="bar"]</td>
    361. 

  361.     <td class="meaning">an E element whose "foo" attribute value is a list of
    362. 

  362.       space-separated values, one of which is exactly equal to "bar"</td>
    363. 

  363.     <td class="described"><a href="#attribute-selectors">Attribute
    364. 

  364.       selectors</a></td>
    365. 

  365.     <td class="origin">2</td></tr>
    366. 

  366.   <tr>
    367. 

  367.     <td class="pattern">E[foo^="bar"]</td>
    368. 

  368.     <td class="meaning">an E element whose "foo" attribute value begins exactly
    369. 

  369.       with the string "bar"</td>
    370. 

  370.     <td class="described"><a href="#attribute-selectors">Attribute
    371. 

  371.       selectors</a></td>
    372. 

  372.     <td class="origin">3</td></tr>
    373. 

  373.   <tr>
    374. 

  374.     <td class="pattern">E[foo$="bar"]</td>
    375. 

  375.     <td class="meaning">an E element whose "foo" attribute value ends exactly
    376. 

  376.       with the string "bar"</td>
    377. 

  377.     <td class="described"><a href="#attribute-selectors">Attribute
    378. 

  378.       selectors</a></td>
    379. 

  379.     <td class="origin">3</td></tr>
    380. 

  380.   <tr>
    381. 

  381.     <td class="pattern">E[foo*="bar"]</td>
    382. 

  382.     <td class="meaning">an E element whose "foo" attribute value contains the
    383. 

  383.       substring "bar"</td>
    384. 

  384.     <td class="described"><a href="#attribute-selectors">Attribute
    385. 

  385.       selectors</a></td>
    386. 

  386.     <td class="origin">3</td></tr>
    387. 

  387.   <tr>
    388. 

  388.     <td class="pattern">E[hreflang|="en"]</td>
    389. 

  389.     <td class="meaning">an E element whose "hreflang" attribute has a hyphen-separated
    390. 

  390.       list of values beginning (from the left) with "en"</td>
    391. 

  391.     <td class="described"><a href="#attribute-selectors">Attribute
    392. 

  392.       selectors</a></td>
    393. 

  393.     <td class="origin">2</td></tr>
    394. 

  394.   <tr>
    395. 

  395.     <td class="pattern">E:root</td>
    396. 

  396.     <td class="meaning">an E element, root of the document</td>
    397. 

  397.     <td class="described"><a href="#structural-pseudos">Structural
    398. 

  398.       pseudo-classes</a></td>
    399. 

  399.     <td class="origin">3</td></tr>
    400. 

  400.   <tr>
    401. 

  401.     <td class="pattern">E:nth-child(n)</td>
    402. 

  402.     <td class="meaning">an E element, the n-th child of its parent</td>
    403. 

  403.     <td class="described"><a href="#structural-pseudos">Structural
    404. 

  404.       pseudo-classes</a></td>
    405. 

  405.     <td class="origin">3</td></tr>
    406. 

  406.   <tr>
    407. 

  407.     <td class="pattern">E:nth-last-child(n)</td>
    408. 

  408.     <td class="meaning">an E element, the n-th child of its parent, counting
    409. 

  409.       from the last one</td>
    410. 

  410.     <td class="described"><a href="#structural-pseudos">Structural
    411. 

  411.       pseudo-classes</a></td>
    412. 

  412.     <td class="origin">3</td></tr>
    413. 

  413.   <tr>
    414. 

  414.     <td class="pattern">E:nth-of-type(n)</td>
    415. 

  415.     <td class="meaning">an E element, the n-th sibling of its type</td>
    416. 

  416.     <td class="described"><a href="#structural-pseudos">Structural
    417. 

  417.       pseudo-classes</a></td>
    418. 

  418.     <td class="origin">3</td></tr>
    419. 

  419.   <tr>
    420. 

  420.     <td class="pattern">E:nth-last-of-type(n)</td>
    421. 

  421.     <td class="meaning">an E element, the n-th sibling of its type, counting
    422. 

  422.       from the last one</td>
    423. 

  423.     <td class="described"><a href="#structural-pseudos">Structural
    424. 

  424.       pseudo-classes</a></td>
    425. 

  425.     <td class="origin">3</td></tr>
    426. 

  426.   <tr>
    427. 

  427.     <td class="pattern">E:first-child</td>
    428. 

  428.     <td class="meaning">an E element, first child of its parent</td>
    429. 

  429.     <td class="described"><a href="#structural-pseudos">Structural
    430. 

  430.       pseudo-classes</a></td>
    431. 

  431.     <td class="origin">2</td></tr>
    432. 

  432.   <tr>
    433. 

  433.     <td class="pattern">E:last-child</td>
    434. 

  434.     <td class="meaning">an E element, last child of its parent</td>
    435. 

  435.     <td class="described"><a href="#structural-pseudos">Structural
    436. 

  436.       pseudo-classes</a></td>
    437. 

  437.     <td class="origin">3</td></tr>
    438. 

  438.   <tr>
    439. 

  439.     <td class="pattern">E:first-of-type</td>
    440. 

  440.     <td class="meaning">an E element, first sibling of its type</td>
    441. 

  441.     <td class="described"><a href="#structural-pseudos">Structural
    442. 

  442.       pseudo-classes</a></td>
    443. 

  443.     <td class="origin">3</td></tr>
    444. 

  444.   <tr>
    445. 

  445.     <td class="pattern">E:last-of-type</td>
    446. 

  446.     <td class="meaning">an E element, last sibling of its type</td>
    447. 

  447.     <td class="described"><a href="#structural-pseudos">Structural
    448. 

  448.       pseudo-classes</a></td>
    449. 

  449.     <td class="origin">3</td></tr>
    450. 

  450.   <tr>
    451. 

  451.     <td class="pattern">E:only-child</td>
    452. 

  452.     <td class="meaning">an E element, only child of its parent</td>
    453. 

  453.     <td class="described"><a href="#structural-pseudos">Structural
    454. 

  454.       pseudo-classes</a></td>
    455. 

  455.     <td class="origin">3</td></tr>
    456. 

  456.   <tr>
    457. 

  457.     <td class="pattern">E:only-of-type</td>
    458. 

  458.     <td class="meaning">an E element, only sibling of its type</td>
    459. 

  459.     <td class="described"><a href="#structural-pseudos">Structural
    460. 

  460.       pseudo-classes</a></td>
    461. 

  461.     <td class="origin">3</td></tr>
    462. 

  462.   <tr>
    463. 

  463.     <td class="pattern">E:empty</td>
    464. 

  464.     <td class="meaning">an E element that has no children (including text
    465. 

  465.     nodes)</td>
    466. 

  466.     <td class="described"><a href="#structural-pseudos">Structural
    467. 

  467.       pseudo-classes</a></td>
    468. 

  468.     <td class="origin">3</td></tr>
    469. 

  469.   <tr>
    470. 

  470.     <td class="pattern">E:link <br>E:visited</td>
    471. 

  471.     <td class="meaning">an E element being the source anchor of a hyperlink of
    472. 

  472.       which the target is not yet visited (:link) or already visited
    473. 

  473.     (:visited)</td>
    474. 

  474.     <td class="described"><a href="#link">The link
    475. 

  475.       pseudo-classes</a></td>
    476. 

  476.     <td class="origin">1</td></tr>
    477. 

  477.   <tr>
    478. 

  478.     <td class="pattern">E:active <br>E:hover <br>E:focus</td>
    479. 

  479.     <td class="meaning">an E element during certain user actions</td>
    480. 

  480.     <td class="described"><a href="#useraction-pseudos">The user
    481. 

  481.       action pseudo-classes</a></td>
    482. 

  482.     <td class="origin">1 and 2</td></tr>
    483. 

  483.   <tr>
    484. 

  484.     <td class="pattern">E:target</td>
    485. 

  485.     <td class="meaning">an E element being the target of the referring URI</td>
    486. 

  486.     <td class="described"><a href="#target-pseudo">The target
    487. 

  487.       pseudo-class</a></td>
    488. 

  488.     <td class="origin">3</td></tr>
    489. 

  489.   <tr>
    490. 

  490.     <td class="pattern">E:lang(fr)</td>
    491. 

  491.     <td class="meaning">an element of type E in language "fr" (the document
    492. 

  492.       language specifies how language is determined)</td>
    493. 

  493.     <td class="described"><a href="#lang-pseudo">The :lang()
    494. 

  494.       pseudo-class&nbsp;</a></td>
    495. 

  495.     <td class="origin">2</td></tr>
    496. 

  496.   <tr>
    497. 

  497.     <td class="pattern">E:enabled<br>E:disabled&nbsp;</td>
    498. 

  498.     <td class="meaning">a user interface element E which is enabled or
    499. 

  499.     disabled</td>
    500. 

  500.     <td class="described"><a href="#UIstates">The UI element states
    501. 

  501.       pseudo-classes</a></td>
    502. 

  502.     <td class="origin">3</td></tr>
    503. 

  503.   <tr>
    504. 

  504.     <td class="pattern">E:checked<br>E:indeterminate&nbsp;</td>
    505. 

  505.     <td class="meaning">a user interface element E which is checked or in an
    506. 

  506.       indeterminate state (for instance a radio-button or checkbox)</td>
    507. 

  507.     <td class="described"><a href="#UIstates">The UI element states
    508. 

  508.       pseudo-classes</a></td>
    509. 

  509.     <td class="origin">3</td></tr>
    510. 

  510.   <tr>
    511. 

  511.     <td class="pattern">E:contains("foo")</td>
    512. 

  512.     <td class="meaning">an E element containing the substring "foo" in its textual
    513. 

  513.       contents</td>
    514. 

  514.     <td class="described"><a href="#content-selectors">Content
    515. 

  515.       pseudo-class</a></td>
    516. 

  516.     <td class="origin">3</td></tr>
    517. 

  517.   <tr>
    518. 

  518.     <td class="pattern">E::first-line</td>
    519. 

  519.     <td class="meaning">the first formatted line of an E element</td>
    520. 

  520.     <td class="described"><a href="#first-line">The :first-line
    521. 

  521.       pseudo-element</a></td>
    522. 

  522.     <td class="origin">1</td></tr>
    523. 

  523.   <tr>
    524. 

  524.     <td class="pattern">E::first-letter</td>
    525. 

  525.     <td class="meaning">the first formatted letter of an E element</td>
    526. 

  526.     <td class="described"><a href="#first-letter">The :first-letter
    527. 

  527.       pseudo-element</a></td>
    528. 

  528.     <td class="origin">1</td></tr>
    529. 

  529.   <tr>
    530. 

  530.     <td class="pattern">E::selection</td>
    531. 

  531.     <td class="meaning">the portion of an E element that is currently
    532. 

  532.       selected/highlighted by the user</td>
    533. 

  533.     <td class="described"><a href="#UIfragments">The UI element
    534. 

  534.       fragments pseudo-elements</a></td>
    535. 

  535.     <td class="origin">3</td></tr>
    536. 

  536.   <tr>
    537. 

  537.     <td class="pattern">E::before</td>
    538. 

  538.     <td class="meaning">generated content before an E element</td>
    539. 

  539.     <td class="described"><a href="#gen-content">The :before
    540. 

  540.       pseudo-element</a></td>
    541. 

  541.     <td class="origin">2</td></tr>
    542. 

  542.   <tr>
    543. 

  543.     <td class="pattern">E::after</td>
    544. 

  544.     <td class="meaning">generated content after an E element</td>
    545. 

  545.     <td class="described"><a href="#gen-content">The :after
    546. 

  546.       pseudo-element</a></td>
    547. 

  547.     <td class="origin">2</td></tr>
    548. 

  548.   <tr>
    549. 

  549.     <td class="pattern">E.warning</td>
    550. 

  550.     <td class="meaning">an E element whose class is
    551. 

  551. "warning" (the document language specifies how class is determined).</td>
    552. 

  552.     <td class="described"><a href="#class-html">Class
    553. 

  553.     selectors</a></td>
    554. 

  554.     <td class="origin">1</td></tr>
    555. 

  555.   <tr>
    556. 

  556.     <td class="pattern">E#myid</td>
    557. 

  557.     <td class="meaning">an E element with ID equal to "myid".</td>
    558. 

  558.     <td class="described"><a href="#id-selectors">ID
    559. 

  559.     selectors</a></td>
    560. 

  560.     <td class="origin">1</td></tr>
    561. 

  561.   <tr>
    562. 

  562.     <td class="pattern">E:not(s)</td>
    563. 

  563.     <td class="meaning">an E element that does not match simple selector s</td>
    564. 

  564.     <td class="described"><a href="#negation">Negation
    565. 

  565.       pseudo-class</a></td>
    566. 

  566.     <td class="origin">3</td></tr>
    567. 

  567.   <tr>
    568. 

  568.     <td class="pattern">E F</td>
    569. 

  569.     <td class="meaning">an F element descendant of an E element</td>
    570. 

  570.     <td class="described"><a href="#descendant-combinators">Descendant
    571. 

  571.       combinator</a></td>
    572. 

  572.     <td class="origin">1</td></tr>
    573. 

  573.   <tr>
    574. 

  574.     <td class="pattern">E &gt; F</td>
    575. 

  575.     <td class="meaning">an F element child of an E element</td>
    576. 

  576.     <td class="described"><a href="#child-combinators">Child
    577. 

  577.       combinator</a></td>
    578. 

  578.     <td class="origin">2</td></tr>
    579. 

  579.   <tr>
    580. 

  580.     <td class="pattern">E + F</td>
    581. 

  581.     <td class="meaning">an F element immediately preceded by an E element</td>
    582. 

  582.     <td class="described"><a href="#adjacent-d-combinators">Direct
    583. 

  583.       adjacent combinator</a></td>
    584. 

  584.     <td class="origin">2</td></tr>
    585. 

  585.   <tr>
    586. 

  586.     <td class="pattern">E ~ F</td>
    587. 

  587.     <td class="meaning">an F element preceded by an E element</td>
    588. 

  588.     <td class="described"><a href="#adjacent-i-combinators">Indirect
    589. 

  589.       adjacent combinator</a></td>
    590. 

  590.     <td class="origin">3</td></tr></tbody></table>
    591. 

  591. <p>The meaning of each selector is derived from the table above by
    592. 

  592.  prepending "matches" to the contents of each cell of the "Meaning" column.
    593. 

  593. </p><h2><a name="casesens">3. Case sensitivity</a></h2>
    594. 

  594. <p>The case-sensitivity of document language element names in selectors depends
    595. 

  595. on the document language. For example, in HTML, element names are
    596. 

  596. case-insensitive, but in XML they are case-sensitive. 
    597. 

  597. </p><p>The case-sensitivity of attribute names and attribute values in attribute
    598. 

  598. selectors also depends on the document language.
    599. 

  599. </p><h2><a name="selector-syntax">4. Selector syntax</a></h2>
    600. 

  600. <p>A&nbsp;<dfn><a name="selector">selector</a></dfn> is a chain of one or more <a href="#sequence">sequences of simple
    601. 

  601. selectors</a> separated by <a href="#combinators">combinators</a>. 
    602. 

  602. </p><p>A&nbsp;<dfn><a name="sequence">sequence of simple selectors</a></dfn> is a chain
    603. 

  603.   of <a href="#simple-selectors-dfn">simple selectors</a> that are not separated by a
    604. 

  604.   <a href="#combinators">combinator</a>. It always begins with a <a href="#type-selectors">type selector</a> or a <a href="#universal-selector">universal
    605. 

  605.   selector</a>. No other type selector or universal selector is allowed in the
    606. 

  606.   sequence. 
    607. 

  607. </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
    608. 

  608.   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
    609. 

  609.   of simple selectors.
    610. 

  610. </p><p><dfn>Combinators</dfn> are: white space, "greater-than sign" (<code>&gt;</code>),
    611. 

  611.   "plus sign" (<code>+</code>) and "tilde" (<code>~</code>).
    612. 

  612.   White space may appear between a combinator and the simple selectors around
    613. 

  613.   it. <a name="whitespace"></a>Only the characters "space" (Unicode code 32), "tab"
    614. 

  614.   (9), "line feed" (10), "carriage return" (13), and "form feed" (12) can occur
    615. 

  615.   in white space. Other space-like characters, such as "em-space" (8195) and "ideographic
    616. 

  616.   space" (12288), are never part of white space.
    617. 

  617. </p><p>The elements of the document tree represented by a selector are called <dfn><a name="subject"></a>subjects
    618. 

  618.   of the selector</dfn>. A selector consisting of a single sequence of simple
    619. 

  619.   selectors represents any element satisfying its requirements. Prepending another
    620. 

  620.   sequence of simple selectors and a combinator to a sequence imposes additional
    621. 

  621.   matching constraints, so the subjects of a selector are always a subset of the
    622. 

  622.   elements represented by the rightmost sequence of simple selectors.
    623. 

  623. </p><p><strong><em>Note</em></strong><em>: an empty selector, containing no sequence
    624. 

  624.   of simple selectors and no combinator, is an <a href="#Conformance">invalid
    625. 

  625.   selector</a>.</em>
    626. 

  626. </p><h2><a name="grouping">5. Groups of selectors</a></h2>
    627. 

  627. <p>When several selectors share the same declarations, they may be grouped into
    628. 

  628. a comma-separated list. 
    629. 

  629. </p><div class="example">CSS example(s):
    630. 

  630. <p>In this example, we condense three rules with identical declarations into
    631. 

  631. one. Thus, </p><pre>h1 { font-family: sans-serif }
    632. 

  632. h2 { font-family: sans-serif }
    633. 

  633. h3 { font-family: sans-serif }</pre>is equivalent to: <pre>h1, h2, h3 { font-family: sans-serif }</pre></div>
    634. 

  634. <p><b>Warning</b>: the equivalence is true in this example because all selectors
    635. 

  635.   are valid selectors. If just one of these selectors is invalid, the entire group
    636. 

  636.   of selectors is invalid thus invalidating the rule for all three heading elements,
    637. 

  637.   whereas only one of the three individual heading rules would be invalid.
    638. 

  638.   
    639. 

  639. </p><h2><a name="simple-selectors">6. Simple selectors</a></h2>
    640. 

  640. <h3><a name="type-selectors">6.1 Type selector</a></h3>
    641. 

  641. <p>A&nbsp;<dfn>type selector</dfn> is the name of a document language element
    642. 

  642. type. A type selector represents an instance of the element type in the document
    643. 

  643. tree. 
    644. 

  644. </p><div class="example">Example:
    645. 

  645.   <p>The following selector represents an <code>h1</code> element in the document
    646. 

  646. tree: </p><pre>h1</pre></div>
    647. 

  647. <h4><a name="typenmsp">6.1.1 Type selectors and Namespaces</a></h4>
    648. 

  648. <p>Type selectors allow an optional namespace (<a href="#XMLNAMES">[XML-NAMES]</a>) component.
    649. 

  649.   A namespace prefix that has been previously declared
    650. 

  650.   may be prepended to the element name separated by the namespace separator
    651. 

  651.   "vertical bar" (<code>|</code>). The namespace component may be left
    652. 

  652.   empty to indicate that the selector is only to represent elements with no declared
    653. 

  653.   namespace. Furthermore, an asterisk may be used for the namespace prefix, indicating
    654. 

  654.   that the selector represents elements in any namespace (including elements
    655. 

  655.   with no namespace). Element type selectors that have no namespace component
    656. 

  656.   (no namespace separator), represent elements without regard
    657. 

  657.   to the element's namespace (equivalent to "<code>*|</code>") unless a default
    658. 

  658.   namespace has been declared. In that case, the selector will represent only
    659. 

  659.   elements in the default namespace.
    660. 

  660. </p><p>Note : a type selector containing a namespace prefix that has not been previously
    661. 

  661.  declared is an <a href="#Conformance">invalid</a> selector.
    662. 

  662.  The mechanism for declaring a namespace prefix is left up to the language
    663. 

  663.  implementing <span class="modulename">Selectors</span>.
    664. 

  664.  In CSS, such a mechanism is defined in the General Syntax module.
    665. 

  665. 

  666. <!--<p>An alternative approach would be to define element type selectors that have
    667. 

  667.   no namespace component to match only elements that have no namespace (unless
    668. 

  668.   a default namespace has been declared in the CSS). This would make the selector
    669. 

  669.   "<code>h1</code>" equivalent to the selector "<code>|h1</code>" as opposed to
    670. 

  670.   "<code>*|h1</code>". The downside to this approach is that legacy style sheets
    671. 

  671.   (those written without any namespace constructs) will fail to match in all XML
    672. 

  672.   documents where namespaces are used throughout, e.g. all XHTML documents. -->
    673. 

  673. </p><p>It should be noted that if a namespace prefix used in a selector has not been
    674. 

  674.   previously declared, then the selector must be considered invalid and the entire
    675. 

  675.   style rule will be ignored in accordance with the <a href="#Conformance">standard
    676. 

  676.   error handling rules</a>. 
    677. 

  677. </p><p>It should further be noted that in a namespace aware client, element type
    678. 

  678. selectors will only match against the <a href="http://www.w3.org/TR/REC-xml-names/#NT-LocalPart">local part</a> of the
    679. 

  679. element's <a href="http://www.w3.org/TR/REC-xml-names/#ns-qualnames">qualified
    680. 

  680. name</a>. See <a href="#downlevel">below</a>
    681. 

  681. for notes about matching behaviors in down-level clients. 
    682. 

  682. </p><p>In summary:
    683. 

  683. </p><dl>
    684. 

  684.   <dt><code>ns|E</code>
    685. 

  685.   </dt><dd>elements with name E in namespace ns
    686. 

  686.   </dd><dt><code>*|E</code>
    687. 

  687.   </dt><dd>elements with name E in any namespace, including those without any
    688. 

  688.   declared namespace
    689. 

  689.   </dd><dt><code>|E</code>
    690. 

  690.   </dt><dd>elements with name E without any declared namespace
    691. 

  691.   </dd><dt><code>E</code>
    692. 

  692.   </dt><dd>if no default namespace has been specified, this is equivalent to *|E.
    693. 

  693.   Otherwise it is equivalent to ns|E where ns is the default namespace. </dd></dl>
    694. 

  694. <div class="example">
    695. 

  695. <p>CSS examples: 
    696. 

  696.   </p><pre>@namespace foo url(http://www.example.com);
    697. 

  697. 

  698. foo|h1 { color: blue }
    699. 

  699. 

  700. foo|* { color: yellow }
    701. 

  701. 

  702. |h1 { color: red }
    703. 

  703. 

  704. *|h1 { color: green }
    705. 

  705. 

  706. h1 { color: green }</pre>
    707. 

  707.   <p>The first rule will match only <code>h1</code> elements in the "http://www.example.com"
    708. 

  708.     namespace. 
    709. 

  709.   </p><p>The second rule will match all elements in the "http://www.example.com" namespace.
    710. 

  710.   
    711. 

  711. </p><p>The third rule will match only <code>h1</code> elements without any declared
    712. 

  712. namespace. 
    713. 

  713. </p><p>The fourth rule will match <code>h1</code> elements in any namespace (including
    714. 

  714. those without any declared namespace).
    715. 

  715. </p><p>The last rule is equivalent to the fourth rule because no default namespace
    716. 

  716. has been defined.</p></div>
    717. 

  717. <h3><a name="universal-selector">6.2 Universal selector</a> </h3>
    718. 

  718. <p>The&nbsp;<dfn>universal selector</dfn>, written "asterisk" (<code>*</code>),
    719. 

  719.   represents the qualified name of any element type. It represents then any single
    720. 

  720.   element in the document tree in any namespace (including those without any declared
    721. 

  721.   namespace) if no default namespace has been specified. If a default namespace
    722. 

  722.   has been specified, see <a href="#univnmsp">Universal selector and Namespaces</a> below.
    723. 

  723. </p><p>If the universal selector is not the only component of a sequence of simple
    724. 

  724. selectors, the <code>*</code> may be omitted. For example: 
    725. 

  725. </p><div class="example">
    726. 

  726. <ul>
    727. 

  727.   <li><code>*[hreflang|=en]</code> and <code>[hreflang|=en]</code> are equivalent,
    728. 

  728.   </li><li><code>*.warning</code> and <code>.warning</code> are equivalent,
    729. 

  729.   </li><li><code>*#myid</code> and <code>#myid</code> are equivalent. </li></ul></div>
    730. 

  730. <p><b>Note</b>: it is recommended that the <code>*</code>, representing the
    731. 

  731. universal selector, not be omitted.
    732. 

  732. </p><h4><a name="univnmsp">6.2.1 Universal selector and Namespaces</a></h4>
    733. 

  733. <p>The universal selector allows an optional namespace component.
    734. 

  734. </p><dl>
    735. 

  735.   <dt><code>ns|*</code>
    736. 

  736.   </dt><dd>all elements in namespace ns
    737. 

  737.   </dd><dt><code>*|*</code>
    738. 

  738.   </dt><dd>all elements
    739. 

  739.   </dd><dt><code>|*</code>
    740. 

  740.   </dt><dd>all elements without any declared namespace
    741. 

  741.   </dd><dt><code>*</code>
    742. 

  742.   </dt><dd>if no default namespace has been specified, this is equivalent to *|*.
    743. 

  743.   Otherwise it is equivalent to ns|* where ns is the default namespace. </dd></dl>
    744. 

  744. <p>Note: a universal selector containing a namespace prefix that has not been
    745. 

  745.  previously declared is an <a href="#Conformance">invalid</a> selector.
    746. 

  746.  The mechanism for declaring a namespace prefix is left up to the language
    747. 

  747.  implementing <span class="modulename">Selectors</span>.
    748. 

  748.  In CSS, such a mechanism is defined in the General Syntax module.
    749. 

  749. 

  750. </p><h3><a name="attribute-selectors">6.3 Attribute selectors</a></h3>
    751. 

  751. <p><span class="propernoun">Selectors</span> allow the representation of an element's attributes.
    752. 

    753. 

  753. </p><h4><a name="attribute-representation">6.3.1 Attribute presence and values
    754. 

  754. selectors</a></h4>
    755. 

  755. <p>CSS2 introduced four attribute selectors:
    756. 

  756. </p><dl>
    757. 

  757.   <dt><code>[att]</code>
    758. 

  758.   </dt><dd>Represents the <code>att</code> attribute, whatever the value of the
    759. 

  759.   attribute.
    760. 

  760.   </dd><dt><code>[att=val]</code>
    761. 

  761.   </dt><dd>Represents the <code>att</code> attribute with value exactly "val".
    762. 

  762.   </dd><dt><code>[att~=val]</code>
    763. 

  763.   </dt><dd>Represents the <code>att</code> attribute whose value is a space-separated list of words,
    764. 

  764.   one of which is exactly "val". If this selector is used, the
    765. 

  765.   words in the value must not contain spaces (since they are separated by
    766. 

  766.   spaces).
    767. 

  767.   </dd><dt><code>[att|=val]</code>
    768. 

  768.   </dt><dd>Represents the <code>att</code> attribute, its value either being exactly "val" or
    769. 

  769.   beginning with "val" immediately followed by "-".
    770. 

  770.   This is primarily intended to allow language subcode matches
    771. 

  771.   (e.g., the <code>hreflang</code> attribute on the <code>link</code> element in HTML)
    772. 

  772.   as described in RFC 3066 (<a class="noxref" href="#rfc3066" rel="biblioentry">[RFC3066]</a>).
    773. 

  773.    Note: for <code>lang</code> (or <code>xml:lang</code>) language subcode matching,
    774. 

  774.    please see <a href="#lang-pseudo">the <code>:lang</code> pseudo-class</a>.
    775. 

  775.   
    776. 

  776. </dd></dl>
    777. 

  777. <p>Attribute values must be identifiers or strings. The case-sensitivity of
    778. 

  778. attribute names and values in selectors depends on the document language. 
    779. 

  779. </p><div class="example">Examples:
    780. 

  780.   <p>For example, the following attribute selector represents an <code>h1</code>
    781. 

  781. element that carries the <code>title</code> attribute, whatever its value: </p><pre>h1[title]</pre>
    782. 

  782.   <p>In the following example, the selector represents a <code>span</code> element
    783. 

  783. whose <code>class</code> attribute has exactly the value "example": </p><pre>span[class=example]</pre>
    784. 

  784.   Multiple attribute selectors can be used to represent several attributes of
    785. 

  785.   an element, or several conditions on the same attribute.
    786. 

  786.   <p>Here, the selector represents a <code>span</code> element whose <code>hello</code>
    787. 

  787. attribute has exactly the value "Cleveland" and whose <code>goodbye</code> attribute
    788. 

  788. has exactly the value "Columbus": </p><pre>span[hello="Cleveland"][goodbye="Columbus"]</pre>
    789. 

  789.   <p>The following selectors illustrate the differences between "=" and "~=".
    790. 

  790.     The first selector will represent, for example, the value "copyright copyleft
    791. 

  791.     copyeditor" on a <code>rel</code> attribute. The second selector will only
    792. 

  792.     represent an <code>a</code> element with an <code>href</code> attribute having
    793. 

  793.     the exact value "http://www.w3.org/".
    794. 

  794.   </p><pre>a[rel~="copyright"]
    795. 

  795. a[href="http://www.w3.org/"]</pre>
    796. 

  796.   <p>The following selector represents a <code>link</code> element whose
    797. 

  797.   <code>hreflang</code> attribute is exactly "fr".
    798. 

  798.   </p><pre>link[hreflang=fr]</pre>
    799. 

  799.   <p>The following selector represents a <code>link</code> element for which the
    800. 

  800.     values of the <code>hreflang</code> attribute begins with "en", including
    801. 

  801.     "en", "en-US", and "en-cockney":
    802. 

  802.   </p><pre>link[hreflang|="en"]</pre>
    803. 

  803.   <p>Similarly, the following selectors represents a <code>DIALOGUE</code> element
    804. 

  804. whenever it has one of two different values for an attribute <code>character</code>:
    805. 

  805. </p><pre>DIALOGUE[character=romeo]&nbsp;
    806. 

  806. 

  807. DIALOGUE[character=juliet]</pre></div>
    808. 

  808. <h4><a name="attribute-substrings"></a>6.3.2 Substring matching attribute
    809. 

  809. selectors</h4>
    810. 

  810. <p>Three additional attribute selectors are provided
    811. 

  811.  for matching substrings in the value of an attribute:
    812. 

  812. </p><dl>
    813. 

  813.   <dt><code>[att^=val]</code>
    814. 

  814.   </dt><dd>Represents the <code>att</code> attribute whose value begins with
    815. 

  815.   the prefix "val"
    816. 

  816.   </dd><dt><code>[att$=val]</code>
    817. 

  817.   </dt><dd>Represents the <code>att</code> attribute whose value ends with the
    818. 

  818.   suffix "val"
    819. 

  819.   </dd><dt><code>[att*=val]</code>
    820. 

  820.   </dt><dd>Represents the <code>att</code> attribute whose value contains at least
    821. 

  821.   one instance of the substring "val" </dd></dl>
    822. 

  822. <p>Attribute values must be identifiers or strings. The case-sensitivity of
    823. 

  823. attribute names in selectors depends on the document language. 
    824. 

  824. </p><p>Example:
    825. 

  825. </p><p>The following selector represents an HTML <code>object</code>, referencing an
    826. 

  826. image:</p><pre>object[type^="image/"]
    827. 

  827. </pre>
    828. 

  828. <p>The following selector represents an HTML anchor <code>a</code> with an
    829. 

  829.   <code>href</code> attribute whose value ends with ".html".
    830. 

  830. </p><pre>a[href$=".html"]</pre>
    831. 

  831. <p>The following selector represents a HTML paragraph with a <code>title</code>
    832. 

  832. attribute whose value contains the substring "hello"</p><pre>p[title*="hello"] </pre>
    833. 

  833. <h4><a name="attrnmsp">6.3.3 Attribute selectors and Namespaces</a></h4>
    834. 

  834. <p>Attribute selectors allow an optional namespace component to the attribute
    835. 

  835.   name. A namespace prefix that has been previously declared may be prepended
    836. 

  836.   to the attribute name separated by the namespace separator
    837. 

  837.   "vertical bar" (<code>|</code>). In keeping with the Namespaces in
    838. 

  838.   the XML recommendation, default namespaces do not apply to attributes, therefore
    839. 

  839.   attribute selectors without a namespace component apply only to attributes that
    840. 

  840.   have no declared namespace (equivalent to "<code>|attr</code>"). An asterisk
    841. 

  841.   may be used for the namespace prefix indicating that the selector is to match
    842. 

  842.   all attribute names without regard to the attribute's namespace.
    843. 

  843. </p><p>Note : an attribute
    844. 

  844.  selector with an attribute name containing a namespace prefix that has
    845. 

  845.  not been previously declared is an <a href="#Conformance">invalid</a> selector.
    846. 

  846.  The mechanism for declaring a namespace prefix is left up to the language
    847. 

  847.  implementing <span class="modulename">Selectors</span>.
    848. 

  848.  In CSS, such a mechanism is defined in the General Syntax module.
    849. 

  849. 

  850. </p><p>CSS examples: 
    851. 

  851. </p><div class="example">
    852. 

  852.   <pre>@namespace foo "http://www.example.com";
    853. 

  853. 

  854. [foo|att=val] { color: blue }
    855. 

  855. 

  856. [*|att] { color: yellow }
    857. 

  857. 

  858. [|att] { color: green }
    859. 

  859. 

  860. [att] { color: green }</pre>
    861. 

  861.   The first rule will match only elements with the attribute <code>att</code>
    862. 

  862.   in the "http://www.example.com" namespace with the value "val".
    863. 

  863.   <p>The second rule will match only elements with the attribute <code>att</code>
    864. 

  864. regardless of the namespace of the attribute (including no declared namespace).
    865. 

  865. </p><p>The last two rules are equivalent and will match only elements with the
    866. 

  866. attribute <code>att</code> where the attribute is not declared to be in a
    867. 

  867. namespace.</p></div>
    868. 

  868. <h4><a name="def-values">6.3.4 Default attribute values in DTDs</a></h4>
    869. 

  869. <p>Attribute selectors represent explicitly set attribute values in the document
    870. 

  870.   tree. Default attribute values may be defined in a DTD or elsewhere.
    871. 

  871.   <span class="propernoun">Selectors</span> should be designed so that they work
    872. 

  872.   even if the default values are not included in the document tree.
    873. 

  873. </p><div class="example">Examples:
    874. 

  874.   <p>For example, consider an element <code>EXAMPLE</code> with an attribute
    875. 

  875. <code>notation</code> that has a default value of "decimal". The DTD fragment
    876. 

  876. might be </p><pre>&lt;!ATTLIST EXAMPLE notation (decimal,octal) "decimal"&gt;</pre>
    877. 

  877.   If the selectors represent an <code>EXAMPLE</code> element when the value of
    878. 

  878.   the attribute is explicitly set:
    879. 

  879.   <pre>EXAMPLE[notation=decimal]
    880. 

  880. EXAMPLE[notation=octal]</pre>
    881. 

  881.   then to represent only the case where this attribute is set by default, and
    882. 

  882.   not explicitly, the following selector might be used:
    883. 

  883.   <pre>EXAMPLE:not([notation])</pre>
    884. 

  884. </div>
    885. 

  885. <h3><a name="class-html">6.4 Class selectors</a></h3>
    886. 

  886. <p>Working with HTML, authors may use the period (<code>.</code>) notation as
    887. 

  887.   an alternative to the <code>~=</code> notation when representing the <code>class</code>
    888. 

  888.   attribute. Thus, for HTML, <code>div.value</code> and <code>div[class~=value]</code>
    889. 

  889.   have the same meaning. The attribute value must immediately follow the "period"
    890. 

  890.   (<code>.</code>). Note: UAs may apply selectors using the period (.) notation
    891. 

  891.   in XML documents if the UA has namespace specific knowledge that allows it to
    892. 

  892.   determine which attribute is the "class" attribute for the respective
    893. 

  893.   namespace. One such example of namespace specific knowledge is the prose in
    894. 

  894.   the specification for a particular namespace (e.g. SVG 1.0 [<a href="#SVG">SVG</a>]
    895. 

  895.   describes the <a href="http://www.w3.org/TR/2001/PR-SVG-20010719/styling.html#ClassAttribute">SVG
    896. 

  896.   "class" attribute</a> and how a UA should interpret it, and similarly
    897. 

  897.   MathML 1.01 [<a href="#MATH">MATH</a>] describes the <a href="http://www.w3.org/1999/07/REC-MathML-19990707/chapter2.html#sec2.3.4">MathML
    898. 

  898.   "class" attribute</a>.)
    899. 

  899. </p><p>
    900. 

  900. </p><div class="example">Examples:
    901. 

  901.   <p>For example, we can represent an arbitrary element with
    902. 

  902. <code>class~="pastoral"</code> as follows: </p><pre>*.pastoral</pre>or just <pre>.pastoral</pre>
    903. 

  903.   The following selector represents an <code>h1</code> element with <code>class~="pastoral"</code>:
    904. 

  904.   <pre>h1.pastoral</pre>
    905. 

  905.   <p>For example, the following selector represents a <code>p</code> element whose
    906. 

  906. <code>class</code> attribute has been assigned a list of space-separated values that
    907. 

  907. includes "pastoral" and "marine": </p><pre>p.pastoral.marine</pre>
    908. 

  908. <p>It is fully identical to:</p><pre>p.marine.pastoral</pre>
    909. 

  909.   <p>This selector represents for example a <code>p</code> with <code>class="pastoral
    910. 

  910.     blue aqua marine"</code> or <code>class="marine blue pastoral aqua" </code>but
    911. 

  911.     not <code>class="pastoral blue"</code>.
    912. 

  912. </p></div>
    913. 

  913. <h3><a name="id-selectors">6.5 ID selectors</a></h3>
    914. 

  914. <p>Document languages may contain attributes that are declared to be of type ID.
    915. 

  915.   What makes attributes of type ID special is that no two such attributes can
    916. 

  916.   have the same value in a document, regardless of the type of the elements that
    917. 

  917.   carry them; whatever the document language, an ID typed attribute can be used
    918. 

  918.   to uniquely identify its element. In HTML all ID attributes are named "id";
    919. 

  919.   XML applications may name ID attributes differently, but the same restriction
    920. 

  920.   applies. 
    921. 

  921. </p><p>An ID typed attribute of a document language allows authors to assign an identifier
    922. 

  922.   to one element instance in the document tree. W3C ID selectors represent an
    923. 

  923.   element instance based on its identifier. An ID selector contains a "number
    924. 

  924.   sign" (#) immediately followed by the ID value. 
    925. 

  925. </p><div class="example">Examples:
    926. 

  926.   <p>The following ID selector represents an <code>h1</code> element whose ID typed
    927. 

  927.     attribute has the value "chapter1":
    928. 

  928.   </p><pre>h1#chapter1</pre>
    929. 

  929.   <p>The following ID selector represents any element whose ID typed attribute
    930. 

  930.     has the value "chapter1":
    931. 

  931.   </p><pre>#chapter1</pre>
    932. 

  932.   The following selector represents any element whose ID typed attribute has the
    933. 

  933.   value "z98y".
    934. 

  934.   <pre>*#z98y</pre></div>
    935. 

  935. <div class="note"><i><b>Note.</b> In XML 1.0 <a class="noxref" href="http://www.w3.org/TR/REC-CSS2/refs.html#ref-XML10" rel="biblioentry">[XML10]</a>, the information about which attribute contains an
    936. 

  936.   element's IDs is contained in a DTD or a schema. When parsing XML, UAs do not
    937. 

  937.   always read the DTD, and thus may not know what the ID of an element is
    938. 

  938.   (though a UA may have namespace specific knowledge that allows it to determine
    939. 

  939.   which attribute is the ID attribute for that namespace). If
    940. 

  940.   a style sheet designer knows or suspects that a UA may not know what the ID of an
    941. 

  941.   element is, he should use normal attribute selectors instead:
    942. 

  942.   <code>[name=p371]</code> instead of <code>#p371</code>.
    943. 

  943.   Elements in XML 1.0 documents without a DTD do not have IDs at all.</i></div>
    944. 

  944. <h3><a name="pseudo-classes">6.6 Pseudo-classes</a></h3>
    945. 

  945. <p>The pseudo-class concept is introduced to permit selection based on information
    946. 

  946.   that lies outside of the document tree or that cannot be expressed using the
    947. 

  947.   other simple selectors. 
    948. 

  948. </p><p>A pseudo-class always contains a "colon" (<code>:</code>) followed
    949. 

  949.   by the name of the pseudo-class and optionally by a value between parentheses.
    950. 

  950. 

  951. </p><p>Pseudo-classes are allowed in all sequences of simple selectors contained in
    952. 

  952.   a selector. Pseudo-classes are allowed anywhere in sequences of simple selectors,
    953. 

  953.   after the leading type selector or universal selector (possibly omitted). Pseudo-class
    954. 

  954.   names are case-insensitive. Some pseudo-classes are mutually exclusive, while
    955. 

  955.   others can be applied simultaneously to the same element. Pseudo-classes may
    956. 

  956.   be dynamic, in the sense that an element may acquire or lose a pseudo-class
    957. 

  957.   while a user interacts with the document.
    958. 

  958. </p><h4><a name="dynamic-pseudos">6.6.1 Dynamic pseudo-classes</a></h4>
    959. 

  959. <p>Dynamic pseudo-classes classify elements on characteristics other than their
    960. 

  960.   name, attributes or content, in principle characteristics that cannot be deduced
    961. 

  961.   from the document tree.
    962. 

  962. </p><p>Dynamic pseudo-classes do not appear in the document source or document tree.
    963. 

  963. 

  964. </p><h5>The&nbsp;<a name="link">link pseudo-classes: :link and :visited</a></h5>
    965. 

  965. <p>User agents commonly display unvisited links differently from previously
    966. 

  966. visited ones. <span class="modulename">Selectors</span> provides the pseudo-classes <code>:link</code> and
    967. 

  967. <code>:visited</code> to distinguish them: 
    968. 

  968. </p><ul>
    969. 

  969.   <li>The <code>:link</code> pseudo-class applies for links that have not yet been
    970. 

  970.   visited.
    971. 

  971.   </li><li>The <code>:visited</code> pseudo-class applies once the link has been visited
    972. 

  972.   by the user. </li></ul>
    973. 

  973. <div class="note"><i><b>Note.</b> After some amount of time, user agents may
    974. 

  974. choose to return a visited link to the (unvisited) ':link' state.</i></div>
    975. 

  975. <p>The two states are mutually exclusive. 
    976. 

  976. </p><div class="example">Example:
    977. 

  977.   <p>The following selector represents links carrying class <code>external</code> and
    978. 

  978. already visited: </p><pre>a.exte
    979.