Skip to content

Commit 4c28983

Browse files
dbarondbaron
committed
[selectors-5] Create selectors-5 delta spec draft from deferred-for-level-5 file.
As part of the resolution in #4805 and as a followup to #8213, this moves the deferred-for-level-5 file from the selectors-4 directory into a new selectors-5 delta spec.
1 parent 4ee0078 commit 4c28983

File tree

1 file changed

+114
-39
lines changed

1 file changed

+114
-39
lines changed

‎selectors-4/deferred-for-level-5 renamed to ‎selectors-5/Overview.bs

Lines changed: 114 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,42 @@
1-
<h3 id="idref-combinators">
2-
Reference combinators <code>/ref/</code></h3>
3-
4-
The <dfn export>reference combinator</dfn> consists of two slashes
5-
with an intervening <a href="http://www.w3.org/TR/css3-namespace/#css-qnames">CSS qualified name</a>,
6-
and separates two <a>compound selectors</a>,
7-
e.g. ''A /attr/ B''.
8-
The element represented by the first <a>compound selector</a>
9-
explicitly references
10-
the element represented by the second <a>compound selector</a>.
11-
Unless the host language defines a different syntax for expressing this relationship,
12-
this relationship is considered to exist if
13-
the value of the specified attribute on the first element is an IDREF or an <a>ID selector</a>
14-
referencing the second element.
15-
16-
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>.
17-
18-
<div class="example">
19-
The following example highlights an <a element>input</a> element
20-
when its <a href="http://www.w3.org/TR/html40/interact/forms.html#h-17.9"><code>&lt;label></code></a>
21-
is focused or hovered-over:
22-
23-
<pre>
24-
label:is(:hover, :focus) /for/ input, /* association by "for" attribute */
25-
label:is(:hover, :focus):not([for]) input { /* association by containment */
26-
box-shadow: yellow 0 0 10px;
27-
}
28-
</pre>
29-
</div>
30-
31-
1+
<pre class='metadata'>
2+
Title: Selectors Level 5
3+
Group: CSSWG
4+
Shortname: selectors
5+
Level: 5
6+
Status: ED
7+
Work Status: Exploring
8+
ED: https://drafts.csswg.org/selectors-5/
9+
TR: https://www.w3.org/TR/selectors-5/
10+
Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400
11+
Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/, w3cid 42199
12+
Abstract: <a>Selectors</a> are patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in a document. Selectors have been optimized for use with HTML and XML, and are designed to be usable in performance-critical code. They are a core component of <abbr title="Cascading Style Sheets">CSS</abbr> (Cascading Style Sheets), which uses Selectors to bind style properties to elements in the document.
13+
Abstract: Selectors Level 5 describes the selectors that already exist in [[!selectors-4]], and further introduces new selectors for CSS and other languages that may need them.
14+
</pre>
15+
<pre class="link-defaults">
16+
spec:selectors-4; type:dfn; text:selector
17+
</pre>
18+
19+
<h2 id="intro">
20+
Introduction</h2>
21+
22+
ISSUE: <strong>This is a diff spec against
23+
<a href="https://www.w3.org/TR/selectors-4/">Selectors Level 4</a>.</strong>
24+
25+
<h3 id="placement">
26+
Module Interactions</h3>
27+
28+
This module extends
29+
the set of selectors defined for CSS in [[selectors-4]].
30+
31+
<h2 id="location">
32+
Location Pseudo-classes</h2>
3233

3334
<h3 id="local-pseudo">
3435
The local link pseudo-class '':local-link''</h3>
3536

3637
The <dfn id='local-link-pseudo'>:local-link</dfn> pseudo-class allows authors to style
37-
<a href="#the-any-link-pseudo">hyperlinks</a> based on the users current location within a site and to
38+
[[selectors-4#the-any-link-pseudo|hyperlinks]]
39+
based on the users current location within a site and to
3840
differentiate site-internal versus site-external links.
3941

4042
The (non-functional) '':local-link'' pseudo-class represents an element that is
@@ -115,7 +117,7 @@ The local link pseudo-class '':local-link''</h3>
115117

116118
The "origin" of the URL is defined by <a href="http://tools.ietf.org/html/rfc6454#section-4">RFC 6454, Section 4</a>.
117119
The username, password, query string, and fragment portions of the URL are not considered
118-
when matching against '':local-link(<var>n</var>)''.
120+
when matching against '':local-link(<var ignore>n</var>)''.
119121
If the document's URL does not belong to a hierarchical scheme,
120122
the functional pseudo-class matches nothing.
121123

@@ -128,13 +130,86 @@ The local link pseudo-class '':local-link''</h3>
128130
and the link is same-page?
129131
Should "null segments" count as matching, or not?
130132

131-
<h3 id="custom-state">Exposing custom state: the '':state()'' pseudo-class</h3>
133+
<h2 id="custom-state">
134+
Exposing custom state: the '':state()'' pseudo-class</h2>
135+
136+
The <dfn selector>:state()</dfn> pseudo-class takes a case-sensitive argument
137+
and matches custom elements whose exposed custom states include the argument.
138+
139+
The grammar of the '':state()'' pseudo-class is:
140+
141+
<pre class=prod>:state( <ident> )</pre>
142+
143+
The exact matching behavior of '':state()'' pseudo-class
144+
is defined by the host language.
145+
See <a href="https://html.spec.whatwg.org/multipage/custom-elements.html#custom-state-pseudo-class">HTML's definition</a>.
146+
147+
<h2 id="combinators">
148+
Combinators</h2>
149+
150+
<h3 id="idref-combinators">
151+
Reference combinators <code>/ref/</code></h3>
152+
153+
The <dfn export>reference combinator</dfn> consists of two slashes
154+
with an intervening <a href="http://www.w3.org/TR/css3-namespace/#css-qnames">CSS qualified name</a>,
155+
and separates two <a>compound selectors</a>,
156+
e.g. ''A /attr/ B''.
157+
The element represented by the first <a>compound selector</a>
158+
explicitly references
159+
the element represented by the second <a>compound selector</a>.
160+
Unless the host language defines a different syntax for expressing this relationship,
161+
this relationship is considered to exist if
162+
the value of the specified attribute on the first element is an IDREF or an <a>ID selector</a>
163+
referencing the second element.
164+
165+
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>.
166+
167+
<div class="example">
168+
The following example highlights an <a element>input</a> element
169+
when its <a href="http://www.w3.org/TR/html40/interact/forms.html#h-17.9"><code>&lt;label></code></a>
170+
is focused or hovered-over:
171+
172+
<pre>
173+
label:is(:hover, :focus) /for/ input, /* association by "for" attribute */
174+
label:is(:hover, :focus):not([for]) input { /* association by containment */
175+
box-shadow: yellow 0 0 10px;
176+
}
177+
</pre>
178+
</div>
179+
180+
181+
<h2 id="changes">
182+
Changes</h2>
183+
184+
<h3 id="changes-level-4">
185+
Changes Since Level 4</h3>
186+
187+
Additions since <a href="https://www.w3.org/TR/selectors-4/">Level 4</a>:
188+
189+
<ul>
190+
<li>Reference combinators
191+
(deferred from an <a href="https://www.w3.org/TR/2013/WD-selectors4-20130502/">earlier draft</a> of Selectors 4)</li>
192+
<li>The functional form of the '':local-link'' pseudo-class
193+
(deferred from an <a href="https://www.w3.org/TR/2013/WD-selectors4-20130502/">earlier draft</a> of Selectors 4)</li>
194+
<li>The '':state()'' pseudo-class</li>
195+
</ul>
196+
197+
<h2 id="acknowledgements">
198+
Acknowledgements</h2>
199+
200+
The CSS working group would like to thank everyone who contributed
201+
to the <a href="https://www.w3.org/TR/selectors-4">previous Selectors</a> specifications over the years,
202+
as those specifications formed the basis for this one.
203+
In particular, the working group would like to extend special thanks
204+
to the following for their specific contributions to Selectors Level 5:
205+
Joey Arhar.
206+
207+
<h2 class=no-num id=privacy>Privacy Considerations</h2>
208+
209+
<p>Should be copied from Level 4 when appropriate.</p>
132210

133-
The <dfn selector>:state()</dfn> pseudo-class takes a case-sensitive argument
134-
and matches custom elements whose exposed custom states include the argument.
211+
<h2 class=no-num id=security>Security Considerations</h2>
135212

136-
The grammar of the '':state()'' pseudo-class is:
213+
<p>Should be copied from Level 4 when appropriate.</p>
137214

138-
<pre class=prod>:state( <ident> )</pre>
139215

140-
The exact matching behavior of '':state()'' pseudo-class is defined by the host language. See <a href="https://html.spec.whatwg.org/multipage/custom-elements.html#custom-state-pseudo-class">HTML's definition</a>.

0 commit comments

Comments
 (0)