- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 27 Sep 2011 22:53:22 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/selectors4
In directory hutz:/tmp/cvs-serv7359
Modified Files:
Overview.html Overview.src.html
Log Message:
Update summary table
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/selectors4/Overview.html,v
retrieving revision 1.51
retrieving revision 1.52
diff -u -d -r1.51 -r1.52
--- Overview.html 27 Sep 2011 19:50:29 -0000 1.51
+++ Overview.html 27 Sep 2011 22:53:20 -0000 1.52
@@ -5,6 +5,11 @@
<head>
<title>Selectors Level 4</title>
<link href=default.css rel=stylesheet type="text/css">
+
+ <style>
+ .tprofile td, th { vertical-align: baseline; padding: 0 0.5em; }
+ .tprofile th { text-align: right; }
+ </style>
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
type="text/css">
[...1317 lines suppressed...]
<h2 id=references><span class=secno>20. </span> References</h2>
@@ -3596,6 +3832,16 @@
</dd>
<!---->
+ <dt id=CSS3UI>[CSS3UI]
+
+ <dd>Tantek Çelik. <a
+ href="http://www.w3.org/TR/2004/CR-css3-ui-20040511"><cite>CSS3 Basic
+ User Interface Module.</cite></a> 11 May 2004. W3C Candidate
+ Recommendation. (Work in progress.) URL: <a
+ href="http://www.w3.org/TR/2004/CR-css3-ui-20040511">http://www.w3.org/TR/2004/CR-css3-ui-20040511</a>
+ </dd>
+ <!---->
+
<dt id=DOM-LEVEL-3-CORE>[DOM-LEVEL-3-CORE]
<dd>Gavin Nicol; et al. <a
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/selectors4/Overview.src.html,v
retrieving revision 1.53
retrieving revision 1.54
diff -u -d -r1.53 -r1.54
--- Overview.src.html 27 Sep 2011 19:50:29 -0000 1.53
+++ Overview.src.html 27 Sep 2011 22:53:20 -0000 1.54
@@ -3,6 +3,10 @@
<head>
<title>Selectors Level 4</title>
<link href="default.css" type="text/css" rel="stylesheet">
+ <style>
+ .tprofile td, th { vertical-align: baseline; padding: 0 0.5em; }
+ .tprofile th { text-align: right; }
+ </style>
<link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" type="text/css" rel="stylesheet">
</head>
<body>
@@ -139,277 +143,369 @@
<p>The following table summarizes the Selector syntax:</p>
- <table class="selectorsReview data">
- <thead>
+ <table class="data">
+ <col class="pattern">
+ <col class="meaning">
+ <col class="section">
+ <col class="level">
+ <thead>
<tr>
- <th class="pattern">Pattern</th>
- <th class="meaning">Meaning</th>
- <th class="described">Described in section</th>
- <th class="origin">First defined in CSS level</th></tr>
- <tbody>
+ <th>Pattern
+ <th>Meaning
+ <th>Section
+ <th>Level
+ <tbody>
<tr>
- <td class="pattern">*</td>
- <td class="meaning">any element</td>
- <td class="described"><a
- href="#universal-selector">Universal
- selector</a></td>
- <td class="origin">2</td></tr>
+ <td><code>*</code>
+ <td>any element
+ <td><a href="#universal-selector">Universal selector</a>
+ <td>2
<tr>
- <td class="pattern">E</td>
- <td class="meaning">an element of type E</td>
- <td class="described"><a
- href="#type-selectors">Type selector</a></td>
- <td class="origin">1</td></tr>
+ <td><code>E</code>
+ <td>an element of type E
+ <td><a href="#type-selectors">Type selector</a>
+ <td>1
+ <tbody>
<tr>
- <td class="pattern">E[foo]</td>
- <td class="meaning">an E element with a "foo" attribute</td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">2</td></tr>
+ <td><code>E:not(<var>s</var>)</code>
+ <td>an E element that does not match simple selector <var>s</var>
+ <td><a href="#negation">Negation pseudo-class</a>
+ <td>3
<tr>
- <td class="pattern">E[foo="bar"]</td>
- <td class="meaning">an E element whose "foo" attribute value is exactly
- equal to "bar"</td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">2</td></tr>
+ <td><code>E:not(<var>s1</var>, <var>s2</var>)</code>
+ <td>an E element that does not match either compound selector <var>s1</var>
+ or compound selector <var>s2</var>
+ <td><a href="#negation">Negation pseudo-class</a>
+ <td>4
<tr>
- <td class="pattern">E[foo~="bar"]</td>
- <td class="meaning">an E element whose "foo" attribute value is a list of
- whitespace-separated values, one of which is exactly equal to "bar"</td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">2</td></tr>
+ <td><code>E:matches(<var>s1</var>, <var>s2</var>)</code>
+ <td>an E element that matches compound selector <var>s1</var>
+ and/or compound selector <var>s2</var>
+ <td><a href="#matches">Matches-any pseudo-class</a>
+ <td>4
+ <tbody>
<tr>
- <td class="pattern">E[foo^="bar"]</td>
- <td class="meaning">an E element whose "foo" attribute value begins exactly
- with the string "bar"</td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">3</td></tr>
+ <td><code>E.warning</code>
+ <td>an E element belonging to the class <code>warning</code>
+ (the document language specifies how class is determined).
+ <td><a href="#class-html">Class selectors</a>
+ <td>1
<tr>
- <td class="pattern">E[foo$="bar"]</td>
- <td class="meaning">an E element whose "foo" attribute value ends exactly
- with the string "bar"</td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">3</td></tr>
+ <td><code>E#myid</code>
+ <td>an E element with ID equal to <code>myid</code>.
+ <td><a href="#id-selectors">ID selectors</a>
+ <td>1
<tr>
- <td class="pattern">E[foo*="bar"]</td>
- <td class="meaning">an E element whose "foo" attribute value contains the
- substring "bar"</td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">3</td></tr>
+ <td><code>E[foo]</code>
+ <td>an E element with a <code>foo</code> attribute
+ <td><a href="#attribute-selectors">Attribute selectors</a>
+ <td>2
<tr>
- <td class="pattern">E[foo|="en"]</td>
- <td class="meaning">an E element whose "foo" attribute has a hyphen-separated
- list of values beginning (from the left) with "en"</td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">2</td></tr>
+ <td><code>E[foo="bar"]</code>
+ <td>an E element whose <code>foo</code> attribute value is
+ exactly equal to <code>bar</code>
+ <td><a href="#attribute-selectors">Attribute selectors</a>
+ <td>2
<tr>
- <td class="pattern">E:root</td>
- <td class="meaning">an E element, root of the document</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td></tr>
+ <td><code>E[foo="bar" i]</code>
+ <td>an E element whose <code>foo</code> attribute value is
+ exactly equal to any (ASCII-range) case-permutation of <code>bar</code>
+ <td><a href="#attribute-case">Attribute selectors: Case-sensitivity</a>
+ <td>4
<tr>
- <td class="pattern">E:nth-child(n)</td>
- <td class="meaning">an E element, the n-th child of its parent</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td></tr>
+ <td><code>E[foo~="bar"]</code>
+ <td>an E element whose <code>foo</code> attribute value is
+ a list of whitespace-separated values, one of which is
+ exactly equal to <code>bar</code>
+ <td><a href="#attribute-selectors">Attribute selectors</a>
+ <td>2
<tr>
- <td class="pattern">E:nth-last-child(n)</td>
- <td class="meaning">an E element, the n-th child of its parent, counting
- from the last one</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td></tr>
+ <td><code>E[foo^="bar"]</code>
+ <td>an E element whose <code>foo</code> attribute value
+ begins exactly with the string "bar"
+ <td><a href="#attribute-selectors">Attribute selectors</a>
+ <td>3
<tr>
- <td class="pattern">E:nth-of-type(n)</td>
- <td class="meaning">an E element, the n-th sibling of its type</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td></tr>
+ <td><code>E[foo$="bar"]</code>
+ <td>an E element whose <code>foo</code> attribute value
+ ends exactly with the string <code>bar</code>
+ <td><a href="#attribute-selectors">Attribute selectors</a>
+ <td>3
<tr>
- <td class="pattern">E:nth-last-of-type(n)</td>
- <td class="meaning">an E element, the n-th sibling of its type, counting
- from the last one</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td></tr>
+ <td><code>E[foo*="bar"]</code>
+ <td>an E element whose <code>foo</code> attribute value
+ contains the substring <code>bar</code>
+ <td><a href="#attribute-selectors">Attribute selectors</a>
+ <td>3
<tr>
- <td class="pattern">E:first-child</td>
- <td class="meaning">an E element, first child of its parent</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">2</td></tr>
+ <td><code>E[foo|="en"]</code>
+ <td>an E element whose <code>foo</code> attribute value is
+ a hyphen-separated list of values beginning with <code>en</code>
+ <td><a href="#attribute-selectors">Attribute selectors</a>
+ <td>2
+ <tbody>
<tr>
- <td class="pattern">E:last-child</td>
- <td class="meaning">an E element, last child of its parent</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td></tr>
+ <td><code>E:dir(ltr)</code>
+ <td>an element of type E in with left-to-right directionality
+ (the document language specifies how directionality is determined)
+ <td><a href="dir-pseudo">The :dir() pseudo-class</a>
+ <td>2
<tr>
- <td class="pattern">E:first-of-type</td>
- <td class="meaning">an E element, first sibling of its type</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td></tr>
+ <td><code>E:lang(fr)</code>
+ <td>an element of type E in language "fr" (the document
+ language specifies how language is determined)
+ <td><a href="#lang-pseudo">The :lang() pseudo-class</a>
+ <td>2
+ <tbody>
<tr>
- <td class="pattern">E:last-of-type</td>
- <td class="meaning">an E element, last sibling of its type</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td></tr>
+ <td><code>E:any-link</code>
+ <td>an E element being the source anchor of a hyperlink
+ <td><a href="#any-link-pseudo">The hyperlink pseudo-class</a>
+ <td>1
<tr>
- <td class="pattern">E:only-child</td>
- <td class="meaning">an E element, only child of its parent</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td></tr>
+ <td><code>E:link</code>
+ <td>an E element being the source anchor of a hyperlink
+ of which the target is not yet visited
+ <td><a href="#link">The link history pseudo-classes</a>
+ <td>1
<tr>
- <td class="pattern">E:only-of-type</td>
- <td class="meaning">an E element, only sibling of its type</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td></tr>
+ <td><code>E:visited</code>
+ <td>an E element being the source anchor of a hyperlink
+ of which the target is already visited
+ <td><a href="#link">The link history pseudo-classes</a>
+ <td>1
<tr>
- <td class="pattern">E:empty</td>
- <td class="meaning">an E element that has no children (including text
- nodes)</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td></tr>
+ <td><code>E:local-link</code>
+ <td>an E element being the source anchor of a hyperlink
+ of which the target is the current document
+ <td><a href="#local-pseudo">The local link pseudo-class</a>
+ <td>4
<tr>
- <td class="pattern">E:link<br>E:visited</td>
- <td class="meaning">an E element being the source anchor of a hyperlink of
- which the target is not yet visited (:link) or already visited
- (:visited)</td>
- <td class="described"><a
- href="#link">The link
- pseudo-classes</a></td>
- <td class="origin">1</td></tr>
+ <td><code>E:local-link(0)</code>
+ <td>an E element being the source anchor of a hyperlink
+ of which the target is within the current domain
+ <td><a href="#local-pseudo">The local link pseudo-class</a>
+ <td>4
<tr>
- <td class="pattern">E:active<br>E:hover<br>E:focus</td>
- <td class="meaning">an E element during certain user actions</td>
- <td class="described"><a
- href="#useraction-pseudos">The user
- action pseudo-classes</a></td>
- <td class="origin">1 and 2</td></tr>
+ <td><code>E:target</code>
+ <td>an E element being the target of the referring URI
+ <td><a href="#target-pseudo">The target pseudo-class</a>
+ <td>3
<tr>
- <td class="pattern">E:target</td>
- <td class="meaning">an E element being the target of the referring URI</td>
- <td class="described"><a
- href="#target-pseudo">The target
- pseudo-class</a></td>
- <td class="origin">3</td></tr>
+ <td><code>E:scope</code>
+ <td>an E element being a designated contextual reference element
+ <td><a href="#scope-pseudo">The scope pseudo-class</a>
+ <td>3
+ <tbody>
<tr>
- <td class="pattern">E:lang(fr)</td>
- <td class="meaning">an element of type E in language "fr" (the document
- language specifies how language is determined)</td>
- <td class="described"><a
- href="#lang-pseudo">The :lang()
- pseudo-class</a></td>
- <td class="origin">2</td></tr>
+ <td><code>E:current</code>
+ <td>an E element that is currently presented in a time-dimensional canvas
+ <td><a href="#time-pseudos">Time-dimensional Pseudo-classes</a>
+ <td>4
<tr>
- <td class="pattern">E:enabled<br>E:disabled</td>
- <td class="meaning">a user interface element E which is enabled or
- disabled</td>
- <td class="described"><a
- href="#UIstates">The UI element states
- pseudo-classes</a></td>
- <td class="origin">3</td></tr>
+ <td><code>E:current(<var>s</var></code>
+ <td>an E element that is the deepest <code>:current</code> element that
+ matches selector <var>s</var>
+ <td><a href="#time-pseudos">Time-dimensional Pseudo-classes</a>
+ <td>4
<tr>
- <td class="pattern">E:checked</td>
- <td class="meaning">a user interface element E which is checked/selected
- (for instance a radio-button or checkbox)</td>
- <td class="described"><a
- href="#UIstates">The UI element states
- pseudo-classes</a></td>
- <td class="origin">3</td></tr>
+ <td><code>E:past</code>
+ <td>an E element that is in the past in a time-dimensional canvas
+ <td><a href="#time-pseudos">Time-dimensional Pseudo-classes</a>
+ <td>4
<tr>
- <td class="pattern">E:indeterminate</td>
- <td class="meaning">a user interface element E which is in an
- indeterminate state (neither checked nor unchecked)</td>
- <td class="described"><a
- href="#UIstates">The UI element states
- pseudo-classes</a></td>
- <td class="origin">3</td></tr>
+ <td><code>E:future</code>
+ <td>an E element that is in the future in a time-dimensional canvas
+ <td><a href="#time-pseudos">Time-dimensional Pseudo-classes</a>
+ <td>4
+ <tbody>
<tr>
- <td class="pattern">E.warning</td>
- <td class="meaning">an E element whose class is
- "warning" (the document language specifies how class is determined).</td>
- <td class="described"><a
- href="#class-html">Class
- selectors</a></td>
- <td class="origin">1</td></tr>
+ <td><code>E:active</code>
+ <td>an E element that is in an activated state
+ <td><a href="#useraction-pseudos">The user action pseudo-classes</a>
+ <td>1
<tr>
- <td class="pattern">E#myid</td>
- <td class="meaning">an E element with ID equal to "myid".</td>
- <td class="described"><a
- href="#id-selectors">ID
- selectors</a></td>
- <td class="origin">1</td></tr>
+ <td><code>E:hover</code>
+ <td>an E element that is under the cursor,
+ or that has a descendant under the cursor
+ <td><a href="#useraction-pseudos">The user action pseudo-classes</a>
+ <td>2
<tr>
- <td class="pattern">E:not(s)</td>
- <td class="meaning">an E element that does not match simple selector s</td>
- <td class="described"><a
- href="#negation">Negation
- pseudo-class</a></td>
- <td class="origin">3</td></tr>
+ <td><code>E:focus</code>
+ <td>an E element that has user input focus
+ <td><a href="#useraction-pseudos">The user action pseudo-classes</a>
+ <td>2
<tr>
- <td class="pattern">E F</td>
- <td class="meaning">an F element descendant of an E element</td>
- <td class="described"><a
- href="#descendant-combinators">Descendant
- combinator</a></td>
- <td class="origin">1</td></tr>
+ <td><code>E:enabled<br>E:disabled</code>
+ <td>a user interface element E that is enabled or disabled, respectively
+ <td><a href="#enableddisabled">The :enabled and :disabled pseudo-classes</a>
+ <td>3
<tr>
- <td class="pattern">E > F</td>
- <td class="meaning">an F element child of an E element</td>
- <td class="described"><a
- href="#child-combinators">Child
- combinator</a></td>
- <td class="origin">2</td></tr>
+ <td><code>E:checked</code>
+ <td>a user interface element E that is checked/selected
+ (for instance a radio-button or checkbox)
+ <td><a href="#checked">The selected-option pseudo-class</a>
+ <td>3
<tr>
- <td class="pattern">E + F</td>
- <td class="meaning">an F element immediately preceded by an E element</td>
- <td class="described"><a
- href="#adjacent-sibling-combinators">Adjacent sibling combinator</a></td>
- <td class="origin">2</td></tr>
+ <td><code>E:indeterminate</code>
+ <td>a user interface element E that is in an
+ indeterminate state (neither checked nor unchecked)
+ <td><a href="#indeterminate">The indeterminate-value pseudo-class</a>
+ <td>4
<tr>
- <td class="pattern">E ~ F</td>
- <td class="meaning">an F element preceded by an E element</td>
- <td class="described"><a
- href="#general-sibling-combinators">General sibling combinator</a></td>
- <td class="origin">3</td></tr></tbody></table>
+ <td><code>E:default</code>
+ <td>a user interface element E that
+ <td><a href="#default-pseudo">The default option pseudo-class :default</a>
+ <td>3-UI/4
+ <tr>
+ <td><code>E:in-range</code><br><code>E:out-of-range</code>
+ <td>a user interface element E that
+ <td><a href="range-pseudos">The validity pseudo-classes</a>
+ <td>3-UI/4
+ <tr>
+ <td><code>E:required</code><br><code>E:optional</code>
+ <td>a user interface element E that
+ <td><a href="#opt-pseudos">The optionality pseudo-classes</a>
+ <td>3-UI/4
+ <tr>
+ <td><code>E:read-only</code><br><code>E:read-write</code>
+ <td>a user interface element E that
+ <td><a href="#rw-pseudos">The mutability pseudo-classes</a>
+ <td>3-UI/4
+ <tbody>
+ <tr>
+ <td><code>E:root</code>
+ <td>an E element, root of the document
+ <td><a href="#structural-pseudos">Structural pseudo-classes</a>
+ <td>3
+ <tr>
+ <td><code>E:empty</code>
+ <td>an E element that has no children (not even text nodes)
+ <td><a href="#structural-pseudos">Structural pseudo-classes</a>
+ <td>3
+ <tr>
+ <td><code>E:first-child</code>
+ <td>an E element, first child of its parent
+ <td><a href="#structural-pseudos">Structural pseudo-classes</a>
+ <td>2
+ <tr>
+ <td><code>E:nth-child(<var>n</var>)</code>
+ <td>an E element, the <var>n</var>-th child of its parent
+ <td><a href="#structural-pseudos">Structural pseudo-classes</a>
+ <td>3
+ <tr>
+ <td><code>E:last-child</code>
+ <td>an E element, last child of its parent
+ <td><a href="#structural-pseudos">Structural pseudo-classes</a>
+ <td>3
+ <tr>
+ <td><code>E:nth-last-child(<var>n</var>)</code>
+ <td>an E element, the <var>n</var>-th child of its parent,
+ counting from the last one
+ <td><a href="#structural-pseudos">Structural pseudo-classes</a>
+ <td>3
+ <tr>
+ <td><code>E:only-child</code>
+ <td>an E element, only child of its parent
+ <td><a href="#structural-pseudos">Structural pseudo-classes</a>
+ <td>3
+ <tr>
+ <td><code>E:first-of-type</code>
+ <td>an E element, first sibling of its type
+ <td><a href="#structural-pseudos">Structural pseudo-classes</a>
+ <td>3
+ <tr>
+ <td><code>E:nth-of-type(<var>n</var>)</code>
+ <td>an E element, the <var>n</var>-th sibling of its type
+ <td><a href="#structural-pseudos">Structural pseudo-classes</a>
+ <td>3
+ <tr>
+ <td><code>E:last-of-type</code>
+ <td>an E element, last sibling of its type
+ <td><a href="#structural-pseudos">Structural pseudo-classes</a>
+ <td>3
+ <tr>
+ <td><code>E:nth-last-of-type(<var>n</var>)</code>
+ <td>an E element, the <var>n</var>-th sibling of its type,
+ counting from the last one
+ <td><a href="#structural-pseudos">Structural pseudo-classes</a>
+ <td>3
+ <tr>
+ <td><code>E:only-of-type</code>
+ <td>an E element, only sibling of its type
+ <td><a href="#structural-pseudos">Structural pseudo-classes</a>
+ <td>3
+ <tr>
+ <td><code>E:nth-match(<var>n</var> of <var>selector</var>)</code>
+ <td>an E element, the <var>n</var>-th sibling matching <var>selector</var>
+ <td><a href="#structural-pseudos">Structural pseudo-classes</a>
+ <td>4
+ <tr>
+ <td><code>E:nth-match(<var>n</var> of <var>selector</var>)</code>
+ <td>an E element, the <var>n</var>-th sibling matching <var>selector</var>
+ <td><a href="#structural-pseudos">Structural pseudo-classes</a>
+ <td>4
+ <tbody>
+ <tr>
+ <td><code>E:column(<var>selector</var>)</code>
+ <td>an E element that represents a cell in a grid/table
+ belonging to a column represented by an element that matches
+ <var>selector</var>
+ <td><a href="#table-pseudos">Grid-Structural pseudo-classes</a>
+ <td>4
+ <tr>
+ <td><code>E:nth-column(<var>n</var>)</code>
+ <td>an E element that represents a cell belonging to the
+ <var>n</var>th column in a grid/table
+ <td><a href="#table-pseudos">Grid-Structural pseudo-classes</a>
+ <td>4
+ <tr>
+ <td><code>E:nth-last-column(<var>n</var>)</code>
+ <td>an E element that represents a cell belonging to the
+ <var>n</var>th column in a grid/table, counting from the last one
+ <td><a href="#table-pseudos">Grid-Structural pseudo-classes</a>
+ <td>4
+ <tbody>
+ <tr>
+ <td><code>E F</code>
+ <td>an F element descendant of an E element
+ <td><a href="#descendant-combinators">Descendant combinator</a>
+ <td>1
+ <tr>
+ <td><code>E > F</code>
+ <td>an F element child of an E element
+ <td><a href="#child-combinators">Child combinator</a>
+ <td>2
+ <tr>
+ <td><code>E + F</code>
+ <td>an F element immediately preceded by an E element
+ <td><a href="#adjacent-sibling-combinators">Adjacent sibling combinator</a>
+ <td>2
+ <tr>
+ <td><code>E ~ F</code>
+ <td>an F element preceded by an E element
+ <td><a href="#general-sibling-combinators">General sibling combinator</a>
+ <td>3
+ <tr>
+ <td><code>E /foo/ F</code>
+ <td>an F element ID-referenced by an E element's <code>foo</code> attribute
+ <td><a href="#idref-combinators">Reference combinator</a>
+ <td>4
+ <tr>
+ <td><code>$E > F</code>
+ <td>an E element parent of an E element
+ <td><a href="#subject">Determining the subject of a selector</a> +
+ <a href="#child-combinators">Child combinator</a>
+ <td>4
+ </tbody></table>
<p>The meaning of each selector is derived from the table above by
prepending "matches" to the contents of each cell in the "Meaning"
column.</p>
+ <p class="note">Some Level 4 selectors (noted above as "3-UI") were
+ introduced in [[CSS3UI]].
+
<h2 id=syntax>
Selector Syntax and Structure</h2>
@@ -1307,7 +1403,7 @@
and unvisited links differently.</p>
-<h3 id="here-pseudo">
+<h3 id="local-pseudo">
The local link pseudo-class '':local-link''</h3>
<p>The <code>:local-link</code> pseudo-class allows authors to style
@@ -1504,8 +1600,8 @@
<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>
+<h2 id="time-pseudos">
+Time-dimensional Pseudo-classes</h2>
<p>These pseudo-classes classify elements with respect to the
currently-displayed or active position in a time-dimensional canvas,
@@ -1761,7 +1857,7 @@
form elements are neither required nor optional.
<h3 id="rw-pseudos">
-The alterability pseudo-classes '':read-only'' and '':read-write''</h3>
+The mutability pseudo-classes '':read-only'' and '':read-write''</h3>
<p>An element whose contents are not user-alterable is
<code id="read-only-pseudo">:read-only</code>. However, elements whose contents are
@@ -1994,11 +2090,11 @@
<h3 id=nth-match>
'':nth-match()'' pseudo-class</h3>
- <p><code>:nth-match(<var>selector</var>, <var>a</var>n+<var>b</var>)</code>
+ <p><code>:nth-match(<var>a</var>n+<var>b</var> of <var>selector-list</var>)</code>
pseudo-class notation represents an element that has a parent and has
<var>a</var><code>n</code>+<var>b</var>-1 siblings that match the
- given <var>selector</var> <strong>before</strong> it in the document tree,
- for any zero or positive integer value of <code>n</code>.
+ given <var>selector-list</var> <strong>before</strong> it in the document
+ tree, for any zero or positive integer value of <code>n</code>.
<p>See <a href="#nth-child-pseudo"><code>:nth-child()</code></a>
pseudo-class for the syntax of its <var>a</var>n+<var>b</var> argument,
@@ -2010,11 +2106,11 @@
<h3 id=nth-last-match>
'':nth-last-match()'' pseudo-class</h3>
- <p><code>:nth-last-match(<var>selector</var>, <var>a</var>n+<var>b</var>)</code>
+ <p><code>:nth-last-match(<var>a</var>n+<var>b</var> of <var>selector-list</var>)</code>
pseudo-class notation represents an element that has a parent and has
<var>a</var><code>n</code>+<var>b</var>-1 siblings that match the
- given <var>selector</var> <strong>after</strong> it in the document tree,
- for any zero or positive integer value of <code>n</code>.
+ given <var>selector-list</var> <strong>after</strong> it in the document
+ tree, for any zero or positive integer value of <code>n</code>.
<p>See <a href="#nth-child-pseudo"><code>:nth-child()</code></a>
pseudo-class for the syntax of its <var>a</var>n+<var>b</var> argument,
@@ -2027,7 +2123,6 @@
<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.
-
<div class="example">
<p>Examples:</p>
<p>The following selector represents a <code>p</code> element that is
@@ -2162,6 +2257,30 @@
<code>:column()</code> are defined. In a column-primary format, these
pseudo-classes would match against row associations instead.
+<h3 id="column-pseudo">
+'':column()'' pseudo-class</h3>
+
+ <p>The <code>:column(<var>selector-list</var>)</code> pseudo-class notation
+ represents a cell element belonging to a column that is represented
+ by the element selected by its argument. Column membership is determined
+ based on the semantics of the document language only: whether and how the
+ elements are presented is not considered. If a cell element belongs to
+ more than one column, it is represented by a selector indicating any of
+ those columns.
+
+ <div class="example">
+ <p>The following example makes cells C, E, and G yellow.</p>
+ <pre>:column(col.selected) { background: yellow; }</pre>
+ <pre>
+<!-- --><table>
+<!-- --> <col span="2">
+<!-- --> <col class="selected">
+<!-- --> <tr><td>A <td>B <td>C
+<!-- --> <tr><td span="2">D <td>E
+<!-- --> <tr><td>F <td span="2">G
+<!-- --></table></pre>
+ </div>
+
<h3 id="nth-column-pseudo">
'':nth-column()'' pseudo-class</h3>
@@ -2199,30 +2318,6 @@
It also accepts the '<code>even</code>' and '<code>odd</code>' values
as arguments.
-<h3 id="column-pseudo">
-'':column()'' pseudo-class</h3>
-
- <p>The <code>:column(<var>selector</var>)</code> pseudo-class notation
- represents a cell element belonging to a column that is represented
- by the element selected by its argument. Column membership is determined
- based on the semantics of the document language only: whether and how the
- elements are presented is not considered. If a cell element belongs to
- more than one column, it is represented by a selector indicating any of
- those columns.
-
- <div class="example">
- <p>The following example makes cells C, E, and G yellow.</p>
- <pre>:column(col.selected) { background: yellow; }</pre>
- <pre>
-<!-- --><table>
-<!-- --> <col span="2">
-<!-- --> <col class="selected">
-<!-- --> <tr><td>A <td>B <td>C
-<!-- --> <tr><td span="2">D <td>E
-<!-- --> <tr><td>F <td span="2">G
-<!-- --></table></pre>
- </div>
-
<h2 id=combinators>
Combinators</h2>
@@ -2410,6 +2505,8 @@
<h2 id=formal-syntax>
Formal Syntax</h2>
+<p class="issue">This section needs to be updated.</p>
+
<h3 id=grammar>
Grammar</h3>
@@ -2575,50 +2672,52 @@
. return *yytext;</pre>
- <h2 id=profiling>Profiles</h2>
+<h2 id=profiling>
+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 components of that subset.</p>
- <p>Non normative examples:
+<h3 id=css-profiles>
+CSS Profiles</h3>
+
+ <p><em>This section is non-normative.</em><p>
+
+ <p>In CSS, selectors express pattern matching rules that determine which style
+ rules apply to elements in the document tree.
+
+ <p>The following selector (CSS level 2) will <b>match</b> all anchors <code>a</code>
+ with attribute <code>name</code> set inside a section 1 header <code>h1</code>:
+ <pre>h1 a[name]</pre>
+
+ <p>All CSS declarations attached to such a selector are applied to elements
+ matching it. </div>
- <div class="profile">
<table class="tprofile">
- <tbody>
- <tr>
- <th class="title" colspan=2>Selectors profile</th></tr>
+ <caption>CSS Level 1 Selectors Profile</caption>
<tr>
<th>Specification</th>
- <td>CSS level 1</td></tr>
+ <td><a href="http://www.w3.org/TR/CSS1/">CSS level 1</a>
<tr>
<th>Accepts</th>
<td>type selectors<br>class selectors<br>ID selectors<br>:link,
:visited and :active pseudo-classes<br>descendant combinator
- <br>::first-line and ::first-letter pseudo-elements</td></tr>
+ <br>::first-line and ::first-letter pseudo-elements
<tr>
- <th>Excludes</th>
- <td>
-
- <p>universal selector<br>attribute selectors<br>:hover and :focus
- pseudo-classes<br>:target pseudo-class<br>:lang() pseudo-class<br>all UI
- element states pseudo-classes<br>all structural
- pseudo-classes<br>negation pseudo-class<br>::before and ::after
- pseudo-elements<br>child combinators<br>sibling combinators
-
- <p>namespaces</td></tr>
+ <th>Excludes
+ <td>namespace prefixes
<tr>
<th>Extra constraints</th>
- <td>only one class selector allowed per compound selector</td></tr>
- </tbody></table>
+ <td>only one class selector allowed per compound selector,
+ pseudo-elements only accept one-colon syntax
+ </table>
<table class="tprofile">
- <tbody>
- <tr>
- <th class="title" colspan=2>Selectors profile</th></tr>
+ <caption>CSS Level 2 Selectors Profile</caption>
<tr>
<th>Specification</th>
- <td>CSS level 2</td></tr>
+ <td><a href="http://www.w3.org/TR/CSS2/">CSS level 2</a>
<tr>
<th>Accepts</th>
<td>type selectors<br>universal selector<br>attribute presence and
@@ -2628,65 +2727,44 @@
combinator<br>::first-line and ::first-letter pseudo-elements<br>::before
and ::after pseudo-elements</td></tr>
<tr>
- <th>Excludes</th>
- <td>
-
- <p>substring matching attribute
- selectors<br>:target pseudo-classes<br>all UI element
- states pseudo-classes<br>all structural pseudo-classes other
- than :first-child<br>negation pseudo-class
- <br>general sibling combinators
-
- <p>namespaces</td></tr>
+ <th>Excludes
+ <td>namespaces, case-insensitive attribute selectors
<tr>
<th>Extra constraints</th>
- <td>more than one class selector per compound selector (CSS1
- constraint) allowed</td></tr></tbody></table>
+ <td>pseudo-elements only accept one-colon syntax
+ </table>
- <p>In CSS, selectors express pattern matching rules that determine which style
- rules apply to elements in the document tree.
+<h3 id="stts-profile">
+STTS Profiles</h3>
- <p>The following selector (CSS level 2) will <b>match</b> all anchors <code>a</code>
- with attribute <code>name</code> set inside a section 1 header <code>h1</code>:
- <pre>h1 a[name]</pre>
+ <p><em>This section is non-normative.</em></p>
- <p>All CSS declarations attached to such a selector are applied to elements
- matching it. </div>
+ <p>Selectors can be used in STTS 3 in two different manners:
+ <ol>
+ <li>a selection mechanism equivalent to CSS selection mechanism: declarations
+ attached to a given selector are applied to elements matching that selector,
+ <li>fragment descriptions that appear on the right side of declarations.
+ </ol>
- <div class="profile">
<table class="tprofile">
- <tbody>
- <tr>
- <th class="title" colspan=2>Selectors profile</th></tr>
+ <caption>STTS3 Selectors Profile</caption>
<tr>
<th>Specification</th>
- <td>STTS 3</td>
+ <td><a href="http://www.w3.org/TR/NOTE-STTS3">STTS 3</a></td>
</tr>
<tr>
<th>Accepts</th>
- <td>
-
- <p>type selectors<br>universal selectors<br>attribute selectors<br>class
- selectors<br>ID selectors<br>all structural pseudo-classes<br>
- all combinators
-
- <p>namespaces</td></tr>
+ <td>type selectors<br>universal selectors<br>attribute selectors<br>class
+ selectors<br>ID selectors<br>level 3 structural pseudo-classes<br>
+ all combinators except reference combinator<br>namespaces</td></tr>
<tr>
- <th>Excludes</th>
- <td>non-accepted pseudo-classes<br>pseudo-elements<br></td></tr>
+ <th>Excludes
+ <td>namespaces, case-insensitive attribute selectors
<tr>
<th>Extra constraints</th>
<td>some selectors and combinators are not allowed in fragment
- descriptions on the right side of STTS declarations.</td></tr></tbody></table>
-
- <p>Selectors can be used in STTS 3 in two different
- manners:
- <ol>
- <li>a selection mechanism equivalent to CSS selection mechanism: declarations
- attached to a given selector are applied to elements matching that selector,
- <li>fragment descriptions that appear on the right side of declarations.
- </li></ol></div>
-
+ descriptions on the right side of STTS declarations.
+ </table>
<h2 id="conformance">
Conformance</h2>
@@ -2760,7 +2838,7 @@
Partial Implementations</h3>
<p>So that authors can exploit the forward-compatible parsing rules to
- assign fallback values, UAs <strong>must</strong>
+ trigger fallback behavior, UAs <strong>must</strong>
treat as <a href="#invalid">invalid</a> any selectors for which they have
no usable level of support.</p>
@@ -2797,10 +2875,11 @@
<p>In particular, the working group would like to extend special
thanks to the following for their specific contributions to Selectors
Level 4:
- L. David Baron
- Andrew Fedoniouk
- Ian Hickson
- Grey Hodge
+ L. David Baron,
+ Andrew Fedoniouk,
+ Ian Hickson,
+ Grey Hodge,
+ Lachlan Hunt,
Jason Cranford Teague
<h2 id=references>
Received on Tuesday, 27 September 2011 22:53:27 UTC