- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Sun, 24 Jul 2011 21:32:09 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/selectors4
In directory hutz:/tmp/cvs-serv31059
Modified Files:
Overview.html Overview.src.html
Log Message:
more headings
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/selectors4/Overview.html,v
retrieving revision 1.29
retrieving revision 1.30
diff -u -d -r1.29 -r1.30
--- Overview.html 21 Jul 2011 00:28:23 -0000 1.29
+++ Overview.html 24 Jul 2011 21:32:07 -0000 1.30
@@ -15,13 +15,13 @@
<h1 id=title>Selectors Level 4</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 21 July 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 24 July 2011</h2>
<dl>
<dt>This version:
- <dd> <!-- <a href="http://www.w3.org/TR/2011/ED-selectors4-20110721/">
- http://www.w3.org/TR/2011/WD-selectors4-20110721</a> -->
+ <dd> <!-- <a href="http://www.w3.org/TR/2011/ED-selectors4-20110724/">
+ http://www.w3.org/TR/2011/WD-selectors4-20110724</a> -->
<a href="http://dev.w3.org/csswg/selectors4">
http://dev.w3.org/csswg/selectors4</a>
@@ -215,8 +215,8 @@
selectors</a>
</ul>
- <li><a href="#dynamic-pseudos"><span class=secno>7. </span> Dynamic
- pseudo-classes</a>
+ <li><a href="#location"><span class=secno>7. </span> Location
+ Pseudo-classes</a>
<ul class=toc>
<li><a href="#link"><span class=secno>7.1. </span> The link history
pseudo-classes: :link and :visited</a>
@@ -224,150 +224,164 @@
<li><a href="#here-pseudo"><span class=secno>7.2. </span> The link
location pseudo-class :links-here</a>
- <li><a href="#scope-pseudo"><span class=secno>7.3. </span> The scope
+ <li><a href="#target-pseudo"><span class=secno>7.3. </span> The target
+ pseudo-class :target</a>
+
+ <li><a href="#scope-pseudo"><span class=secno>7.4. </span> The scope
pseudo-class :scope</a>
+ </ul>
- <li><a href="#target-pseudo"><span class=secno>7.4. </span> The target
- pseudo-class :target</a>
+ <li><a href="#useraction-pseudos"><span class=secno>8. </span> User Action
+ Pseudo-classes</a>
+ <ul class=toc>
+ <li><a href="#hover-pseudo"><span class=secno>8.1. </span> The pointer
+ hover pseudo-class :hover</a>
- <li><a href="#useraction-pseudos"><span class=secno>7.5. </span> The
- user action pseudo-classes :hover, :active, and :focus</a>
+ <li><a href="#active-pseudo"><span class=secno>8.2. </span> The
+ activation pseudo-class :active</a>
- <li><a href="#current-pseudo"><span class=secno>7.6. </span> The
+ <li><a href="#active-pseudo"><span class=secno>8.3. </span> The input
+ focus pseudo-class :focus</a>
+ </ul>
+
+ <li><a href="#time-pseudo"><span class=secno>9. </span> Time-linear
+ Presentation Pseudo-classes</a>
+ <ul class=toc>
+ <li><a href="#current-pseudo"><span class=secno>9.1. </span> The
currently-playing pseudo-class <code>:current</code></a>
</ul>
- <li><a href="#linguistic-pseudos"><span class=secno>8. </span> Linguistic
+ <li><a href="#linguistic-pseudos"><span class=secno>10. </span> Linguistic
Pseudo-classes</a>
<ul class=toc>
- <li><a href="#dir-pseudo"><span class=secno>8.1. </span> The
+ <li><a href="#dir-pseudo"><span class=secno>10.1. </span> The
directionality pseudo-class <code>:dir()</code></a>
- <li><a href="#lang-pseudo"><span class=secno>8.2. </span> The language
+ <li><a href="#lang-pseudo"><span class=secno>10.2. </span> The language
pseudo-class <code>:lang</code></a>
</ul>
- <li><a href="#UIstates"><span class=secno>9. </span> The UI states
+ <li><a href="#UIstates"><span class=secno>11. </span> The UI states
pseudo-classes</a>
<ul class=toc>
- <li><a href="#enableddisabled"><span class=secno>9.1. </span> The
+ <li><a href="#enableddisabled"><span class=secno>11.1. </span> The
:enabled and :disabled pseudo-classes</a>
- <li><a href="#checked"><span class=secno>9.2. </span> The :checked
+ <li><a href="#checked"><span class=secno>11.2. </span> The :checked
pseudo-class</a>
- <li><a href="#indeterminate"><span class=secno>9.3. </span> The
+ <li><a href="#indeterminate"><span class=secno>11.3. </span> The
:indeterminate pseudo-class</a>
</ul>
- <li><a href="#structural-pseudos"><span class=secno>10. </span>
+ <li><a href="#structural-pseudos"><span class=secno>12. </span>
Tree-Structural pseudo-classes</a>
<ul class=toc>
- <li><a href="#root-pseudo"><span class=secno>10.1. </span> :root
+ <li><a href="#root-pseudo"><span class=secno>12.1. </span> :root
pseudo-class</a>
- <li><a href="#nth-child-pseudo"><span class=secno>10.2. </span>
+ <li><a href="#nth-child-pseudo"><span class=secno>12.2. </span>
:nth-child() pseudo-class</a>
- <li><a href="#nth-last-child-pseudo"><span class=secno>10.3. </span>
+ <li><a href="#nth-last-child-pseudo"><span class=secno>12.3. </span>
:nth-last-child() pseudo-class</a>
- <li><a href="#nth-of-type-pseudo"><span class=secno>10.4. </span>
+ <li><a href="#nth-of-type-pseudo"><span class=secno>12.4. </span>
:nth-of-type() pseudo-class</a>
- <li><a href="#nth-last-of-type-pseudo"><span class=secno>10.5. </span>
+ <li><a href="#nth-last-of-type-pseudo"><span class=secno>12.5. </span>
:nth-last-of-type() pseudo-class</a>
- <li><a href="#nth-match"><span class=secno>10.6. </span> :nth-match()
+ <li><a href="#nth-match"><span class=secno>12.6. </span> :nth-match()
pseudo-class</a>
- <li><a href="#nth-last-match"><span class=secno>10.7. </span>
+ <li><a href="#nth-last-match"><span class=secno>12.7. </span>
:nth-last-match() pseudo-class</a>
- <li><a href="#first-child-pseudo"><span class=secno>10.8. </span>
+ <li><a href="#first-child-pseudo"><span class=secno>12.8. </span>
:first-child pseudo-class</a>
- <li><a href="#last-child-pseudo"><span class=secno>10.9. </span>
+ <li><a href="#last-child-pseudo"><span class=secno>12.9. </span>
:last-child pseudo-class</a>
- <li><a href="#first-of-type-pseudo"><span class=secno>10.10. </span>
+ <li><a href="#first-of-type-pseudo"><span class=secno>12.10. </span>
:first-of-type pseudo-class</a>
- <li><a href="#last-of-type-pseudo"><span class=secno>10.11. </span>
+ <li><a href="#last-of-type-pseudo"><span class=secno>12.11. </span>
:last-of-type pseudo-class</a>
- <li><a href="#only-child-pseudo"><span class=secno>10.12. </span>
+ <li><a href="#only-child-pseudo"><span class=secno>12.12. </span>
:only-child pseudo-class</a>
- <li><a href="#only-of-type-pseudo"><span class=secno>10.13. </span>
+ <li><a href="#only-of-type-pseudo"><span class=secno>12.13. </span>
:only-of-type pseudo-class</a>
- <li><a href="#empty-pseudo"><span class=secno>10.14. </span> :empty
+ <li><a href="#empty-pseudo"><span class=secno>12.14. </span> :empty
pseudo-class</a>
</ul>
- <li><a href="#table-pseudos"><span class=secno>11. </span> Grid-Structural
+ <li><a href="#table-pseudos"><span class=secno>13. </span> Grid-Structural
Selectors</a>
<ul class=toc>
- <li><a href="#nth-column-pseudo"><span class=secno>11.1. </span>
+ <li><a href="#nth-column-pseudo"><span class=secno>13.1. </span>
:nth-column() pseudo-class</a>
- <li><a href="#nth-last-column-pseudo"><span class=secno>11.2. </span>
+ <li><a href="#nth-last-column-pseudo"><span class=secno>13.2. </span>
:nth-last-column() pseudo-class</a>
- <li><a href="#column-pseudo"><span class=secno>11.3. </span> :column()
+ <li><a href="#column-pseudo"><span class=secno>13.3. </span> :column()
pseudo-class</a>
</ul>
- <li><a href="#combinators"><span class=secno>12. </span> Combinators</a>
+ <li><a href="#combinators"><span class=secno>14. </span> Combinators</a>
<ul class=toc>
- <li><a href="#descendant-combinators"><span class=secno>12.1. </span>
+ <li><a href="#descendant-combinators"><span class=secno>14.1. </span>
Descendant combinator</a>
- <li><a href="#child-combinators"><span class=secno>12.2. </span> Child
+ <li><a href="#child-combinators"><span class=secno>14.2. </span> Child
combinators</a>
- <li><a href="#adjacent-sibling-combinators"><span class=secno>12.3.
+ <li><a href="#adjacent-sibling-combinators"><span class=secno>14.3.
</span> Adjacent sibling combinator</a>
- <li><a href="#general-sibling-combinators"><span class=secno>12.4.
+ <li><a href="#general-sibling-combinators"><span class=secno>14.4.
</span> General sibling combinator</a>
- <li><a href="#idref-combinator"><span class=secno>12.5. </span>
+ <li><a href="#idref-combinator"><span class=secno>14.5. </span>
Reference combinators</a>
</ul>
- <li><a href="#formal-syntax"><span class=secno>13. </span> Formal
+ <li><a href="#formal-syntax"><span class=secno>15. </span> Formal
Syntax</a>
<ul class=toc>
- <li><a href="#grammar"><span class=secno>13.1. </span> Grammar</a>
+ <li><a href="#grammar"><span class=secno>15.1. </span> Grammar</a>
- <li><a href="#lex"><span class=secno>13.2. </span> Lexical scanner</a>
+ <li><a href="#lex"><span class=secno>15.2. </span> Lexical scanner</a>
</ul>
- <li><a href="#profiling"><span class=secno>14. </span>Profiles</a>
+ <li><a href="#profiling"><span class=secno>16. </span>Profiles</a>
- <li><a href="#conformance"><span class=secno>15. </span> Conformance</a>
+ <li><a href="#conformance"><span class=secno>17. </span> Conformance</a>
<ul class=toc>
- <li><a href="#conformance-classes"><span class=secno>15.1. </span>
+ <li><a href="#conformance-classes"><span class=secno>17.1. </span>
Conformance Classes</a>
- <li><a href="#partial"><span class=secno>15.2. </span> Partial
+ <li><a href="#partial"><span class=secno>17.2. </span> Partial
Implementations</a>
- <li><a href="#experimental"><span class=secno>15.3. </span> Experimental
+ <li><a href="#experimental"><span class=secno>17.3. </span> Experimental
Implementations</a>
</ul>
- <li><a href="#acknowledgements"><span class=secno>16. </span>
+ <li><a href="#acknowledgements"><span class=secno>18. </span>
Acknowledgements</a>
- <li><a href="#references"><span class=secno>17. </span> References</a>
+ <li><a href="#references"><span class=secno>19. </span> References</a>
<ul class=toc>
- <li><a href="#normative-references"><span class=secno>17.1. </span>
+ <li><a href="#normative-references"><span class=secno>19.1. </span>
Normative References</a>
- <li><a href="#informative-references"><span class=secno>17.2. </span>
+ <li><a href="#informative-references"><span class=secno>19.2. </span>
Informative References</a>
</ul>
</ul>
@@ -915,6 +929,13 @@
can acquire or lose a pseudo-class while a user interacts with the
document.
+ <p>Dynamic pseudo-classes classify elements on characteristics other than
+ their name, attributes, or content, in principle characteristics that
+ cannot be deduced from the document tree.
+
+ <p>Dynamic pseudo-classes do not appear in the document source or document
+ tree.
+
<h3 id=case-sensitive><span class=secno>3.4. </span> Characters and case
sensitivity</h3>
@@ -1662,14 +1683,7 @@
could be reached using mixtures of xml:id, DOM3 Core, XML DTDs, and
namespace-specific knowledge.
- <h2 id=dynamic-pseudos><span class=secno>7. </span> Dynamic pseudo-classes</h2>
-
- <p>Dynamic pseudo-classes classify elements on characteristics other than
- their name, attributes, or content, in principle characteristics that
- cannot be deduced from the document tree.
-
- <p>Dynamic pseudo-classes do not appear in the document source or document
- tree.
+ <h2 id=location><span class=secno>7. </span> Location Pseudo-classes</h2>
<h3 id=link><span class=secno>7.1. </span> The link history pseudo-classes:
:link and :visited</h3>
@@ -1800,22 +1814,7 @@
<pre>:not(:links-here(0)) { text-decoration-style: dashed; }</pre>
</div>
- <h3 id=scope-pseudo><span class=secno>7.3. </span> The scope pseudo-class
- :scope</h3>
-
- <p>The <code>:scope</code> pseudo-class represents any element that is in
- the <a href="#contextual-reference-element-set"><i>contextual reference
- element set</i></a>. If no contextual reference element set is given,
- <code>:scope</code> is equivalent to <code>:root</code>.
-
- <p>The <dfn id=contextual-reference-element-set>contextual reference
- element set</dfn> is a (potentially empty) explicitly-specified set of
- elements, such as that specified by the <code>querySelector()</code> call
- in [[SELECT-API2]]. Specifications intending for this pseudo-class to
- match specific elements rather than the document's root element must
- define a contextual reference element set.
-
- <h3 id=target-pseudo><span class=secno>7.4. </span> The target pseudo-class
+ <h3 id=target-pseudo><span class=secno>7.3. </span> The target pseudo-class
:target</h3>
<p>Some URIs refer to a location within a resource. This kind of URI ends
@@ -1851,54 +1850,31 @@
*:target::before { content : url(target.png) }</pre>
</div>
- <h3 id=useraction-pseudos><span class=secno>7.5. </span> The user action
- pseudo-classes :hover, :active, and :focus</h3>
-
- <p>Interactive user agents sometimes change the rendering in response to
- user actions. Selectors provides three pseudo-classes for the selection of
- an element the user is acting on.
+ <h3 id=scope-pseudo><span class=secno>7.4. </span> The scope pseudo-class
+ :scope</h3>
- <ul>
- <li>The <code>:hover</code> pseudo-class applies while the user designates
- an element with a pointing device, but does not necessarily activate it.
- For example, a visual user agent could apply this pseudo-class when the
- cursor (mouse pointer) hovers over a box generated by the element. User
- agents not that do not support <a
- href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">interactive
- media</a> do not have to support this pseudo-class. Some conforming user
- agents that support <a
- href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">interactive
- media</a> may not be able to support this pseudo-class (e.g., a pen
- device that does not detect hovering).
+ <p>The <code>:scope</code> pseudo-class represents any element that is in
+ the <a href="#contextual-reference-element-set"><i>contextual reference
+ element set</i></a>. If no contextual reference element set is given,
+ <code>:scope</code> is equivalent to <code>:root</code>.
- <li>The <code>:active</code> pseudo-class applies while an element is
- being activated by the user. For example, between the times the user
- presses the mouse button and releases it. On systems with more than one
- mouse button, <code>:active</code> applies only to the primary or primary
- activation button (typically the "left" mouse button), and any aliases
- thereof.
+ <p>The <dfn id=contextual-reference-element-set>contextual reference
+ element set</dfn> is a (potentially empty) explicitly-specified set of
+ elements, such as that specified by the <code>querySelector()</code> call
+ in [[SELECT-API2]]. Specifications intending for this pseudo-class to
+ match specific elements rather than the document's root element must
+ define a contextual reference element set.
- <li>The <code>:focus</code> pseudo-class applies while an element has the
- focus (accepts keyboard or mouse events, or other forms of input).
- </ul>
+ <h2 id=useraction-pseudos><span class=secno>8. </span> User Action
+ Pseudo-classes</h2>
- <p>There may be document language or implementation specific limits on
- which elements can become <code>:active</code> or acquire
- <code>:focus</code>.
+ <p>Interactive user agents sometimes change the rendering in response to
+ user actions. Selectors provides three pseudo-classes for the selection of
+ an element the user is acting on.
<p>These pseudo-classes are not mutually exclusive. An element may match
several pseudo-classes at the same time.
- <p>Selectors doesn't define if the parent of an element that is
- ‘<code class=css>:active</code>’ or ‘<code
- class=css>:hover</code>’ is also in that state.
-
- <p class=note><strong>Note:</strong> If the ‘<code
- class=css>:hover</code>’ state applies to an element because its
- child is designated by a pointing device, then it's possible for
- ‘<code class=css>:hover</code>’ to apply to an element that is
- not underneath the pointing device.
-
<div class=example>
<p>Examples:</p>
@@ -1916,13 +1892,64 @@
pseudo-class :focus and in the pseudo-class :hover.</p>
</div>
+ <h3 id=hover-pseudo><span class=secno>8.1. </span> The pointer hover
+ pseudo-class :hover</h3>
+
+ <p>The <code>:hover</code> pseudo-class applies while the user designates
+ an element with a pointing device, but does not necessarily activate it.
+ For example, a visual user agent could apply this pseudo-class when the
+ cursor (mouse pointer) hovers over a box generated by the element. User
+ agents not that do not support <a
+ href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">interactive
+ media</a> do not have to support this pseudo-class. Some conforming user
+ agents that support <a
+ href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">interactive
+ media</a> may not be able to support this pseudo-class (e.g., a pen device
+ that does not detect hovering).
+
+ <p>The parent of an element that is <code>:hover</code> is also in that
+ state.
+
+ <p class=note><strong>Note:</strong> Since the ‘<code
+ class=css>:hover</code>’ state can apply to an element because its
+ child is designated by a pointing device, then it is possible for
+ ‘<code class=css>:hover</code>’ to apply to an element that is
+ not underneath the pointing device.
+
+ <h3 id=active-pseudo><span class=secno>8.2. </span> The activation
+ pseudo-class :active</h3>
+
+ <p>The <code>:active</code> pseudo-class applies while an element is being
+ activated by the user. For example, between the times the user presses the
+ mouse button and releases it. On systems with more than one mouse button,
+ <code>:active</code> applies only to the primary or primary activation
+ button (typically the "left" mouse button), and any aliases thereof.
+
+ <p>There may be document language or implementation specific limits on
+ which elements can become <code>:active</code>.
+
+ <p>Selectors doesn't define if the parent of an element that is
+ ‘<code class=css>:active</code>’ is also in that state.
+
<p class=note><strong>Note:</strong> An element can be both ‘<code
class=css>:visited</code>’ and ‘<code
class=css>:active</code>’ (or ‘<code
class=css>:link</code>’ and ‘<code
class=css>:active</code>’).
- <h3 id=current-pseudo><span class=secno>7.6. </span> The currently-playing
+ <h3 id=active-pseudo><span class=secno>8.3. </span> The input focus
+ pseudo-class :focus</h3>
+
+ <p>The <code>:focus</code> pseudo-class applies while an element has the
+ focus (accepts keyboard or mouse events, or other forms of input).
+
+ <p>There may be document language or implementation specific limits on
+ which elements can acquire <code>:focus</code>.
+
+ <h2 id=time-pseudo><span class=secno>9. </span> Time-linear Presentation
+ Pseudo-classes</h2>
+
+ <h3 id=current-pseudo><span class=secno>9.1. </span> The currently-playing
pseudo-class <code>:current</code></h3>
<p>The <code>:current</code> pseudo-class represents the innermost element,
@@ -1945,10 +1972,10 @@
<!-- -->}</pre>
</div>
- <h2 id=linguistic-pseudos><span class=secno>8. </span> Linguistic
+ <h2 id=linguistic-pseudos><span class=secno>10. </span> Linguistic
Pseudo-classes</h2>
- <h3 id=dir-pseudo><span class=secno>8.1. </span> The directionality
+ <h3 id=dir-pseudo><span class=secno>10.1. </span> The directionality
pseudo-class <code>:dir()</code></h3>
<p>The <code>:dir()</code> pseudo-class allows the author to write
@@ -1986,8 +2013,8 @@
directionality of the elements as determined by its contents. <a
href="#HTML5" rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>
- <h3 id=lang-pseudo><span class=secno>8.2. </span> The language pseudo-class
- <code>:lang</code></h3>
+ <h3 id=lang-pseudo><span class=secno>10.2. </span> The language
+ pseudo-class <code>:lang</code></h3>
<p>If the document language specifies how the human language of an element
is determined, it is possible to write selectors that represent an element
@@ -2052,9 +2079,9 @@
</body></pre>
</div>
- <h2 id=UIstates><span class=secno>9. </span> The UI states pseudo-classes</h2>
+ <h2 id=UIstates><span class=secno>11. </span> The UI states pseudo-classes</h2>
- <h3 id=enableddisabled><span class=secno>9.1. </span> The :enabled and
+ <h3 id=enableddisabled><span class=secno>11.1. </span> The :enabled and
:disabled pseudo-classes</h3>
<p>The <code>:enabled</code> pseudo-class represents user interface
@@ -2075,7 +2102,7 @@
e.g., the <code>display</code> and <code>visibility</code> properties have
no effect on the enabled/disabled state of an element.
- <h3 id=checked><span class=secno>9.2. </span> The :checked pseudo-class</h3>
+ <h3 id=checked><span class=secno>11.2. </span> The :checked pseudo-class</h3>
<p>Radio and checkbox elements can be toggled by the user. Some menu items
are "checked" when the user selects them. When such elements are toggled
@@ -2098,7 +2125,7 @@
<pre>:not(:checked)</pre>
</div>
- <h3 id=indeterminate><span class=secno>9.3. </span> The :indeterminate
+ <h3 id=indeterminate><span class=secno>11.3. </span> The :indeterminate
pseudo-class</h3>
<p>The <code>:indeterminate</code> pseudo-class applies to UI elements
@@ -2112,7 +2139,7 @@
all media. Components of a radio-group initialized with no pre-selected
choice, for example, would be :indeterminate even in a static display.
- <h2 id=structural-pseudos><span class=secno>10. </span> Tree-Structural
+ <h2 id=structural-pseudos><span class=secno>12. </span> Tree-Structural
pseudo-classes</h2>
<p>Selectors introduces the concept of <dfn
@@ -2125,13 +2152,13 @@
parent. When calculating the position of an element in the list of
children of its parent, the index numbering starts at 1.
- <h3 id=root-pseudo><span class=secno>10.1. </span> :root pseudo-class</h3>
+ <h3 id=root-pseudo><span class=secno>12.1. </span> :root pseudo-class</h3>
<p>The <code>:root</code> pseudo-class represents an element that is the
root of the document. In HTML 4, this is always the <code>HTML</code>
element.
- <h3 id=nth-child-pseudo><span class=secno>10.2. </span> :nth-child()
+ <h3 id=nth-child-pseudo><span class=secno>12.2. </span> :nth-child()
pseudo-class</h3>
<p>The <code>:nth-child(<var>a</var><code>n</code>+<var>b</var>)</code>
@@ -2268,7 +2295,7 @@
<pre>html|tr:nth-child(-n+6) /* represents the 6 first rows of XHTML tables */</pre>
</div>
- <h3 id=nth-last-child-pseudo><span class=secno>10.3. </span>
+ <h3 id=nth-last-child-pseudo><span class=secno>12.3. </span>
:nth-last-child() pseudo-class</h3>
<p>The <code>:nth-last-child(<var>a</var>n+<var>b</var>)</code>
@@ -2290,7 +2317,7 @@
counting from the last one */</pre>
</div>
- <h3 id=nth-of-type-pseudo><span class=secno>10.4. </span> :nth-of-type()
+ <h3 id=nth-of-type-pseudo><span class=secno>12.4. </span> :nth-of-type()
pseudo-class</h3>
<p>The <code>:nth-of-type(<var>a</var>n+<var>b</var>)</code> pseudo-class
@@ -2312,7 +2339,7 @@
img:nth-of-type(2n) { float: left; }</pre>
</div>
- <h3 id=nth-last-of-type-pseudo><span class=secno>10.5. </span>
+ <h3 id=nth-last-of-type-pseudo><span class=secno>12.5. </span>
:nth-last-of-type() pseudo-class</h3>
<p>The <code>:nth-last-of-type(<var>a</var>n+<var>b</var>)</code>
@@ -2339,7 +2366,7 @@
<pre>body > h2:not(:first-of-type):not(:last-of-type)</pre>
</div>
- <h3 id=nth-match><span class=secno>10.6. </span> :nth-match() pseudo-class</h3>
+ <h3 id=nth-match><span class=secno>12.6. </span> :nth-match() pseudo-class</h3>
<p><code>:nth-match(<a href="#selector"><var>selector</var></a>,
<var>a</var>n+<var>b</var>)</code> pseudo-class notation represents an
@@ -2355,7 +2382,7 @@
class=css><code>odd</code></code>’ keywords.
<!-- define <selector>. Split an+b into a similar <notation> -->
- <h3 id=nth-last-match><span class=secno>10.7. </span> :nth-last-match()
+ <h3 id=nth-last-match><span class=secno>12.7. </span> :nth-last-match()
pseudo-class</h3>
<p><code>:nth-match(<a href="#selector"><var>selector</var></a>,
@@ -2371,7 +2398,7 @@
class=css><code>even</code></code>’ and ‘<code
class=css><code>odd</code></code>’ keywords.
- <h3 id=first-child-pseudo><span class=secno>10.8. </span> :first-child
+ <h3 id=first-child-pseudo><span class=secno>12.8. </span> :first-child
pseudo-class</h3>
<p>Same as <code>:nth-child(1)</code>. The <code>:first-child</code>
@@ -2406,7 +2433,7 @@
a:first-child /* Same (assuming a is not the root element) */</pre>
</div>
- <h3 id=last-child-pseudo><span class=secno>10.9. </span> :last-child
+ <h3 id=last-child-pseudo><span class=secno>12.9. </span> :last-child
pseudo-class</h3>
<p>Same as <code>:nth-last-child(1)</code>. The <code>:last-child</code>
@@ -2422,7 +2449,7 @@
<pre>ol > li:last-child</pre>
</div>
- <h3 id=first-of-type-pseudo><span class=secno>10.10. </span> :first-of-type
+ <h3 id=first-of-type-pseudo><span class=secno>12.10. </span> :first-of-type
pseudo-class</h3>
<p>Same as <code>:nth-of-type(1)</code>. The <code>:first-of-type</code>
@@ -2454,7 +2481,7 @@
</dl></pre>
</div>
- <h3 id=last-of-type-pseudo><span class=secno>10.11. </span> :last-of-type
+ <h3 id=last-of-type-pseudo><span class=secno>12.11. </span> :last-of-type
pseudo-class</h3>
<p>Same as <code>:nth-last-of-type(1)</code>. The
@@ -2470,7 +2497,7 @@
<pre>tr > td:last-of-type</pre>
</div>
- <h3 id=only-child-pseudo><span class=secno>10.12. </span> :only-child
+ <h3 id=only-child-pseudo><span class=secno>12.12. </span> :only-child
pseudo-class</h3>
<p>Represents an element that has a parent element and whose parent element
@@ -2479,7 +2506,7 @@
<code>:nth-child(1):nth-last-child(1)</code>, but with a lower
specificity.
- <h3 id=only-of-type-pseudo><span class=secno>10.13. </span> :only-of-type
+ <h3 id=only-of-type-pseudo><span class=secno>12.13. </span> :only-of-type
pseudo-class</h3>
<p>Represents an element that has a parent element and whose parent element
@@ -2488,7 +2515,7 @@
<code>:nth-of-type(1):nth-last-of-type(1)</code>, but with a lower
specificity.
- <h3 id=empty-pseudo><span class=secno>10.14. </span> :empty pseudo-class</h3>
+ <h3 id=empty-pseudo><span class=secno>12.14. </span> :empty pseudo-class</h3>
<p>The <code>:empty</code> pseudo-class represents an element that has no
children at all. In terms of the document tree, only element nodes and
@@ -2517,7 +2544,7 @@
<pre><foo>this is not <bar>:empty</bar></foo></pre>
</div>
- <h2 id=table-pseudos><span class=secno>11. </span> Grid-Structural
+ <h2 id=table-pseudos><span class=secno>13. </span> Grid-Structural
Selectors</h2>
<p>The double-association of a cell in a 2D grid (to its row and column)
@@ -2531,7 +2558,7 @@
<code>:column()</code> are defined. In a column-primary format, these
pseudo-classes would match against row associations instead.
- <h3 id=nth-column-pseudo><span class=secno>11.1. </span> :nth-column()
+ <h3 id=nth-column-pseudo><span class=secno>13.1. </span> :nth-column()
pseudo-class</h3>
<p>The <code>:nth-column(<var>a</var>n+<var>b</var>)</code> pseudo-class
@@ -2548,7 +2575,7 @@
‘<code class=css><code>even</code></code>’ and ‘<code
class=css><code>odd</code></code>’ values as arguments.
- <h3 id=nth-last-column-pseudo><span class=secno>11.2. </span>
+ <h3 id=nth-last-column-pseudo><span class=secno>13.2. </span>
:nth-last-column() pseudo-class</h3>
<p>The <code>:nth-column(<var>a</var>n+<var>b</var>)</code> pseudo-class
@@ -2565,7 +2592,7 @@
‘<code class=css><code>even</code></code>’ and ‘<code
class=css><code>odd</code></code>’ values as arguments.
- <h3 id=column-pseudo><span class=secno>11.3. </span> :column() pseudo-class</h3>
+ <h3 id=column-pseudo><span class=secno>13.3. </span> :column() pseudo-class</h3>
<p>The <code>:column(<a href="#selector"><var>selector</var></a>)</code>
pseudo-class notation represents a cell element belonging to a column that
@@ -2590,9 +2617,9 @@
<!-- --></table></pre>
</div>
- <h2 id=combinators><span class=secno>12. </span> Combinators</h2>
+ <h2 id=combinators><span class=secno>14. </span> Combinators</h2>
- <h3 id=descendant-combinators><span class=secno>12.1. </span> Descendant
+ <h3 id=descendant-combinators><span class=secno>14.1. </span> Descendant
combinator</h3>
<p>At times, authors may want selectors to describe an element that is the
@@ -2637,7 +2664,7 @@
<pre>div p *[href]</pre>
</div>
- <h3 id=child-combinators><span class=secno>12.2. </span> Child combinators</h3>
+ <h3 id=child-combinators><span class=secno>14.2. </span> Child combinators</h3>
<p>A <dfn id=child-combinator>child combinator</dfn> describes a childhood
relationship between two elements. A child combinator is made of the
@@ -2668,7 +2695,7 @@
the section on the <code><a
href="#structural-pseudos">:first-child</a></code> pseudo-class above.
- <h3 id=adjacent-sibling-combinators><span class=secno>12.3. </span>
+ <h3 id=adjacent-sibling-combinators><span class=secno>14.3. </span>
Adjacent sibling combinator</h3>
<p>The adjacent sibling combinator is made of the "plus sign"
@@ -2695,7 +2722,7 @@
<pre>h1.opener + h2</pre>
</div>
- <h3 id=general-sibling-combinators><span class=secno>12.4. </span> General
+ <h3 id=general-sibling-combinators><span class=secno>14.4. </span> General
sibling combinator</h3>
<p>The general sibling combinator is made of the "tilde" (U+007E,
@@ -2718,7 +2745,7 @@
<pre>function a(x) = 12x/13.5</pre></pre>
</div>
- <h3 id=idref-combinator><span class=secno>12.5. </span> Reference
+ <h3 id=idref-combinator><span class=secno>14.5. </span> Reference
combinators</h3>
<p>The IDREF combinator consists of two slashes with an indetervening <a
@@ -2782,9 +2809,9 @@
specified in an HTML <code>style</code> attribute is described in CSS 2.1.
<a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
- <h2 id=formal-syntax><span class=secno>13. </span> Formal Syntax</h2>
+ <h2 id=formal-syntax><span class=secno>15. </span> Formal Syntax</h2>
- <h3 id=grammar><span class=secno>13.1. </span> Grammar</h3>
+ <h3 id=grammar><span class=secno>15.1. </span> Grammar</h3>
<p>The grammar below defines the syntax of Selectors. It is globally LL(1)
and can be locally LL(2) (but note that most UAs should not use it
@@ -2883,7 +2910,7 @@
: type_selector | universal | HASH | class | attrib | pseudo
;</pre>
- <h3 id=lex><span class=secno>13.2. </span> Lexical scanner</h3>
+ <h3 id=lex><span class=secno>15.2. </span> Lexical scanner</h3>
<p>The following is the <a name=x3>tokenizer</a>, written in Flex (see <a
href="#FLEX" rel=biblioentry>[FLEX]<!--{{!FLEX}}--></a>) notation. The
@@ -2951,7 +2978,7 @@
. return *yytext;</pre>
- <h2 id=profiling><span class=secno>14. </span>Profiles</h2>
+ <h2 id=profiling><span class=secno>16. </span>Profiles</h2>
<p>Each specification using Selectors must define the subset of Selectors
it allows and excludes, and describe the local meaning of all the
@@ -3112,9 +3139,9 @@
</ol>
</div>
- <h2 id=conformance><span class=secno>15. </span> Conformance</h2>
+ <h2 id=conformance><span class=secno>17. </span> Conformance</h2>
- <h3 id=conformance-classes><span class=secno>15.1. </span> Conformance
+ <h3 id=conformance-classes><span class=secno>17.1. </span> Conformance
Classes</h3>
<p>Conformance to Selectors Level 4 is defined for three conformance
@@ -3160,7 +3187,7 @@
errors. (In the case of CSS, the entire rule in which the selector is used
is dropped.)
- <h3 id=partial><span class=secno>15.2. </span> Partial Implementations</h3>
+ <h3 id=partial><span class=secno>17.2. </span> Partial Implementations</h3>
<p>So that authors can exploit the forward-compatible parsing rules to
assign fallback values, CSS renderers <strong>must</strong> treat as
@@ -3169,7 +3196,7 @@
appropriate</a>) any at-rules, properties, property values, keywords, and
other syntactic constructs for which they have no usable level of support.
- <h3 id=experimental><span class=secno>15.3. </span> Experimental
+ <h3 id=experimental><span class=secno>17.3. </span> Experimental
Implementations</h3>
<p>To avoid clashes with future Selectors features, the Selectors
@@ -3192,7 +3219,7 @@
and does not cover all possible combined cases of Selectors.</p>
-->
- <h2 id=acknowledgements><span class=secno>16. </span> Acknowledgements</h2>
+ <h2 id=acknowledgements><span class=secno>18. </span> Acknowledgements</h2>
<p>The CSS working group would like to thank everyone who contributed to
the <a href="http://www.w3.org/TR/css3-selectors">previous Selectors</a>
@@ -3203,9 +3230,9 @@
the following for their specific contributions to Selectors Level 4: L.
David Baron Andrew Fedoniouk Ian Hickson Grey Hodge Jason Cranford Teague
- <h2 id=references><span class=secno>17. </span> References</h2>
+ <h2 id=references><span class=secno>19. </span> References</h2>
- <h3 id=normative-references><span class=secno>17.1. </span> Normative
+ <h3 id=normative-references><span class=secno>19.1. </span> Normative
References</h3>
<!--begin-normative-->
<!-- Sorted by label -->
@@ -3268,7 +3295,7 @@
</dl>
<!--end-normative-->
- <h3 id=informative-references><span class=secno>17.2. </span> Informative
+ <h3 id=informative-references><span class=secno>19.2. </span> Informative
References</h3>
<!--begin-informative-->
<!-- Sorted by label -->
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/selectors4/Overview.src.html,v
retrieving revision 1.31
retrieving revision 1.32
diff -u -d -r1.31 -r1.32
--- Overview.src.html 21 Jul 2011 00:28:23 -0000 1.31
+++ Overview.src.html 24 Jul 2011 21:32:07 -0000 1.32
@@ -509,6 +509,14 @@
can acquire or lose a pseudo-class while a user interacts with the
document.</p>
+ <p>Dynamic pseudo-classes classify elements on characteristics other
+ than their name, attributes, or content, in principle characteristics
+ that cannot be deduced from the document tree.</p>
+
+ <p>Dynamic pseudo-classes do not appear in the document source or
+ document tree.</p>
+
+
<h3 id=case-sensitive>
Characters and case sensitivity</h3>
@@ -1197,16 +1205,8 @@
selector. Such a situation could be reached using mixtures of xml:id,
DOM3 Core, XML DTDs, and namespace-specific knowledge.</p>
-<h2 id=dynamic-pseudos>
-Dynamic pseudo-classes</h2>
-
- <p>Dynamic pseudo-classes classify elements on characteristics other
- than their name, attributes, or content, in principle characteristics
- that cannot be deduced from the document tree.</p>
-
- <p>Dynamic pseudo-classes do not appear in the document source or
- document tree.</p>
-
+<h2 id=location>
+Location Pseudo-classes</h2>
<h3 id=link>
The link history pseudo-classes: :link and :visited</h3>
@@ -1319,20 +1319,6 @@
<pre>:not(:links-here(0)) { text-decoration-style: dashed; }</pre>
</div>
-<h3 id=scope-pseudo>
-The scope pseudo-class :scope</h3>
-
- <p>The <code>:scope</code> pseudo-class represents any element that is in
- the <i>contextual reference element set</i>. If no contextual reference
- element set is given, <code>:scope</code> is equivalent to <code>:root</code>.
-
- <p>The <dfn>contextual reference element set</dfn> is a (potentially empty)
- explicitly-specified set of elements, such as that specified by the
- <code>querySelector()</code> call in [[SELECT-API2]].
- Specifications intending for this pseudo-class to match specific elements
- rather than the document's root element must define a contextual reference
- element set.
-
<h3 id=target-pseudo>
The target pseudo-class :target</h3>
@@ -1367,16 +1353,48 @@
*:target::before { content : url(target.png) }</pre>
</div>
-<h3 id=useraction-pseudos>
-The user action pseudo-classes :hover, :active, and :focus</h3>
+
+<h3 id=scope-pseudo>
+The scope pseudo-class :scope</h3>
+
+ <p>The <code>:scope</code> pseudo-class represents any element that is in
+ the <i>contextual reference element set</i>. If no contextual reference
+ element set is given, <code>:scope</code> is equivalent to <code>:root</code>.
+
+ <p>The <dfn>contextual reference element set</dfn> is a (potentially empty)
+ explicitly-specified set of elements, such as that specified by the
+ <code>querySelector()</code> call in [[SELECT-API2]].
+ Specifications intending for this pseudo-class to match specific elements
+ rather than the document's root element must define a contextual reference
+ element set.
+
+<h2 id=useraction-pseudos>
+User Action Pseudo-classes</h2>
<p>Interactive user agents sometimes change the rendering in response
to user actions. Selectors provides three pseudo-classes for the
selection of an element the user is acting on.</p>
- <ul>
+ <p>These pseudo-classes are not mutually exclusive. An element may
+ match several pseudo-classes at the same time.</p>
- <li>The <code>:hover</code> pseudo-class applies while the user
+ <div class="example">
+ <p>Examples:</p>
+ <pre>a:link /* unvisited links */
+ a:visited /* visited links */
+ a:hover /* user hovers */
+ a:active /* active links */</pre>
+ <p>An example of combining dynamic pseudo-classes:</p>
+ <pre>a:focus
+ a:focus:hover</pre>
+ <p>The last selector matches <code>a</code> elements that are in
+ the pseudo-class :focus and in the pseudo-class :hover.</p>
+ </div>
+
+<h3 id="hover-pseudo">
+The pointer hover pseudo-class :hover</h3>
+
+ <p>The <code>:hover</code> pseudo-class applies while the user
designates an element with a pointing device, but does not necessarily activate
it. For example, a visual user agent could apply this pseudo-class
when the cursor (mouse pointer) hovers over a box generated by the
@@ -1388,50 +1406,47 @@
media</a> may not be able to support this pseudo-class (e.g., a pen
device that does not detect hovering).</li>
- <li>The <code>:active</code> pseudo-class applies while an element
+ <p>The parent of an element that is <code>:hover</code> is also in
+ that state.
+
+ <p class="note"><strong>Note:</strong> Since the ':hover' state can apply to
+ an element because its child is designated by a pointing device, then it is
+ possible for ':hover' to apply to an element that is not underneath
+ the pointing device.</p>
+
+
+<h3 id="active-pseudo">
+The activation pseudo-class :active</h3>
+
+ <p>The <code>:active</code> pseudo-class applies while an element
is being activated by the user. For example, between the times the
user presses the mouse button and releases it. On systems with more
than one mouse button, <code>:active</code> applies only to the
primary or primary activation button (typically the "left" mouse
button), and any aliases thereof.</li>
- <li>The <code>:focus</code> pseudo-class applies while an element
- has the focus (accepts keyboard or mouse events, or other forms of
- input). </li>
-
- </ul>
-
<p>There may be document language or implementation specific limits on
- which elements can become <code>:active</code> or acquire
- <code>:focus</code>.</p>
-
- <p>These pseudo-classes are not mutually exclusive. An element may
- match several pseudo-classes at the same time.</p>
+ which elements can become <code>:active</code>.</p>
<p>Selectors doesn't define if the parent of an element that is
- ':active' or ':hover' is also in that state.</p>
-
- <p class="note"><strong>Note:</strong> If the ':hover' state applies to an
- element because its child is designated by a pointing device, then it's
- possible for ':hover' to apply to an element that is not underneath
- the pointing device.</p>
-
- <div class="example">
- <p>Examples:</p>
- <pre>a:link /* unvisited links */
- a:visited /* visited links */
- a:hover /* user hovers */
- a:active /* active links */</pre>
- <p>An example of combining dynamic pseudo-classes:</p>
- <pre>a:focus
- a:focus:hover</pre>
- <p>The last selector matches <code>a</code> elements that are in
- the pseudo-class :focus and in the pseudo-class :hover.</p>
- </div>
+ ':active' is also in that state.</p>
<p class="note"><strong>Note:</strong> An element can be both
':visited' and ':active' (or ':link' and ':active').</p>
+<h3 id="active-pseudo">
+The input focus pseudo-class :focus</h3>
+
+ <p>The <code>:focus</code> pseudo-class applies while an element
+ has the focus (accepts keyboard or mouse events, or other forms of
+ input). </li>
+
+ <p>There may be document language or implementation specific limits on
+ which elements can acquire <code>:focus</code>.</p>
+
+<h2 id="time-pseudo">
+Time-linear Presentation Pseudo-classes</h2>
+
<h3 id="current-pseudo">
The currently-playing pseudo-class <code>:current</code></h3>
Received on Sunday, 24 July 2011 21:32:12 UTC