Skip to content

Commit 59575a7

Browse files
committed
[selectors-nonelement] Light rewrite.
--HG-- rename : selectors-nonelement/Overview.src.html => selectors-nonelement/Overview.bs
1 parent 8fe09b1 commit 59575a7

3 files changed

Lines changed: 97 additions & 199 deletions

File tree

selectors-nonelement/Overview.bs

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<h1>Non-element Selectors</h1>
2+
3+
<pre class='metadata'>
4+
Group: csswg
5+
Shortname: selectors-nonelement
6+
Level: 1
7+
Status: ED
8+
ED: http://dev.w3.org/csswg/selectors-nonelement/
9+
Editor: Jirka Kosek, Invited Expert, jirka@kosek.cz
10+
Abstract: Non-element Selectors extends [[!SELECTORS4]] and allow selecting other kinds of document nodes then elements. This is useful when selectors are used as a general document query language.
11+
Abstract: Non-element Selectors are not intended to be used in CSS, but only as a separate query language in other host environments.
12+
</pre>
13+
14+
<h2 id="intro">
15+
Introduction</h2>
16+
17+
Selectors are a very popular mechanism for selecting things in HTML and XML content.
18+
They are not used only in CSS [[CSS3SYN]]
19+
but also as a standalone query language in libraries like <a href="http://jquery.com/">jQuery</a>,
20+
in newer standardized browser APIs like [[SELECTORS-API]]
21+
and in other Web standards like <a href="http://www.w3.org/TR/its20/">ITS 2.0</a>.
22+
23+
The [[SELECTORS4]] specification only defines selectors for selecting element nodes from the document,
24+
but some uses of Selectors would like to select other types of nodes as well.
25+
This specification extends [[SELECTORS4]] with additional selectors
26+
that can be used for selecting non-element nodes in a document tree.
27+
28+
Note: Currently the draft only defines means for selecting and matching attribute nodes,
29+
but other kinds of nodes, such as comments or processing instructions, might be supported in the future.
30+
31+
<h2 id="non-element-selectors">
32+
Non-element Selectors</h2>
33+
34+
<h3 id="attribute-node-selector">
35+
Attribute node selector</h3>
36+
37+
An <dfn export>attribute node pseudo-element</dfn> represents an attribute node in a document tree.
38+
Its syntax is:
39+
40+
<pre class='prod'><dfn selector>::attr()</dfn> = ::attr( <<qualified-name>> )</pre>
41+
42+
Where <dfn>&lt;qualified-name></dfn> is a <a spec=css-namespaces>CSS qualified name</a>.
43+
44+
The pseudo-element matches an attribute node with the given qualified name,
45+
if such an attribute exists on the <a spec=selectors>originating element</a>.
46+
47+
<div class="example">
48+
For example,
49+
the selector ''::attr(title)'' selects all the <code>title</code> attributes in the document.
50+
</div>
51+
52+
<div class="example">
53+
TODO: Provide a real-world example from ITS or something.
54+
</div>
55+
56+
In CSS, <a>attribute node pseudo-elements</a> never generate boxes.

selectors-nonelement/Overview.html

Lines changed: 41 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
</p>
5555
<h1 class="p-name no-ref" id=title>Non-element Selectors</h1>
5656
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
57-
<span class=dt-updated><span class=value-title title=20140205>5 February 2014</span></span></span></h2>
57+
<span class=dt-updated><span class=value-title title=20140213>13 February 2014</span></span></span></h2>
5858
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/selectors-nonelement/>http://dev.w3.org/csswg/selectors-nonelement/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/selectors-nonelement/>http://dev.w3.org/csswg/selectors-nonelement/</a>
5959
<dt>Feedback:</dt>
6060
<dd><a href="mailto:www-style@w3.org?subject=%5Bselectors-nonelement%5D%20feedback">www-style@w3.org</a>
@@ -105,8 +105,10 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=status><span class=c
105105
<div data-fill-with=at-risk></div>
106106

107107
<h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class=content>Table of contents</span></h2>
108-
<div data-fill-with=table-of-contents><ul class=toc><li><a href=#intro><span class=secno>1</span>Introduction</a><li><a href=#syntax><span class=secno>2</span>Non-element Selector Syntax and Structure</a><li><a href=#non-element-selectors><span class=secno>3</span>Non-element Selectors</a><ul class=toc><li><a href=#attribute-node-selector><span class=secno>3.1</span>Attribute node selector</a><ul class=toc><li><a href=#ans-nmsp><span class=secno>3.1.1</span>
109-
Attribute node selector and namespaces</a></ul></ul><li><a href=#conformance><span class=secno></span>
108+
<div data-fill-with=table-of-contents><ul class=toc><li><a href=#intro><span class=secno>1</span>
109+
Introduction</a><li><a href=#non-element-selectors><span class=secno>2</span>
110+
Non-element Selectors</a><ul class=toc><li><a href=#attribute-node-selector><span class=secno>2.1</span>
111+
Attribute node selector</a></ul><li><a href=#conformance><span class=secno></span>
110112
Conformance</a><ul class=toc><li><a href=#conventions><span class=secno></span>
111113
Document conventions</a><li><a href=#conformance-classes><span class=secno></span>
112114
Conformance classes</a><li><a href=#partial><span class=secno></span>
@@ -119,102 +121,51 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class
119121
Index</a><li><a href=#property-index><span class=secno></span>
120122
Property index</a></ul></div>
121123

122-
123124

124125

125126

126-
<h2 class="heading settled heading" data-level=1 id=intro><span class=secno>1 </span><span class=content>Introduction</span><a class=self-link href=#intro></a></h2>
127+
<h2 class="heading settled heading" data-level=1 id=intro><span class=secno>1 </span><span class=content>
128+
Introduction</span><a class=self-link href=#intro></a></h2>
127129

128-
<p>Selectors are very popular selection mechanism for HTML and XML
129-
content. They are not used only in CSS <a data-biblio-type=informative data-link-type=biblio href=#css3syn title=css3syn>[CSS3SYN]</a> but also as a
130-
standalone query language in libraries like <a href=http://jquery.com/>jQuery</a>, in a newer standardized browser
131-
APIs like <a data-biblio-type=informative data-link-type=biblio href=#selectors-api title=selectors-api>[SELECTORS-API]</a> or in another Web standards like <a href=http://www.w3.org/TR/its20/>ITS 2.0</a>. <a data-biblio-type=informative data-link-type=biblio href=#selectors4 title=selectors4>[SELECTORS4]</a> are
132-
able to select just element nodes from the document tree which is
133-
limiting for some use-cases. This specification extends <a data-biblio-type=informative data-link-type=biblio href=#selectors4 title=selectors4>[SELECTORS4]</a>
134-
with additional selectors that can be used for selecting other kinds
135-
of nodes in a document tree. Currently the draft only defines means for
136-
selecting and matching attribute nodes, but in future, based on
137-
feedback, other kinds of nodes like comments or processing
138-
instructions might be supported.</p>
130+
<p> Selectors are a very popular mechanism for selecting things in HTML and XML content.
131+
They are not used only in CSS <a data-biblio-type=informative data-link-type=biblio href=#css3syn title=css3syn>[CSS3SYN]</a>
132+
but also as a standalone query language in libraries like <a href=http://jquery.com/>jQuery</a>,
133+
in newer standardized browser APIs like <a data-biblio-type=informative data-link-type=biblio href=#selectors-api title=selectors-api>[SELECTORS-API]</a>
134+
and in other Web standards like <a href=http://www.w3.org/TR/its20/>ITS 2.0</a>.
139135

140-
<h2 class="heading settled heading" data-level=2 id=syntax><span class=secno>2 </span><span class=content>Non-element Selector Syntax and Structure</span><a class=self-link href=#syntax></a></h2>
136+
<p> The <a data-biblio-type=informative data-link-type=biblio href=#selectors4 title=selectors4>[SELECTORS4]</a> specification only defines selectors for selecting element nodes from the document,
137+
but some uses of Selectors would like to select other types of nodes as well.
138+
This specification extends <a data-biblio-type=informative data-link-type=biblio href=#selectors4 title=selectors4>[SELECTORS4]</a> with additional selectors
139+
that can be used for selecting non-element nodes in a document tree.
141140

142-
<p>Syntax and structure is the same as in <a data-biblio-type=informative data-link-type=biblio href=#selectors4 title=selectors4>[SELECTORS4]</a> with the following exception:</p>
141+
<p class=note> Note: Currently the draft only defines means for selecting and matching attribute nodes,
142+
but other kinds of nodes, such as comments or processing instructions, might be supported in the future.
143143

144-
<p><ul>
145-
<li>A <a data-link-spec=SELECTORS4 href=../selectors/Overview.html#simple>simple selector</a> can be also <a data-link-type=dfn href=#attribute-node-selector0 title="attribute node selector">attribute node selector</a>.
146-
</ul>
144+
<h2 class="heading settled heading" data-level=2 id=non-element-selectors><span class=secno>2 </span><span class=content>
145+
Non-element Selectors</span><a class=self-link href=#non-element-selectors></a></h2>
147146

148-
<h2 class="heading settled heading" data-level=3 id=non-element-selectors><span class=secno>3 </span><span class=content>Non-element Selectors</span><a class=self-link href=#non-element-selectors></a></h2>
147+
<h3 class="heading settled heading" data-level=2.1 id=attribute-node-selector><span class=secno>2.1 </span><span class=content>
148+
Attribute node selector</span><a class=self-link href=#attribute-node-selector></a></h3>
149149

150-
<h3 class="heading settled heading" data-level=3.1 id=attribute-node-selector><span class=secno>3.1 </span><span class=content>Attribute node selector</span><a class=self-link href=#attribute-node-selector></a></h3>
150+
<p> An <dfn data-dfn-type=dfn data-export="" id=attribute-node-pseudo-element>attribute node pseudo-element<a class=self-link href=#attribute-node-pseudo-element></a></dfn> represents an attribute node in a document tree.
151+
Its syntax is:
151152

152-
<p>A <dfn data-dfn-type=dfn data-noexport="" id=attribute-node-selector0>attribute node selector<a class=self-link href=#attribute-node-selector0></a></dfn> represents an attribute node
153-
in a document tree. It’s written using <code>::attr(<a href=http://www.w3.org/TR/css3-namespace/#css-qnames>CSS qualified
154-
name</a>)</code> syntax <a data-biblio-type=normative data-link-type=biblio href=#css3namespace title=css3namespace>[CSS3NAMESPACE]</a>.</p>
153+
<pre class=prod><dfn class=css-code data-dfn-type=selector data-export="" id=selectordef-attr>::attr()<a class=self-link href=#selectordef-attr></a></dfn> = ::attr( <a class="production css-code" data-link-type=type href=#typedef-qualified-name title="<qualified-name>">&lt;qualified-name&gt;</a> )</pre>
154+
<p> Where <dfn class=css-code data-dfn-type=type data-export="" id=typedef-qualified-name>&lt;qualified-name&gt;<a class=self-link href=#typedef-qualified-name></a></dfn> is a <a data-link-spec=css-namespaces data-link-type=dfn href=http://dev.w3.org/csswg/css-namespaces-1/#css-qualified-name title="css qualified name">CSS qualified name</a>.
155155

156-
<div class=example>
157-
<p>Example:
158-
<p>The following selector represents <code>title</code> attributes in the document tree:
159-
<pre>::attr(title)</pre>
160-
</div>
161-
162-
<h4 class="heading settled heading" data-level=3.1.1 id=ans-nmsp><span class=secno>3.1.1 </span><span class=content>
163-
Attribute node selector and namespaces</span><a class=self-link href=#ans-nmsp></a></h4>
164-
165-
<p>Attribute node selectors allow an optional namespace component: a namespace
166-
prefix that has been previously <a href=#nsdecl>declared</a> may be
167-
prepended to the attribute name separated by the namespace separator
168-
"vertical bar" (U+007C, <code>|</code>). (See, e.g.,
169-
<a data-biblio-type=informative data-link-type=biblio href=#xml-names title=xml-names>[XML-NAMES]</a> for the use of namespaces in XML.)
170-
171-
<p>The namespace component may be left empty (no prefix before the
172-
namespace separator) to indicate that the selector is only to
173-
represent attributes with no namespace.
174-
175-
<p>An asterisk may be used for the namespace prefix, indicating that
176-
the selector represents attributes in any namespace (including attributes
177-
with no namespace).
178-
179-
<p>An attribute node selector containing a namespace prefix that has not been
180-
previously <a href=#nsdecl>declared</a> for namespaced selectors is
181-
an <a href=#conformance>invalid</a> selector.
182-
183-
<p>In a namespace-aware client, the name part of attribute node
184-
selectors (the part after the namespace separator, if it is present)
185-
will only match against the <a href=http://www.w3.org/TR/REC-xml-names/#NT-LocalPart>local part</a>
186-
of the attribute’s <a href=http://www.w3.org/TR/REC-xml-names/#ns-qualnames>qualified
187-
name</a>.
188-
189-
<p>In summary:
190-
191-
<dl>
192-
<dt><code>ns|A</code>
193-
<dd>attributes with name A in namespace ns
194-
<dt><code>*|A</code>
195-
<dd>attributes with name A in any namespace, including those without a
196-
namespace
197-
<dt><code>|A</code>
198-
<dd>attributes with name A without a namespace
199-
<dt><code>A</code>
200-
<dd>attributes with name A without a namespace
201-
</dl>
202-
203-
<div class=example>
204-
<p>Examples:
205-
206-
<p>Following examples assume that prefix <code>xlink</code> is
207-
bound to the <code>http://www.w3.org/1999/xlink</code> namespace
208-
(XLink namespace).
209-
210-
<pre>xlink:title /* title attribute in XLink namespace */
211-
title /* title attribute in no namespace, for example title as used in HTML language */
212-
*|title /* any title attribute */</pre>
213-
214-
</div>
156+
<p> The pseudo-element matches an attribute node with the given qualified name,
157+
if such an attribute exists on the <a data-link-spec=selectors data-link-type=dfn href=http://dev.w3.org/csswg/selectors-4/#originating-element title="originating element">originating element</a>.
215158

159+
<div class=example>
160+
For example,
161+
the selector <span class=css data-link-type=maybe title=::attr(title)>::attr(title)</span> selects all the <code>title</code> attributes in the document.
162+
</div>
216163

164+
<div class=example>
165+
TODO: Provide a real-world example from ITS or something.
166+
</div>
217167

168+
<p> In CSS, <a data-link-type=dfn href=#attribute-node-pseudo-element title="attribute node pseudo-elements">attribute node pseudo-elements</a> never generate boxes.
218169

219170
<h2 class="no-ref no-num heading settled heading" id=conformance><span class=content>
220171
Conformance</span><a class=self-link href=#conformance></a></h2>
@@ -341,16 +292,18 @@ <h2 class="no-num no-ref heading settled heading" id=references><span class=cont
341292

342293
<h3 class="no-num no-ref heading settled heading" id=normative><span class=content>
343294
Normative References</span><a class=self-link href=#normative></a></h3>
344-
<div data-fill-with=normative-references><dl><dt id=css3namespace title=CSS3NAMESPACE><a class=self-link href=#css3namespace></a>[CSS3NAMESPACE]<dd>Elika J. Etemad; Anne van Kesteren. <a href=http://www.w3.org/TR/2011/REC-css3-namespace-20110929/>CSS Namespaces Module</a>. 29 September 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-css3-namespace-20110929/>http://www.w3.org/TR/2011/REC-css3-namespace-20110929/</a><dt id=rfc2119 title=RFC2119><a class=self-link href=#rfc2119></a>[RFC2119]<dd>S. Bradner. <a href=http://www.ietf.org/rfc/rfc2119.txt>Key words for use in RFCs to Indicate Requirement Levels</a>. URL: <a href=http://www.ietf.org/rfc/rfc2119.txt>http://www.ietf.org/rfc/rfc2119.txt</a><dt id=selectors4 title=SELECTORS4><a class=self-link href=#selectors4></a>[SELECTORS4]<dd>Elika J. Etemad; Tab Atkins Jr.. <a href=http://www.w3.org/TR/2013/WD-selectors4-20130502/>Selectors Level 4</a>. 2 May 2013. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/WD-selectors4-20130502/>http://www.w3.org/TR/2013/WD-selectors4-20130502/</a></dl></div>
295+
<div data-fill-with=normative-references><dl><dt id=rfc2119 title=RFC2119><a class=self-link href=#rfc2119></a>[RFC2119]<dd>S. Bradner. <a href=http://www.ietf.org/rfc/rfc2119.txt>Key words for use in RFCs to Indicate Requirement Levels</a>. URL: <a href=http://www.ietf.org/rfc/rfc2119.txt>http://www.ietf.org/rfc/rfc2119.txt</a><dt id=selectors4 title=SELECTORS4><a class=self-link href=#selectors4></a>[SELECTORS4]<dd>Elika J. Etemad; Tab Atkins Jr.. <a href=http://www.w3.org/TR/2013/WD-selectors4-20130502/>Selectors Level 4</a>. 2 May 2013. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/WD-selectors4-20130502/>http://www.w3.org/TR/2013/WD-selectors4-20130502/</a></dl></div>
345296

346297
<h3 class="no-num no-ref heading settled heading" id=informative><span class=content>
347298
Informative References</span><a class=self-link href=#informative></a></h3>
348-
<div data-fill-with=informative-references><dl><dt id=css3syn title=CSS3SYN><a class=self-link href=#css3syn></a>[CSS3SYN]<dd>L. David Baron. <a href=http://www.w3.org/TR/2003/WD-css3-syntax-20030813>CSS3 module: Syntax</a>. 13 August 2003. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2003/WD-css3-syntax-20030813>http://www.w3.org/TR/2003/WD-css3-syntax-20030813</a><dt id=selectors-api title=SELECTORS-API><a class=self-link href=#selectors-api></a>[SELECTORS-API]<dd>Anne van Kesteren; Lachlan Hunt. <a href=http://www.w3.org/TR/2013/REC-selectors-api-20130221/>Selectors API Level 1</a>. 21 February 2013. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2013/REC-selectors-api-20130221/>http://www.w3.org/TR/2013/REC-selectors-api-20130221/</a><dt id=xml-names title=XML-NAMES><a class=self-link href=#xml-names></a>[XML-NAMES]<dd>Tim Bray; et al. <a href=http://www.w3.org/TR/2009/REC-xml-names-20091208/>Namespaces in XML 1.0 (Third Edition)</a>. 8 December 2009. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2009/REC-xml-names-20091208/>http://www.w3.org/TR/2009/REC-xml-names-20091208/</a></dl></div>
299+
<div data-fill-with=informative-references><dl><dt id=css3syn title=CSS3SYN><a class=self-link href=#css3syn></a>[CSS3SYN]<dd>Tab Atkins Jr.; Simon Sapin. <a href=http://www.w3.org/TR/2013/WD-css-syntax-3-20131105/>CSS Syntax Module</a>. 5 November 2013. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/WD-css-syntax-3-20131105/>http://www.w3.org/TR/2013/WD-css-syntax-3-20131105/</a><dt id=selectors-api title=SELECTORS-API><a class=self-link href=#selectors-api></a>[SELECTORS-API]<dd>Anne van Kesteren; Lachlan Hunt. <a href=http://www.w3.org/TR/2013/REC-selectors-api-20130221/>Selectors API Level 1</a>. 21 February 2013. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2013/REC-selectors-api-20130221/>http://www.w3.org/TR/2013/REC-selectors-api-20130221/</a></dl></div>
349300

350301
<h2 class="no-num no-ref heading settled heading" id=index><span class=content>
351302
Index</span><a class=self-link href=#index></a></h2>
352303
<div data-fill-with=index><ul class=indexlist>
353-
<li>attribute node selector, <a href=#attribute-node-selector0 title="section 3.1">3.1</a>
304+
<li>::attr(), <a href=#selectordef-attr title="section 2.1">2.1</a>
305+
<li>attribute node pseudo-element, <a href=#attribute-node-pseudo-element title="section 2.1">2.1</a>
306+
<li>&lt;qualified-name&gt;, <a href=#typedef-qualified-name title="section 2.1">2.1</a>
354307
</ul></div>
355308

356309
<h2 class="no-num no-ref heading settled heading" id=property-index><span class=content>

0 commit comments

Comments
 (0)