├── package.json
├── LICENSE
├── smoothscroll.min.js
├── README.md
├── smoothscroll.js
└── example.html


/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "smoothscroll",
 3 |   "version": "0.4.0",
 4 |   "description": "A teeny tiny smooth scroll script with ease-in-out effect and no jQuery.",
 5 |   "main": "smoothscroll.js",
 6 |   "author": "Alice Lieutier <alice@lieutier.me> (http://alice.lieutier.me)",
 7 |   "license": "MIT",
 8 |   "homepage": "https://github.com/alicelieutier/smoothScroll#readme",
 9 |   "repository": "https://github.com/alicelieutier/smoothScroll.git",
10 |   "keywords": [
11 |     "smooth scroll",
12 |     "scroll",
13 |     "no jQuery",
14 |     "anchor"
15 |   ],
16 |   "scripts": {
17 |     "test": "echo \"Error: no test specified\" && exit 1"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2013 Alice Lieutier
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/smoothscroll.min.js:
--------------------------------------------------------------------------------
1 | (function(root,smoothScroll){"use strict";if(typeof define==="function"&&define.amd){define(smoothScroll)}else if(typeof exports==="object"&&typeof module==="object"){module.exports=smoothScroll()}else{root.smoothScroll=smoothScroll()}})(this,function(){"use strict";if(typeof window!=="object")return;if(document.querySelectorAll===void 0||window.pageYOffset===void 0||history.pushState===void 0){return}var getTop=function(element,start){if(element.nodeName==="HTML")return-start;return element.getBoundingClientRect().top+start};var easeInOutCubic=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1};var position=function(start,end,elapsed,duration){if(elapsed>duration)return end;return start+(end-start)*easeInOutCubic(elapsed/duration)};var smoothScroll=function(el,duration,callback,context){duration=duration||500;context=context||window;var start=context.scrollTop||window.pageYOffset;if(typeof el==="number"){var end=parseInt(el)}else{var end=getTop(el,start)}var clock=Date.now();var requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(fn){window.setTimeout(fn,15)};var step=function(){var elapsed=Date.now()-clock;if(context!==window){context.scrollTop=position(start,end,elapsed,duration)}else{window.scroll(0,position(start,end,elapsed,duration))}if(elapsed>duration){if(typeof callback==="function"){callback(el)}}else{requestAnimationFrame(step)}};step()};var linkHandler=function(ev){if(!ev.defaultPrevented){ev.preventDefault();if(location.hash!==this.hash)window.history.pushState(null,null,this.hash);var node=document.getElementById(this.hash.substring(1));if(!node)return;smoothScroll(node,500,function(el){location.replace("#"+el.id)})}};document.addEventListener("DOMContentLoaded",function(){var internal=document.querySelectorAll('a[href^="#"]:not([href="#"])'),a;for(var i=internal.length;a=internal[--i];){a.addEventListener("click",linkHandler,false)}});return smoothScroll});
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | smoothScroll
 2 | ============
 3 | 
 4 | A teeny tiny, standard compliant, smooth scroll script with ease-in-out effect and no dependancy.
 5 | 
 6 | smoothScroll will tie all your internal links to a handler that will produce a smooth scroll to their target instead of an instant jump. It also returns an API that you can use to call a smooth scroll yourself.
 7 | 
 8 | This works in Firefox, Chrome, IE10, Opera and Safari.
 9 | Unsupported browsers would just use the normal internal link behaviour.
10 | 
11 | 
12 | How to use
13 | -
14 | Just include smoothscroll inside your page, like this:
15 | 
16 |     <script type="text/javascript" src="path/to/smoothscroll.min.js"></script>
17 | 
18 | All your internal links will be tied to a smooth scroll.
19 | If you want to call a smooth scroll from your code, you can now use the API by calling:
20 | 
21 | `window.smoothScroll(target, duration, callback, context)`
22 | 
23 | where:
24 | * `target` is a `HTMLElement Object` from your document that you want to scroll to, or a numeric position on the page
25 | * `duration` is the total duration of the scroll (optional, defaults to 500ms)
26 | * `callback` is a function to be executed when the scrolling is over (optional)
27 | * `context` is the scrolling context (optional, defaults to window, can be any `HTMLElement Object`)
28 | 
29 | Alternatively, you can install smoothscroll as a dependency using npm:
30 | 
31 | ```
32 | npm install --save smoothscroll
33 | ```
34 | 
35 | Example usage as a module, binding to a custom element:
36 | 
37 | ```javascript
38 | var smoothScroll = require('smoothscroll');
39 | 
40 | var exampleBtn = document.querySelector('.example-button');
41 | var exampleDestination = document.querySelector('.example-destination');
42 | 
43 | // This function can easily be an onClick handler in React components
44 | var handleClick = function(event) {
45 |   event.preventDefault();
46 | 
47 |   smoothScroll(exampleDestination);
48 | };
49 | 
50 | exampleBtn.addEventListener('click', handleClick);
51 | ```
52 | 
53 | smoothscroll.js
54 | -
55 | Here are some indications if you want to tweak the code to fit your needs:
56 | 
57 | There is an ease-in-out type timing function. You can change it quite easily in the code. Here is where I found the one I use:
58 | - http://blog.greweb.fr/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/
59 | 
60 | You can also change the default duration of a scroll, which is 500ms by default.
61 | 
62 | My code is **heavily** commented so you shoudn't lose yourself too much.
63 | 
64 | Example
65 | -
66 | The example.html file is basically the script applied to a w3c page. I just changed the style so the table of content is fixed to the left.
67 | 
68 | Check out the result. Wouldn't it be great if all w3c specs where that easy to navigate in?
69 | 
70 | Similar scripts
71 | -
72 | While I was looking for a name for this script, I found these sites. If this script is not what you need, you might have more luck there:
73 | - http://www.itnewb.com/tutorial/Creating-the-Smooth-Scroll-Effect-with-JavaScript
74 | - http://www.kryogenix.org/code/browser/smoothscroll (best cross browser compatibility)
75 | 
76 | License
77 | -
78 | This library is released under the MIT license.
79 | 


--------------------------------------------------------------------------------
/smoothscroll.js:
--------------------------------------------------------------------------------
  1 | (function (root, smoothScroll) {
  2 |   'use strict';
  3 | 
  4 |   // Support RequireJS and CommonJS/NodeJS module formats.
  5 |   // Attach smoothScroll to the `window` when executed as a <script>.
  6 | 
  7 |   // RequireJS
  8 |   if (typeof define === 'function' && define.amd) {
  9 |     define(smoothScroll);
 10 | 
 11 |   // CommonJS
 12 |   } else if (typeof exports === 'object' && typeof module === 'object') {
 13 |     module.exports = smoothScroll();
 14 | 
 15 |   } else {
 16 |     root.smoothScroll = smoothScroll();
 17 |   }
 18 | 
 19 | })(this, function(){
 20 | 'use strict';
 21 | 
 22 | // Do not initialize smoothScroll when running server side, handle it in client:
 23 | if (typeof window !== 'object') return;
 24 | 
 25 | // We do not want this script to be applied in browsers that do not support those
 26 | // That means no smoothscroll on IE9 and below.
 27 | if(document.querySelectorAll === void 0 || window.pageYOffset === void 0 || history.pushState === void 0) { return; }
 28 | 
 29 | // Get the top position of an element in the document
 30 | var getTop = function(element, start) {
 31 |     // return value of html.getBoundingClientRect().top ... IE : 0, other browsers : -pageYOffset
 32 |     if(element.nodeName === 'HTML') return -start
 33 |     return element.getBoundingClientRect().top + start
 34 | }
 35 | // ease in out function thanks to:
 36 | // http://blog.greweb.fr/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/
 37 | var easeInOutCubic = function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 }
 38 | 
 39 | // calculate the scroll position we should be in
 40 | // given the start and end point of the scroll
 41 | // the time elapsed from the beginning of the scroll
 42 | // and the total duration of the scroll (default 500ms)
 43 | var position = function(start, end, elapsed, duration) {
 44 |     if (elapsed > duration) return end;
 45 |     return start + (end - start) * easeInOutCubic(elapsed / duration); // <-- you can change the easing funtion there
 46 |     // return start + (end - start) * (elapsed / duration); // <-- this would give a linear scroll
 47 | }
 48 | 
 49 | // we use requestAnimationFrame to be called by the browser before every repaint
 50 | // if the first argument is an element then scroll to the top of this element
 51 | // if the first argument is numeric then scroll to this location
 52 | // if the callback exist, it is called when the scrolling is finished
 53 | // if context is set then scroll that element, else scroll window
 54 | var smoothScroll = function(el, duration, callback, context){
 55 |     duration = duration || 500;
 56 |     context = context || window;
 57 |     var start = context.scrollTop || window.pageYOffset;
 58 | 
 59 |     if (typeof el === 'number') {
 60 |       var end = parseInt(el);
 61 |     } else {
 62 |       var end = getTop(el, start);
 63 |     }
 64 | 
 65 |     var clock = Date.now();
 66 |     var requestAnimationFrame = window.requestAnimationFrame ||
 67 |         window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
 68 |         function(fn){window.setTimeout(fn, 15);};
 69 | 
 70 |     var step = function(){
 71 |         var elapsed = Date.now() - clock;
 72 |         if (context !== window) {
 73 |           context.scrollTop = position(start, end, elapsed, duration);
 74 |         }
 75 |         else {
 76 |           window.scroll(0, position(start, end, elapsed, duration));
 77 |         }
 78 | 
 79 |         if (elapsed > duration) {
 80 |             if (typeof callback === 'function') {
 81 |                 callback(el);
 82 |             }
 83 |         } else {
 84 |             requestAnimationFrame(step);
 85 |         }
 86 |     }
 87 |     step();
 88 | }
 89 | 
 90 | var linkHandler = function(ev) {
 91 |     if (!ev.defaultPrevented) {
 92 |         ev.preventDefault();
 93 | 
 94 |         if (location.hash !== this.hash) window.history.pushState(null, null, this.hash)
 95 |         // using the history api to solve issue #1 - back doesn't work
 96 |         // most browser don't update :target when the history api is used:
 97 |         // THIS IS A BUG FROM THE BROWSERS.
 98 |         // change the scrolling duration in this call
 99 |         var node = document.getElementById(this.hash.substring(1))
100 |         if (!node) return; // Do not scroll to non-existing node
101 | 
102 |         smoothScroll(node, 500, function (el) {
103 |             location.replace('#' + el.id)
104 |             // this will cause the :target to be activated.
105 |         });
106 |     }
107 | }
108 | 
109 | // We look for all the internal links in the documents and attach the smoothscroll function
110 | document.addEventListener("DOMContentLoaded", function () {
111 |     var internal = document.querySelectorAll('a[href^="#"]:not([href="#"])'), a;
112 |     for(var i=internal.length; a=internal[--i];){
113 |         a.addEventListener("click", linkHandler, false);
114 |     }
115 | });
116 | 
117 | // return smoothscroll API
118 | return smoothScroll;
119 | 
120 | });
121 | 


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


--------------------------------------------------------------------------------