- 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