- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 06 Jul 2011 00:20:27 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/selectors4 In directory hutz:/tmp/cvs-serv17059 Modified Files: Overview.html Overview.src.html Log Message: Shift :target section, add :current proposal <http://lists.w3.org/Archives/Public/www-style/2007Jul/0178.html> <http://wiki.csswg.org/ideas/current-url-selector> Index: Overview.html =================================================================== RCS file: /sources/public/csswg/selectors4/Overview.html,v retrieving revision 1.16 retrieving revision 1.17 diff -u -d -r1.16 -r1.17 --- Overview.html 27 Jun 2011 23:10:12 -0000 1.16 +++ Overview.html 6 Jul 2011 00:20:25 -0000 1.17 @@ -15,13 +15,13 @@ <h1 id=title>Selectors Level 4</h1> - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 27 June 2011</h2> + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 6 July 2011</h2> <dl> <dt>This version: - <dd> <!-- <a href="http://www.w3.org/TR/2011/ED-selectors4-20110627/"> - http://www.w3.org/TR/2011/PR-selectors4-20110627</a> --> + <dd> <!-- <a href="http://www.w3.org/TR/2011/ED-selectors4-20110706/"> + http://www.w3.org/TR/2011/PR-selectors4-20110706</a> --> <a href="http://dev.w3.org/csswg/selectors4"> http://dev.w3.org/csswg/selectors4</a> @@ -210,14 +210,17 @@ <li><a href="#dynamic-pseudos"><span class=secno>8. </span> Dynamic pseudo-classes</a> <ul class=toc> - <li><a href="#link"><span class=secno>8.1. </span> The link + <li><a href="#link"><span class=secno>8.1. </span> The link history pseudo-classes: :link and :visited</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="#here-pseudo"><span class=secno>8.2. </span> The link + location pseudo-class :current</a> <li><a href="#target-pseudo"><span class=secno>8.3. </span> The target pseudo-class :target</a> + + <li><a href="#useraction-pseudos"><span class=secno>8.4. </span> The + user action pseudo-classes :hover, :active, and :focus</a> </ul> <li><a href="#linguistic-pseudos"><span class=secno>9. </span> Linguistic @@ -1643,8 +1646,8 @@ <p>Dynamic pseudo-classes do not appear in the document source or document tree. - <h3 id=link><span class=secno>8.1. </span> The link pseudo-classes: :link - and :visited</h3> + <h3 id=link><span class=secno>8.1. </span> The link history 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 @@ -1667,9 +1670,9 @@ <p>Example:</p> <p>The following selector represents links carrying class - <code>external</code> and already visited:</p> + <code>footnote</code> and already visited:</p> - <pre>a.external:visited</pre> + <pre>.footnote:visited</pre> </div> <p class=note><strong>Note:</strong> It is possible for style sheet authors @@ -1680,7 +1683,129 @@ measures to preserve the user's privacy while rendering visited and unvisited links differently. - <h3 id=useraction-pseudos><span class=secno>8.2. </span> The user action + <h3 id=here-pseudo><span class=secno>8.2. </span> The link location + pseudo-class :current</h3> + + <p class=issue>This pseudo-class needs a better name. + + <p>The <code>:current</code> pseudo-class allows authors to style links + based on the users current location within a site and to differentiate + site-internal versus site-external links. The <code>:current</code> + pseudo-class represents an element that is the source anchor of a + hyperlink whose target matches the element's own document URI. The + fragment identifier of the document URI is stripped before matching + against the link's URI; otherwise all portions of the URI are considered. + + <div class=example> + <p>For example, the following rule prevents links targetting the current + page from being underlined when they are part of the navigation list: + + <pre>nav :current { text-decoration: none; }</pre> + </div> + + <p>The pseudo-class can also accept a non-negative integer as its sole + argument, which, if the document's URI is a URL, indicates the number of + path levels to match: an argument of zero represents a link element whose + target is in the same domain as the document's URI, ‘<code + class=css>1</code>’ represents a link element whose target has the + same domain and first path segment, ‘<code class=css>2</code>’ + represents a link element whose target has the same domain, first, and + second path segments, etc. Path segments are portions of the URL's path + that are separated by forward slashes (/). If a segment is missing from + the document's URL, a pseudo-class requiring that segment to match does + not match anything. Similarly if the document's URI is not a URL, the + pseudo-class does not match anything. The scheme, username, password, + port, query string, and fragment portions of the URL are not considered + when matching against <code>:current(<var>n</var>)</code>. + + <p class=issue>Is there such a thing as IRL? Because we do want this to + work for internationalized URLs, just not URNs. + + <div class=example> + <p>So, given the links: + + <ol> + <li><code><a href="http://www.example.com">Home</a></code> + + <li><code><a href="http://www.example.com/2011">2011</a></code> + + <li><code><a + href="https://www.example.com/2011/03">March</a></code> + + <li><code><a + href="http://www.example.com/2011/03/">March</a></code> + + <li><code><a href="http://example.com/2011/03">March</a></code> + </ol> + + <p>and the styles: + + <ol> + <li><code>a:current {...}</code> + + <li><code>a:current(0) {...}</code> + + <li><code>a:current(1) {...}</code> + + <li><code>a:current(2) {...}</code> + + <li><code>a:current(3) {...}</code> + </ol> + + <p>If the document's URI is <code>http://www.example.com/2011/03/</code>: + + <ol> + <li>Link 1 would receive Style 2 + + <li>Link 2 would receive Styles 2 and 3 + + <li>Link 3 would receive Styles 2, 3, and 4 + + <li>Link 4 would receive Style 1 + + <li>Link 5 would remain unstyled, and Style 5 would not be applied to + anything. + <ol></ol> + </ol> + </div> + + <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 + (called the fragment identifier). + + <p>URIs with fragment identifiers link to a certain element within the + document, known as the target element. For instance, here is a URI + pointing to an anchor named <code>section_2</code> in an HTML document: + + <pre>http://example.com/html/top.html#section_2</pre> + + <p>A target element can be represented by the <code>:target</code> + pseudo-class. If the document's URI has no fragment identifier, then the + document has no target element. + + <div class=example> + <p>Example:</p> + + <pre>p.note:target</pre> + + <p>This selector represents a <code>p</code> element of class + <code>note</code> that is the target element of the referring URI.</p> + </div> + + <div class=example> + <p>CSS example:</p> + + <p>Here, the <code>:target</code> pseudo-class is used to make the target + element red and place an image before it, if there is one:</p> + + <pre>*:target { color : red } + *:target::before { content : url(target.png) }</pre> + </div> + + <h3 id=useraction-pseudos><span class=secno>8.4. </span> The user action pseudo-classes :hover, :active, and :focus</h3> <p>Interactive user agents sometimes change the rendering in response to @@ -1751,42 +1876,6 @@ class=css>:link</code>’ and ‘<code class=css>:active</code>’). - <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 - (called the fragment identifier). - - <p>URIs with fragment identifiers link to a certain element within the - document, known as the target element. For instance, here is a URI - pointing to an anchor named <code>section_2</code> in an HTML document: - - <pre>http://example.com/html/top.html#section_2</pre> - - <p>A target element can be represented by the <code>:target</code> - pseudo-class. If the document's URI has no fragment identifier, then the - document has no target element. - - <div class=example> - <p>Example:</p> - - <pre>p.note:target</pre> - - <p>This selector represents a <code>p</code> element of class - <code>note</code> that is the target element of the referring URI.</p> - </div> - - <div class=example> - <p>CSS example:</p> - - <p>Here, the <code>:target</code> pseudo-class is used to make the target - element red and place an image before it, if there is one:</p> - - <pre>*:target { color : red } - *:target::before { content : url(target.png) }</pre> - </div> - <h2 id=linguistic-pseudos><span class=secno>9. </span> Linguistic Pseudo-classes</h2> @@ -2959,11 +3048,11 @@ <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> specifications over the years, as those specifications formed the basis - for this one. <!-- - <p>In particular, the working group would like to extend special - thanks to ---> - + for this one. + + <p>In particular, the working group would like to extend special thanks to + the following for their specific contributions to Selectors Level 4: + Andrew Fedoniouk Ian Hickson Grey Hodge Jason Cranford Teague <h2 id=references><span class=secno>18. </span> References</h2> Index: Overview.src.html =================================================================== RCS file: /sources/public/csswg/selectors4/Overview.src.html,v retrieving revision 1.18 retrieving revision 1.19 diff -u -d -r1.18 -r1.19 --- Overview.src.html 27 Jun 2011 23:10:12 -0000 1.18 +++ Overview.src.html 6 Jul 2011 00:20:25 -0000 1.19 @@ -1206,7 +1206,7 @@ <h3 id=link> -The link pseudo-classes: :link and :visited</h3> +The link history pseudo-classes: :link and :visited</h3> <p>User agents commonly display unvisited links differently from previously visited ones. Selectors @@ -1230,9 +1230,9 @@ <p>Example:</p> <p>The following selector represents links carrying class - <code>external</code> and already visited:</p> + <code>footnote</code> and already visited:</p> - <pre>a.external:visited</pre> + <pre>.footnote:visited</pre> </div> @@ -1244,6 +1244,107 @@ other measures to preserve the user's privacy while rendering visited and unvisited links differently.</p> + +<h3 id="here-pseudo"> +The link location pseudo-class :current</h3> + + <p class="issue">This pseudo-class needs a better name.</p> + + <p>The <code>:current</code> pseudo-class allows authors to style + links based on the users current location within a site and to + differentiate site-internal versus site-external links. The + <code>:current</code> pseudo-class represents an element that is + the source anchor of a hyperlink whose target matches the element's + own document URI. The fragment identifier of the document URI + is stripped before matching against the link's URI; otherwise all + portions of the URI are considered. + + <div class="example"> + <p>For example, the following rule prevents links targetting the + current page from being underlined when they are part of the + navigation list: + <pre>nav :current { text-decoration: none; }</pre> + </div> + + <p>The pseudo-class can also accept a non-negative integer as its sole + argument, which, if the document's URI is a URL, indicates the number + of path levels to match: an argument of zero represents a link element + whose target is in the same domain as the document's URI, ''1'' + represents a link element whose target has the same domain and first + path segment, ''2'' represents a link element whose target has the same + domain, first, and second path segments, etc. Path segments are portions + of the URL's path that are separated by forward slashes (/). If a segment + is missing from the document's URL, a pseudo-class requiring that segment + to match does not match anything. Similarly if the document's URI is + not a URL, the pseudo-class does not match anything. The scheme, + username, password, port, query string, and fragment portions of the + URL are not considered when matching against + <code>:current(<var>n</var>)</code>. + + <p class="issue">Is there such a thing as IRL? Because we do want this + to work for internationalized URLs, just not URNs.</p> + + <div class="example"> + <p>So, given the links: + <ol> + <li><code><a href="http://www.example.com">Home</a></code> + <li><code><a href="http://www.example.com/2011">2011</a></code> + <li><code><a href="https://www.example.com/2011/03">March</a></code> + <li><code><a href="http://www.example.com/2011/03/">March</a></code> + <li><code><a href="http://example.com/2011/03">March</a></code> + </ol> + <p>and the styles: + <ol> + <li><code>a:current {...}</code> + <li><code>a:current(0) {...}</code> + <li><code>a:current(1) {...}</code> + <li><code>a:current(2) {...}</code> + <li><code>a:current(3) {...}</code> + </ol> + <p>If the document's URI is <code>http://www.example.com/2011/03/</code>: + <ol> + <li>Link 1 would receive Style 2 + <li>Link 2 would receive Styles 2 and 3 + <li>Link 3 would receive Styles 2, 3, and 4 + <li>Link 4 would receive Style 1 + <li>Link 5 would remain unstyled, and Style 5 would not be applied to anything. + <ol> + </div> + +<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 + identifier (called the fragment identifier).</p> + + <p>URIs with fragment identifiers link to a certain element within the + document, known as the target element. For instance, here is a URI + pointing to an anchor named <code>section_2</code> in an HTML + document:</p> + + <pre>http://example.com/html/top.html#section_2</pre> + + <p>A target element can be represented by the <code>:target</code> + pseudo-class. If the document's URI has no fragment identifier, then + the document has no target element.</p> + + <div class="example"> + <p>Example:</p> + <pre>p.note:target</pre> + <p>This selector represents a <code>p</code> element of class + <code>note</code> that is the target element of the referring + URI.</p> + </div> + + <div class="example"> + <p>CSS example:</p> + <p>Here, the <code>:target</code> pseudo-class is used to make the + target element red and place an image before it, if there is one:</p> + <pre>*:target { color : red } + *:target::before { content : url(target.png) }</pre> + </div> + <h3 id=useraction-pseudos> The user action pseudo-classes :hover, :active, and :focus</h3> @@ -1309,40 +1410,6 @@ <p class="note"><strong>Note:</strong> An element can be both ':visited' and ':active' (or ':link' and ':active').</p> -<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 - identifier (called the fragment identifier).</p> - - <p>URIs with fragment identifiers link to a certain element within the - document, known as the target element. For instance, here is a URI - pointing to an anchor named <code>section_2</code> in an HTML - document:</p> - - <pre>http://example.com/html/top.html#section_2</pre> - - <p>A target element can be represented by the <code>:target</code> - pseudo-class. If the document's URI has no fragment identifier, then - the document has no target element.</p> - - <div class="example"> - <p>Example:</p> - <pre>p.note:target</pre> - <p>This selector represents a <code>p</code> element of class - <code>note</code> that is the target element of the referring - URI.</p> - </div> - - <div class="example"> - <p>CSS example:</p> - <p>Here, the <code>:target</code> pseudo-class is used to make the - target element red and place an image before it, if there is one:</p> - <pre>*:target { color : red } - *:target::before { content : url(target.png) }</pre> - </div> - <h2 id="linguistic-pseudos"> Linguistic Pseudo-classes</h2> @@ -2401,10 +2468,13 @@ to the <a href="http://www.w3.org/TR/css3-selectors">previous Selectors</a> specifications over the years, as those specifications formed the basis for this one. -<!-- <p>In particular, the working group would like to extend special - thanks to ---> + thanks to the following for their specific contributions to Selectors + Level 4: + Andrew Fedoniouk + Ian Hickson + Grey Hodge + Jason Cranford Teague <h2 id=references> References</h2>
Received on Wednesday, 6 July 2011 00:20:29 UTC