- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Sat, 04 Jun 2011 03:16:16 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/selectors4
In directory hutz:/tmp/cvs-serv11957
Modified Files:
Overview.html Overview.src.html
Log Message:
Pull up pseudo-classes in the document structure so that they're not quite so buried, since there are so many of them and they should be sectioned
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/selectors4/Overview.html,v
retrieving revision 1.9
retrieving revision 1.10
diff -u -d -r1.9 -r1.10
--- Overview.html 4 Jun 2011 03:10:05 -0000 1.9
+++ Overview.html 4 Jun 2011 03:16:13 -0000 1.10
@@ -205,141 +205,140 @@
selectors</a>
</ul>
- <li><a href="#pseudo-classes"><span class=secno>7. </span>
- Pseudo-classes</a>
+ <li><a href="#pseudo-classes"><span class=secno>7. </span> Pseudo-classes
+ Syntax and Overview</a>
+
+ <li><a href="#dynamic-pseudos"><span class=secno>8. </span> Dynamic
+ pseudo-classes</a>
<ul class=toc>
- <li><a href="#dynamic-pseudos"><span class=secno>7.1. </span> Dynamic
- pseudo-classes</a>
- <ul class=toc>
- <li><a href="#link"><span class=secno>7.1.1. </span> The link
- pseudo-classes: :link and :visited</a>
+ <li><a href="#link"><span class=secno>8.1. </span> The link
+ pseudo-classes: :link and :visited</a>
- <li><a href="#useraction-pseudos"><span class=secno>7.1.2. </span> The
- user action pseudo-classes :hover, :active, and :focus</a>
+ <li><a href="#useraction-pseudos"><span class=secno>8.2. </span> The
+ user action pseudo-classes :hover, :active, and :focus</a>
- <li><a href="#target-pseudo"><span class=secno>7.1.3. </span> The
- target pseudo-class :target</a>
- </ul>
+ <li><a href="#target-pseudo"><span class=secno>8.3. </span> The target
+ pseudo-class :target</a>
+ </ul>
- <li><a href="#linguistic-pseudos"><span class=secno>7.2. </span>
- Linguistic Pseudo-classes</a>
- <ul class=toc>
- <li><a href="#dir-pseudo"><span class=secno>7.2.1. </span> The
- directionality pseudo-class :dir()</a>
+ <li><a href="#linguistic-pseudos"><span class=secno>9. </span> Linguistic
+ Pseudo-classes</a>
+ <ul class=toc>
+ <li><a href="#dir-pseudo"><span class=secno>9.1. </span> The
+ directionality pseudo-class <code>:dir()</code></a>
- <li><a href="#x"><span class=secno>7.2.2. </span> </a>
+ <li><a href="#x"><span class=secno>9.2. </span> </a>
- <li><a href="#lang-pseudo"><span class=secno>7.2.3. </span> The
- language pseudo-class :lang</a>
- </ul>
+ <li><a href="#lang-pseudo"><span class=secno>9.3. </span> The language
+ pseudo-class <code>:lang<</code>/h3> </code></a>
+ </ul>
- <li><a href="#UIstates"><span class=secno>7.3. </span> The UI element
- states pseudo-classes </a>
- <ul class=toc>
- <li><a href="#enableddisabled"><span class=secno>7.3.1. </span> The
- :enabled and :disabled pseudo-classes</a>
+ <li><a href="#UIstates"><span class=secno>10. </span> The UI element
+ states pseudo-classes</a>
+ <ul class=toc>
+ <li><a href="#enableddisabled"><span class=secno>10.1. </span> The
+ :enabled and :disabled pseudo-classes</a>
- <li><a href="#checked"><span class=secno>7.3.2. </span> The :checked
- pseudo-class</a>
+ <li><a href="#checked"><span class=secno>10.2. </span> The :checked
+ pseudo-class</a>
- <li><a href="#indeterminate"><span class=secno>7.3.3. </span> The
- :indeterminate pseudo-class</a>
- </ul>
+ <li><a href="#indeterminate"><span class=secno>10.3. </span> The
+ :indeterminate pseudo-class</a>
+ </ul>
- <li><a href="#structural-pseudos"><span class=secno>7.4. </span>
- Structural pseudo-classes</a>
- <ul class=toc>
- <li><a href="#root-pseudo"><span class=secno>7.4.1. </span> :root
- pseudo-class</a>
+ <li><a href="#structural-pseudos"><span class=secno>11. </span> Structural
+ pseudo-classes</a>
+ <ul class=toc>
+ <li><a href="#root-pseudo"><span class=secno>11.1. </span> :root
+ pseudo-class</a>
- <li><a href="#nth-child-pseudo"><span class=secno>7.4.2. </span>
- :nth-child() pseudo-class</a>
+ <li><a href="#nth-child-pseudo"><span class=secno>11.2. </span>
+ :nth-child() pseudo-class</a>
- <li><a href="#nth-last-child-pseudo"><span class=secno>7.4.3. </span>
- :nth-last-child() pseudo-class</a>
+ <li><a href="#nth-last-child-pseudo"><span class=secno>11.3. </span>
+ :nth-last-child() pseudo-class</a>
- <li><a href="#nth-of-type-pseudo"><span class=secno>7.4.4. </span>
- :nth-of-type() pseudo-class</a>
+ <li><a href="#nth-of-type-pseudo"><span class=secno>11.4. </span>
+ :nth-of-type() pseudo-class</a>
- <li><a href="#nth-last-of-type-pseudo"><span class=secno>7.4.5.
- </span> :nth-last-of-type() pseudo-class</a>
+ <li><a href="#nth-last-of-type-pseudo"><span class=secno>11.5. </span>
+ :nth-last-of-type() pseudo-class</a>
- <li><a href="#first-child-pseudo"><span class=secno>7.4.6. </span>
- :first-child pseudo-class</a>
+ <li><a href="#first-child-pseudo"><span class=secno>11.6. </span>
+ :first-child pseudo-class</a>
- <li><a href="#last-child-pseudo"><span class=secno>7.4.7. </span>
- :last-child pseudo-class</a>
+ <li><a href="#last-child-pseudo"><span class=secno>11.7. </span>
+ :last-child pseudo-class</a>
- <li><a href="#first-of-type-pseudo"><span class=secno>7.4.8. </span>
- :first-of-type pseudo-class</a>
+ <li><a href="#first-of-type-pseudo"><span class=secno>11.8. </span>
+ :first-of-type pseudo-class</a>
- <li><a href="#last-of-type-pseudo"><span class=secno>7.4.9. </span>
- :last-of-type pseudo-class</a>
+ <li><a href="#last-of-type-pseudo"><span class=secno>11.9. </span>
+ :last-of-type pseudo-class</a>
- <li><a href="#only-child-pseudo"><span class=secno>7.4.10. </span>
- :only-child pseudo-class</a>
+ <li><a href="#only-child-pseudo"><span class=secno>11.10. </span>
+ :only-child pseudo-class</a>
- <li><a href="#only-of-type-pseudo"><span class=secno>7.4.11. </span>
- :only-of-type pseudo-class</a>
+ <li><a href="#only-of-type-pseudo"><span class=secno>11.11. </span>
+ :only-of-type pseudo-class</a>
- <li><a href="#empty-pseudo"><span class=secno>7.4.12. </span> :empty
- pseudo-class</a>
- </ul>
+ <li><a href="#empty-pseudo"><span class=secno>11.12. </span> :empty
+ pseudo-class</a>
</ul>
- <li><a href="#combinators"><span class=secno>8. </span> Combinators</a>
+ <li><a href="#combinators"><span class=secno>12. </span> Combinators</a>
<ul class=toc>
- <li><a href="#descendant-combinators"><span class=secno>8.1. </span>
+ <li><a href="#descendant-combinators"><span class=secno>12.1. </span>
Descendant combinator</a>
- <li><a href="#child-combinators"><span class=secno>8.2. </span> Child
+ <li><a href="#child-combinators"><span class=secno>12.2. </span> Child
combinators</a>
- <li><a href="#sibling-combinators"><span class=secno>8.3. </span>
+ <li><a href="#sibling-combinators"><span class=secno>12.3. </span>
Sibling combinators</a>
<ul class=toc>
- <li><a href="#adjacent-sibling-combinators"><span class=secno>8.3.1.
+ <li><a href="#adjacent-sibling-combinators"><span class=secno>12.3.1.
</span> Adjacent sibling combinator</a>
- <li><a href="#general-sibling-combinators"><span class=secno>8.3.2.
+ <li><a href="#general-sibling-combinators"><span class=secno>12.3.2.
</span> General sibling combinator</a>
</ul>
</ul>
- <li><a href="#specificity"><span class=secno>9. </span> Calculating a
+ <li><a href="#specificity"><span class=secno>13. </span> Calculating a
selector's specificity</a>
- <li><a href="#grammar"><span class=secno>10. </span> The grammar of
+ <li><a href="#grammar"><span class=secno>14. </span> The grammar of
Selectors</a>
<ul class=toc>
- <li><a href="#grammar"><span class=secno>10.1. </span> Grammar</a>
+ <li><a href="#grammar"><span class=secno>14.1. </span> Grammar</a>
- <li><a href="#lex"><span class=secno>10.2. </span> Lexical scanner</a>
+ <li><a href="#lex"><span class=secno>14.2. </span> Lexical scanner</a>
</ul>
- <li><a href="#profiling"><span class=secno>11. </span>Profiles</a>
+ <li><a href="#profiling"><span class=secno>15. </span>Profiles</a>
- <li><a href="#conformance"><span class=secno>12. </span> Conformance</a>
+ <li><a href="#conformance"><span class=secno>16. </span> Conformance</a>
<ul class=toc>
- <li><a href="#conformance-classes"><span class=secno>12.1. </span>
+ <li><a href="#conformance-classes"><span class=secno>16.1. </span>
Conformance Classes</a>
- <li><a href="#partial"><span class=secno>12.2. </span> Partial
+ <li><a href="#partial"><span class=secno>16.2. </span> Partial
Implementations</a>
- <li><a href="#experimental"><span class=secno>12.3. </span> Experimental
+ <li><a href="#experimental"><span class=secno>16.3. </span> Experimental
Implementations</a>
</ul>
- <li><a href="#acknowledgements"><span class=secno>13. </span>
+ <li><a href="#acknowledgements"><span class=secno>17. </span>
Acknowledgements</a>
- <li><a href="#references"><span class=secno>14. </span> References</a>
+ <li><a href="#references"><span class=secno>18. </span> References</a>
<ul class=toc>
- <li><a href="#normative-references"><span class=secno>14.1. </span>
+ <li><a href="#normative-references"><span class=secno>18.1. </span>
Normative References</a>
- <li><a href="#informative-references"><span class=secno>14.2. </span>
+ <li><a href="#informative-references"><span class=secno>18.2. </span>
Informative References</a>
</ul>
</ul>
@@ -1608,15 +1607,18 @@
could be reached using mixtures of xml:id, DOM3 Core, XML DTDs, and
namespace-specific knowledge.
- <h2 id=pseudo-classes><span class=secno>7. </span> Pseudo-classes</h2>
+ <h2 id=pseudo-classes><span class=secno>7. </span> Pseudo-classes Syntax
+ and Overview</h2>
<p>The pseudo-class concept is introduced to permit selection based on
information that lies outside of the document tree or that cannot be
expressed using the other simple selectors.
<p>A pseudo-class always consists of a "colon" (<code>:</code>)
- followed by the name of the pseudo-class and optionally by a value between
- parentheses.
+ followed by the name of the pseudo-class and, for functional
+ pseudo-classes, by a value between parentheses. White space is optionally
+ allowed between the parentheses and the value, but not between the
+ pseudo-class name and the parentheses.
<p>Pseudo-classes are allowed in all compound selectors contained in a
selector. Pseudo-classes are allowed anywhere in compound selector after
@@ -1626,8 +1628,7 @@
Pseudo-classes may be dynamic, in the sense that an element may acquire or
lose a pseudo-class while a user interacts with the document.
- <h3 id=dynamic-pseudos><span class=secno>7.1. </span> Dynamic
- pseudo-classes</h3>
+ <h2 id=dynamic-pseudos><span class=secno>8. </span> Dynamic pseudo-classes</h2>
<p>Dynamic pseudo-classes classify elements on characteristics other than
their name, attributes, or content, in principle characteristics that
@@ -1636,8 +1637,8 @@
<p>Dynamic pseudo-classes do not appear in the document source or document
tree.
- <h4 id=link><span class=secno>7.1.1. </span> The link pseudo-classes: :link
- and :visited</h4>
+ <h3 id=link><span class=secno>8.1. </span> The link pseudo-classes: :link
+ and :visited</h3>
<p>User agents commonly display unvisited links differently from previously
visited ones. Selectors provides the pseudo-classes <code>:link</code> and
@@ -1673,8 +1674,8 @@
measures to preserve the user's privacy while rendering visited and
unvisited links differently.
- <h4 id=useraction-pseudos><span class=secno>7.1.2. </span> The user action
- pseudo-classes :hover, :active, and :focus</h4>
+ <h3 id=useraction-pseudos><span class=secno>8.2. </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
@@ -1744,8 +1745,8 @@
class=css>:link</code>’ and ‘<code
class=css>:active</code>’).
- <h4 id=target-pseudo><span class=secno>7.1.3. </span> The target
- pseudo-class :target</h4>
+ <h3 id=target-pseudo><span class=secno>8.3. </span> The target pseudo-class
+ :target</h3>
<p>Some URIs refer to a location within a resource. This kind of URI ends
with a "number sign" (#) followed by an anchor identifier
@@ -1780,13 +1781,13 @@
*:target::before { content : url(target.png) }</pre>
</div>
- <h3 id=linguistic-pseudos><span class=secno>7.2. </span> Linguistic
- Pseudo-classes</h3>
+ <h2 id=linguistic-pseudos><span class=secno>9. </span> Linguistic
+ Pseudo-classes</h2>
- <h4 id=dir-pseudo><span class=secno>7.2.1. </span> The directionality
- pseudo-class :dir()</h4>
+ <h3 id=dir-pseudo><span class=secno>9.1. </span> The directionality
+ pseudo-class <code>:dir()</code></h3>
- <h4 id=x><span class=secno>7.2.2. </span></h4>
+ <h3 id=x><span class=secno>9.2. </span></h3>
<p>The <code>:dir()</code> pseudo-class allows the author to write
selectors that represent an element based on its directionality as
@@ -1821,8 +1822,8 @@
<code>:dir(rtl)</code> depending on the resolved directionality of the
elements as determined by its contents.
- <h4 id=lang-pseudo><span class=secno>7.2.3. </span> The language
- pseudo-class :lang</h4>
+ <h3 id=lang-pseudo><span class=secno>9.3. </span> The language pseudo-class
+ <code>:lang<</code>/h3> </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
@@ -1887,11 +1888,11 @@
</body></pre>
</div>
- <h3 id=UIstates><span class=secno>7.3. </span> The UI element states
- pseudo-classes</h3>
+ <h2 id=UIstates><span class=secno>10. </span> The UI element states
+ pseudo-classes</h2>
- <h4 id=enableddisabled><span class=secno>7.3.1. </span> The :enabled and
- :disabled pseudo-classes</h4>
+ <h3 id=enableddisabled><span class=secno>10.1. </span> The :enabled and
+ :disabled pseudo-classes</h3>
<p>The <code>:enabled</code> pseudo-class represents user interface
elements that are in an enabled state; such elements have a corresponding
@@ -1911,7 +1912,7 @@
e.g., the <code>display</code> and <code>visibility</code> properties have
no effect on the enabled/disabled state of an element.
- <h4 id=checked><span class=secno>7.3.2. </span> The :checked pseudo-class</h4>
+ <h3 id=checked><span class=secno>10.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
@@ -1927,8 +1928,8 @@
in which case the <code>:checked</code> pseudo-class would no longer
apply.
- <h4 id=indeterminate><span class=secno>7.3.3. </span> The :indeterminate
- pseudo-class</h4>
+ <h3 id=indeterminate><span class=secno>10.3. </span> The :indeterminate
+ pseudo-class</h3>
<p>Radio and checkbox elements can be toggled by the user, but are
sometimes in an indeterminate state, neither checked nor unchecked. This
@@ -1943,8 +1944,8 @@
<p>Components of a radio-group initialized with no pre-selected choice are
an example of :indeterminate state.
- <h3 id=structural-pseudos><span class=secno>7.4. </span> Structural
- pseudo-classes</h3>
+ <h2 id=structural-pseudos><span class=secno>11. </span> Structural
+ pseudo-classes</h2>
<p>Selectors introduces the concept of <dfn
id=structural-pseudo-classes>structural pseudo-classes</dfn> to permit
@@ -1956,14 +1957,14 @@
parent. When calculating the position of an element in the list of
children of its parent, the index numbering starts at 1.
- <h4 id=root-pseudo><span class=secno>7.4.1. </span> :root pseudo-class</h4>
+ <h3 id=root-pseudo><span class=secno>11.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.
- <h4 id=nth-child-pseudo><span class=secno>7.4.2. </span> :nth-child()
- pseudo-class</h4>
+ <h3 id=nth-child-pseudo><span class=secno>11.2. </span> :nth-child()
+ pseudo-class</h3>
<p>The <code>:nth-child(<var>a</var><code>n</code>+<var>b</var>)</code>
pseudo-class notation represents an element that has
@@ -2099,8 +2100,8 @@
<pre>html|tr:nth-child(-n+6) /* represents the 6 first rows of XHTML tables */</pre>
</div>
- <h4 id=nth-last-child-pseudo><span class=secno>7.4.3. </span>
- :nth-last-child() pseudo-class</h4>
+ <h3 id=nth-last-child-pseudo><span class=secno>11.3. </span>
+ :nth-last-child() pseudo-class</h3>
<p>The <code>:nth-last-child(<var>a</var>n+<var>b</var>)</code>
pseudo-class notation represents an element that has
@@ -2121,8 +2122,8 @@
counting from the last one */</pre>
</div>
- <h4 id=nth-of-type-pseudo><span class=secno>7.4.4. </span> :nth-of-type()
- pseudo-class</h4>
+ <h3 id=nth-of-type-pseudo><span class=secno>11.4. </span> :nth-of-type()
+ pseudo-class</h3>
<p>The <code>:nth-of-type(<var>a</var>n+<var>b</var>)</code> pseudo-class
notation represents an element that has
@@ -2143,8 +2144,8 @@
img:nth-of-type(2n) { float: left; }</pre>
</div>
- <h4 id=nth-last-of-type-pseudo><span class=secno>7.4.5. </span>
- :nth-last-of-type() pseudo-class</h4>
+ <h3 id=nth-last-of-type-pseudo><span class=secno>11.5. </span>
+ :nth-last-of-type() pseudo-class</h3>
<p>The <code>:nth-last-of-type(<var>a</var>n+<var>b</var>)</code>
pseudo-class notation represents an element that has
@@ -2170,8 +2171,8 @@
<pre>body > h2:not(:first-of-type):not(:last-of-type)</pre>
</div>
- <h4 id=first-child-pseudo><span class=secno>7.4.6. </span> :first-child
- pseudo-class</h4>
+ <h3 id=first-child-pseudo><span class=secno>11.6. </span> :first-child
+ pseudo-class</h3>
<p>Same as <code>:nth-child(1)</code>. The <code>:first-child</code>
pseudo-class represents an element that is the first child of some other
@@ -2205,8 +2206,8 @@
a:first-child /* Same (assuming a is not the root element) */</pre>
</div>
- <h4 id=last-child-pseudo><span class=secno>7.4.7. </span> :last-child
- pseudo-class</h4>
+ <h3 id=last-child-pseudo><span class=secno>11.7. </span> :last-child
+ pseudo-class</h3>
<p>Same as <code>:nth-last-child(1)</code>. The <code>:last-child</code>
pseudo-class represents an element that is the last child of some other
@@ -2221,8 +2222,8 @@
<pre>ol > li:last-child</pre>
</div>
- <h4 id=first-of-type-pseudo><span class=secno>7.4.8. </span> :first-of-type
- pseudo-class</h4>
+ <h3 id=first-of-type-pseudo><span class=secno>11.8. </span> :first-of-type
+ pseudo-class</h3>
<p>Same as <code>:nth-of-type(1)</code>. The <code>:first-of-type</code>
pseudo-class represents an element that is the first sibling of its type
@@ -2253,8 +2254,8 @@
</dl></pre>
</div>
- <h4 id=last-of-type-pseudo><span class=secno>7.4.9. </span> :last-of-type
- pseudo-class</h4>
+ <h3 id=last-of-type-pseudo><span class=secno>11.9. </span> :last-of-type
+ pseudo-class</h3>
<p>Same as <code>:nth-last-of-type(1)</code>. The
<code>:last-of-type</code> pseudo-class represents an element that is the
@@ -2269,8 +2270,8 @@
<pre>tr > td:last-of-type</pre>
</div>
- <h4 id=only-child-pseudo><span class=secno>7.4.10. </span> :only-child
- pseudo-class</h4>
+ <h3 id=only-child-pseudo><span class=secno>11.10. </span> :only-child
+ pseudo-class</h3>
<p>Represents an element that has a parent element and whose parent element
has no other element children. Same as
@@ -2278,8 +2279,8 @@
<code>:nth-child(1):nth-last-child(1)</code>, but with a lower
specificity.
- <h4 id=only-of-type-pseudo><span class=secno>7.4.11. </span> :only-of-type
- pseudo-class</h4>
+ <h3 id=only-of-type-pseudo><span class=secno>11.11. </span> :only-of-type
+ pseudo-class</h3>
<p>Represents an element that has a parent element and whose parent element
has no other element children with the same expanded element name. Same as
@@ -2287,7 +2288,7 @@
<code>:nth-of-type(1):nth-last-of-type(1)</code>, but with a lower
specificity.
- <h4 id=empty-pseudo><span class=secno>7.4.12. </span> :empty pseudo-class</h4>
+ <h3 id=empty-pseudo><span class=secno>11.12. </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
@@ -2316,9 +2317,9 @@
<pre><foo>this is not <bar>:empty</bar></foo></pre>
</div>
- <h2 id=combinators><span class=secno>8. </span> Combinators</h2>
+ <h2 id=combinators><span class=secno>12. </span> Combinators</h2>
- <h3 id=descendant-combinators><span class=secno>8.1. </span> Descendant
+ <h3 id=descendant-combinators><span class=secno>12.1. </span> Descendant
combinator</h3>
<p>At times, authors may want selectors to describe an element that is the
@@ -2363,7 +2364,7 @@
<pre>div p *[href]</pre>
</div>
- <h3 id=child-combinators><span class=secno>8.2. </span> Child combinators</h3>
+ <h3 id=child-combinators><span class=secno>12.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
@@ -2394,7 +2395,7 @@
the section on the <code><a
href="#structural-pseudos">:first-child</a></code> pseudo-class above.
- <h3 id=sibling-combinators><span class=secno>8.3. </span> Sibling
+ <h3 id=sibling-combinators><span class=secno>12.3. </span> Sibling
combinators</h3>
<p>There are two different sibling combinators: the adjacent sibling
@@ -2402,7 +2403,7 @@
nodes (e.g. text between elements) are ignored when considering adjacency
of elements.
- <h4 id=adjacent-sibling-combinators><span class=secno>8.3.1. </span>
+ <h4 id=adjacent-sibling-combinators><span class=secno>12.3.1. </span>
Adjacent sibling combinator</h4>
<p>The adjacent sibling combinator is made of the "plus sign"
@@ -2428,8 +2429,8 @@
<pre>h1.opener + h2</pre>
</div>
- <h4 id=general-sibling-combinators><span class=secno>8.3.2. </span> General
- sibling combinator</h4>
+ <h4 id=general-sibling-combinators><span class=secno>12.3.2. </span>
+ General sibling combinator</h4>
<p>The general sibling combinator is made of the "tilde" (U+007E,
<code>~</code>) character that separates two compound selectors. The
@@ -2451,7 +2452,7 @@
<pre>function a(x) = 12x/13.5</pre></pre>
</div>
- <h2 id=specificity><span class=secno>9. </span> Calculating a selector's
+ <h2 id=specificity><span class=secno>13. </span> Calculating a selector's
specificity</h2>
<p>A selector's specificity is calculated as follows:
@@ -2503,9 +2504,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=grammar><span class=secno>10. </span> The grammar of Selectors</h2>
+ <h2 id=grammar><span class=secno>14. </span> The grammar of Selectors</h2>
- <h3 id=grammar><span class=secno>10.1. </span> Grammar</h3>
+ <h3 id=grammar><span class=secno>14.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
@@ -2604,7 +2605,7 @@
: type_selector | universal | HASH | class | attrib | pseudo
;</pre>
- <h3 id=lex><span class=secno>10.2. </span> Lexical scanner</h3>
+ <h3 id=lex><span class=secno>14.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
@@ -2672,7 +2673,7 @@
. return *yytext;</pre>
- <h2 id=profiling><span class=secno>11. </span>Profiles</h2>
+ <h2 id=profiling><span class=secno>15. </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
@@ -2833,9 +2834,9 @@
</ol>
</div>
- <h2 id=conformance><span class=secno>12. </span> Conformance</h2>
+ <h2 id=conformance><span class=secno>16. </span> Conformance</h2>
- <h3 id=conformance-classes><span class=secno>12.1. </span> Conformance
+ <h3 id=conformance-classes><span class=secno>16.1. </span> Conformance
Classes</h3>
<p>Conformance to Selectors Level 4 is defined for three conformance
@@ -2881,7 +2882,7 @@
errors. (In the case of CSS, the entire rule in which the selector is used
is dropped.)
- <h3 id=partial><span class=secno>12.2. </span> Partial Implementations</h3>
+ <h3 id=partial><span class=secno>16.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
@@ -2890,7 +2891,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>12.3. </span> Experimental
+ <h3 id=experimental><span class=secno>16.3. </span> Experimental
Implementations</h3>
<p>To avoid clashes with future Selectors features, the Selectors
@@ -2913,7 +2914,7 @@
and does not cover all possible combined cases of Selectors.</p>
-->
- <h2 id=acknowledgements><span class=secno>13. </span> Acknowledgements</h2>
+ <h2 id=acknowledgements><span class=secno>17. </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>
@@ -2924,9 +2925,9 @@
-->
- <h2 id=references><span class=secno>14. </span> References</h2>
+ <h2 id=references><span class=secno>18. </span> References</h2>
- <h3 id=normative-references><span class=secno>14.1. </span> Normative
+ <h3 id=normative-references><span class=secno>18.1. </span> Normative
References</h3>
<!--begin-normative-->
<!-- Sorted by label -->
@@ -2989,7 +2990,7 @@
</dl>
<!--end-normative-->
- <h3 id=informative-references><span class=secno>14.2. </span> Informative
+ <h3 id=informative-references><span class=secno>18.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.11
retrieving revision 1.12
diff -u -d -r1.11 -r1.12
--- Overview.src.html 4 Jun 2011 03:10:05 -0000 1.11
+++ Overview.src.html 4 Jun 2011 03:16:13 -0000 1.12
@@ -1169,15 +1169,17 @@
DOM3 Core, XML DTDs, and namespace-specific knowledge.</p>
<h2 id=pseudo-classes>
-Pseudo-classes</h2>
+Pseudo-classes Syntax and Overview</h2>
<p>The pseudo-class concept is introduced to permit selection based on
information that lies outside of the document tree or that cannot be
expressed using the other simple selectors.</p>
<p>A pseudo-class always consists of a "colon"
- (<code>:</code>) followed by the name of the pseudo-class and
- optionally by a value between parentheses.</p>
+ (<code>:</code>) followed by the name of the pseudo-class and, for
+ functional pseudo-classes, by a value between parentheses.
+ White space is optionally allowed between the parentheses and the
+ value, but not between the pseudo-class name and the parentheses.</p>
<p>Pseudo-classes are allowed in all compound selectors
contained in a selector. Pseudo-classes are allowed anywhere in
@@ -1190,8 +1192,8 @@
document.</p>
-<h3 id=dynamic-pseudos>
-Dynamic pseudo-classes</h3>
+<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
@@ -1201,8 +1203,8 @@
document tree.</p>
-<h4 id=link>
-The link pseudo-classes: :link and :visited</h4>
+<h3 id=link>
+The link pseudo-classes: :link and :visited</h3>
<p>User agents commonly display unvisited links differently from
previously visited ones. Selectors
@@ -1240,8 +1242,8 @@
other measures to preserve the user's privacy while rendering visited
and unvisited links differently.</p>
-<h4 id=useraction-pseudos>
-The user action pseudo-classes :hover, :active, and :focus</h4>
+<h3 id=useraction-pseudos>
+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
@@ -1305,8 +1307,8 @@
<p class="note"><strong>Note:</strong> An element can be both
':visited' and ':active' (or ':link' and ':active').</p>
-<h4 id=target-pseudo>
-The target pseudo-class :target</h4>
+<h3 id=target-pseudo>
+The target pseudo-class :target</h3>
<p>Some URIs refer to a location within a resource. This kind of URI
ends with a "number sign" (#) followed by an anchor
@@ -1339,11 +1341,11 @@
*:target::before { content : url(target.png) }</pre>
</div>
-<h3 id="linguistic-pseudos">
-Linguistic Pseudo-classes</h3>
+<h2 id="linguistic-pseudos">
+Linguistic Pseudo-classes</h2>
-<h4 id="dir-pseudo">
-The directionality pseudo-class :dir()<h4>
+<h3 id="dir-pseudo">
+The directionality pseudo-class <code>:dir()</code><h3>
<p>The <code>:dir()</code> pseudo-class allows the author to write
selectors that represent an element based on its directionality as
@@ -1377,8 +1379,8 @@
<code>:dir(rtl)</code> depending on the resolved directionality of the
elements as determined by its contents.</p>
-<h4 id=lang-pseudo>
-The language pseudo-class :lang</h4>
+<h3 id=lang-pseudo>
+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
@@ -1437,11 +1439,11 @@
</body></pre>
</div>
-<h3 id=UIstates>
-The UI element states pseudo-classes</h4>
+<h2 id=UIstates>
+The UI element states pseudo-classes</h2>
-<h4 id=enableddisabled>
-The :enabled and :disabled pseudo-classes</h4>
+<h3 id=enableddisabled>
+The :enabled and :disabled pseudo-classes</h3>
<p>The <code>:enabled</code> pseudo-class represents user interface elements
that are in an enabled state; such elements have a corresponding disabled
@@ -1461,8 +1463,8 @@
<code>display</code> and <code>visibility</code> properties have no effect
on the enabled/disabled state of an element.</p>
-<h4 id=checked>
-The :checked pseudo-class</h4>
+<h3 id=checked>
+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
@@ -1478,8 +1480,8 @@
elements in which case the <code>:checked</code> pseudo-class would no
longer apply.
-<h4 id=indeterminate>
-The :indeterminate pseudo-class</h4>
+<h3 id=indeterminate>
+The :indeterminate pseudo-class</h3>
<p>Radio and checkbox elements can be toggled by the user, but are
sometimes in an indeterminate state, neither checked nor unchecked.
@@ -1496,8 +1498,8 @@
</div>
-<h3 id=structural-pseudos>
-Structural pseudo-classes</h3>
+<h2 id=structural-pseudos>
+Structural pseudo-classes</h2>
<p>Selectors introduces the concept of <dfn>structural
pseudo-classes</dfn> to permit selection based on extra information that lies in
@@ -1510,16 +1512,16 @@
the list of children of its parent, the index numbering starts at 1.
-<h4 id=root-pseudo>
-:root pseudo-class</h4>
+<h3 id=root-pseudo>
+: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.
-<h4 id=nth-child-pseudo>
-:nth-child() pseudo-class</h4>
+<h3 id=nth-child-pseudo>
+:nth-child() pseudo-class</h3>
<p>The
<code>:nth-child(<var>a</var><code>n</code>+<var>b</var>)</code>
@@ -1646,8 +1648,8 @@
<pre>html|tr:nth-child(-n+6) /* represents the 6 first rows of XHTML tables */</pre>
</div>
-<h4 id=nth-last-child-pseudo>
-:nth-last-child() pseudo-class</h4>
+<h3 id=nth-last-child-pseudo>
+:nth-last-child() pseudo-class</h3>
<p>The <code>:nth-last-child(<var>a</var>n+<var>b</var>)</code>
pseudo-class notation represents an element that has
@@ -1669,8 +1671,8 @@
</div>
-<h4 id=nth-of-type-pseudo>
-:nth-of-type() pseudo-class</h4>
+<h3 id=nth-of-type-pseudo>
+:nth-of-type() pseudo-class</h3>
<p>The <code>:nth-of-type(<var>a</var>n+<var>b</var>)</code>
pseudo-class notation represents an element that has
@@ -1690,8 +1692,8 @@
</div>
-<h4 id=nth-last-of-type-pseudo>
-:nth-last-of-type() pseudo-class</h4>
+<h3 id=nth-last-of-type-pseudo>
+:nth-last-of-type() pseudo-class</h3>
<p>The <code>:nth-last-of-type(<var>a</var>n+<var>b</var>)</code>
pseudo-class notation represents an element that has
@@ -1715,8 +1717,8 @@
</div>
-<h4 id=first-child-pseudo>
-:first-child pseudo-class</h4>
+<h3 id=first-child-pseudo>
+:first-child pseudo-class</h3>
<p>Same as <code>:nth-child(1)</code>. The <code>:first-child</code> pseudo-class
represents an element that is the first child of some other element.
@@ -1744,8 +1746,8 @@
a:first-child /* Same (assuming a is not the root element) */</pre>
</div>
-<h4 id=last-child-pseudo>
-:last-child pseudo-class</h4>
+<h3 id=last-child-pseudo>
+:last-child pseudo-class</h3>
<p>Same as <code>:nth-last-child(1)</code>. The <code>:last-child</code> pseudo-class
represents an element that is the last child of some other element.
@@ -1757,8 +1759,8 @@
<pre>ol > li:last-child</pre>
</div>
-<h4 id=first-of-type-pseudo>
-:first-of-type pseudo-class</h4>
+<h3 id=first-of-type-pseudo>
+:first-of-type pseudo-class</h3>
<p>Same as <code>:nth-of-type(1)</code>. The <code>:first-of-type</code> pseudo-class
represents an element that is the first sibling of its type in the list of
@@ -1786,8 +1788,8 @@
</dl></pre>
</div>
-<h4 id=last-of-type-pseudo>
-:last-of-type pseudo-class</h4>
+<h3 id=last-of-type-pseudo>
+:last-of-type pseudo-class</h3>
<p>Same as <code>:nth-last-of-type(1)</code>. The
<code>:last-of-type</code> pseudo-class represents an element that is
@@ -1801,8 +1803,8 @@
<pre>tr > td:last-of-type</pre>
</div>
-<h4 id=only-child-pseudo>
-:only-child pseudo-class</h4>
+<h3 id=only-child-pseudo>
+:only-child pseudo-class</h3>
<p>Represents an element that has a parent element and whose parent
element has no other element children. Same as
@@ -1810,8 +1812,8 @@
<code>:nth-child(1):nth-last-child(1)</code>, but with a lower
specificity.</p>
-<h4 id=only-of-type-pseudo>
-:only-of-type pseudo-class</h4>
+<h3 id=only-of-type-pseudo>
+:only-of-type pseudo-class</h3>
<p>Represents an element that has a parent element and whose parent
element has no other element children with the same expanded element
@@ -1820,8 +1822,8 @@
specificity.</p>
-<h4 id=empty-pseudo>
-:empty pseudo-class</h4>
+<h3 id=empty-pseudo>
+: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
Received on Saturday, 4 June 2011 03:16:18 UTC