- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 06 Jul 2011 01:40:49 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/selectors4 In directory hutz:/tmp/cvs-serv29285 Modified Files: Overview.html Overview.src.html Log Message: Add column selectors Index: Overview.html =================================================================== RCS file: /sources/public/csswg/selectors4/Overview.html,v retrieving revision 1.18 retrieving revision 1.19 diff -u -d -r1.18 -r1.19 --- Overview.html 6 Jul 2011 00:25:01 -0000 1.18 +++ Overview.html 6 Jul 2011 01:40:47 -0000 1.19 @@ -254,8 +254,8 @@ :indeterminate pseudo-class</a> </ul> - <li><a href="#structural-pseudos"><span class=secno>11. </span> Structural - pseudo-classes</a> + <li><a href="#structural-pseudos"><span class=secno>11. </span> + Tree-Structural pseudo-classes</a> <ul class=toc> <li><a href="#root-pseudo"><span class=secno>11.1. </span> :root pseudo-class</a> @@ -300,27 +300,40 @@ [...1260 lines suppressed...] + <dt id=XML10>[XML10] - <dd>C. M. Sperberg-McQueen; et al. <a - href="http://www.w3.org/TR/2008/REC-xml-20081126/"><cite>Extensible - Markup Language (XML) 1.0 (Fifth Edition).</cite></a> 26 November 2008. - W3C Recommendation. URL: <a - href="http://www.w3.org/TR/2008/REC-xml-20081126/">http://www.w3.org/TR/2008/REC-xml-20081126/</a> - </dd> - <!----> - </dl> - <!--end-informative--> + <dd>C. M. Sperberg-McQueen; et al. <a + href="http://www.w3.org/TR/2008/REC-xml-20081126/"><cite>Extensible + Markup Language (XML) 1.0 (Fifth Edition).</cite></a> 26 November 2008. + W3C Recommendation. URL: <a + href="http://www.w3.org/TR/2008/REC-xml-20081126/">http://www.w3.org/TR/2008/REC-xml-20081126/</a> + </dd> + <!----> + </dl> + <!--end-informative--></div> Index: Overview.src.html =================================================================== RCS file: /sources/public/csswg/selectors4/Overview.src.html,v retrieving revision 1.20 retrieving revision 1.21 diff -u -d -r1.20 -r1.21 --- Overview.src.html 6 Jul 2011 00:25:01 -0000 1.20 +++ Overview.src.html 6 Jul 2011 01:40:47 -0000 1.21 @@ -1571,7 +1571,7 @@ are an example of :indeterminate state.</p> <h2 id=structural-pseudos> -Structural pseudo-classes</h2> +Tree-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 @@ -1945,6 +1945,80 @@ <pre><foo>this is not <bar>:empty</bar></foo></pre> </div> +<h2 id="table-pseudos"> +Grid-Structural Selectors</h2> + + <p>The double-association of a cell in a 2D grid (to its row and column) + cannot be represented by parentage in a hierarchical markup language. + Only one of those associations can be represented hierarchically: the + other must be explicitly or implicitly defined in the document language + semantics. In both HTML and DocBook, two of the most common hierarchical + markup languages, the markup is row-primary (that is, the row associations + are represented hierarchically); the columns must be implied. Thus the + <code>:nth-column()</code>, <code>:nth-last-column()</code>, and + <code>:column()</code> are defined. In a column-primary format, these + pseudo-classes would match against row associations instead. + +<h3 id="nth-column-pseudo"> +:nth-column() pseudo-class</h3> + + <p>The <code>:nth-column(<var>a</var>n+<var>b</var>)</code> + pseudo-class notation represents a cell element belonging to a column + that has <var>a</var><code>n</code>+<var>b</var>-1 columns + <strong>before</strong> it, for any positive + integer or zero value of <code>n</code>. 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. + + <p>See <a href="#nth-child-pseudo"><code>:nth-child()</code></a> pseudo-class + for the syntax of its argument. + It also accepts the '<code>even</code>' and '<code>odd</code>' values + as arguments. + + +<h3 id="nth-last-column-pseudo"> +:nth-last-column() pseudo-class</h3> + + <p>The <code>:nth-column(<var>a</var>n+<var>b</var>)</code> + pseudo-class notation represents a cell element belonging to a column + that has <var>a</var><code>n</code>+<var>b</var>-1 columns + <strong>after</strong> it, for any positive + integer or zero value of <code>n</code>. 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. + + <p>See <a href="#nth-child-pseudo"><code>:nth-child()</code></a> pseudo-class + for the syntax of its argument. + 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> + <h2 id=combinators> Combinators</h2> @@ -2064,6 +2138,36 @@ <pre>function a(x) = 12x/13.5</pre></pre> </div> +<h3 id=idref-combinator> +Reference combinators</h3> + + <p>The IDREF combinator consists of two slashes with an indetervening + <a href="http://www.w3.org/TR/css3-namespace/#css-qnames">CSS qualified + name</a>, and separates two compound selectors, e.g. <code>A /attr/ B</code>. + The elements represented by the two compound seletors are related in + that an element represented by the first compound selector has an + ID-reference to the element represented by the second compound selector. + The ID reference can be given as either an IDREF or a fragment URL: the + reference is valid as long as the value of the attribute named in the + combinator consists of either the ID alone or a hash mark (#) followed + by the ID. Attribute matching for reference combinators follow the same rules + as for <a href="http://www.w3.org/TR/css3-selectors/#attribute-selectors">attribute + selectors</a>. + + <div class="example"> + <p>The following example highlights an <code><input></code> element + when its + <a href="http://www.w3.org/TR/html40/interact/forms.html#h-17.9"><code><label></code> + is focused or hovered-over:</p> + <pre>label:matches(:hover, :focus) /for/ input, /* association by "for" attribute */ +<!-- -->label:matches(:hover, :focus):not([for]) input { /* association by containment */ +<!-- --> box-shadow: yellow 0 0 10px; }</pre> + </div> + + <p class="issue">This could also be implemented as a functional pseudo-class.</p> + +<h3 id=" + <h2 id=specificity> Calculating a selector's specificity</h2>
Received on Wednesday, 6 July 2011 01:40:50 UTC