Skip to content

Commit

Permalink
[selectors-5] Create selectors-5 delta spec draft from deferred-for-l…
Browse files Browse the repository at this point in the history 
…evel-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.
  • Loading branch information
@dbaron
dbaron committed Aug 13, 2024
1 parent 4ee0078 commit 4c28983
Showing 1 changed file with 114 additions and 39 deletions.
153 changes: 114 additions & 39 deletions selectors-4/deferred-for-level-5 → selectors-5/Overview.bs
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,42 @@
<h3 id="idref-combinators">
Reference combinators <code>/ref/</code></h3>

The <dfn export>reference combinator</dfn> consists of two slashes
with an intervening <a href="http://www.w3.org/TR/css3-namespace/#css-qnames">CSS qualified name</a>,
and separates two <a>compound selectors</a>,
e.g. ''A /attr/ B''.
The element represented by the first <a>compound selector</a>
explicitly references
the element represented by the second <a>compound selector</a>.
Unless the host language defines a different syntax for expressing this relationship,
this relationship is considered to exist if
the value of the specified attribute on the first element is an IDREF or an <a>ID selector</a>
referencing the second element.

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">
The following example highlights an <a element>input</a> element
when its <a href="http://www.w3.org/TR/html40/interact/forms.html#h-17.9"><code>&lt;label></code></a>
is focused or hovered-over:

<pre>
label:is(:hover, :focus) /for/ input, /* association by "for" attribute */
label:is(:hover, :focus):not([for]) input { /* association by containment */
box-shadow: yellow 0 0 10px;
}
</pre>
</div>


<pre class='metadata'>
Title: Selectors Level 5
Group: CSSWG
Shortname: selectors
Level: 5
Status: ED
Work Status: Exploring
ED: https://drafts.csswg.org/selectors-5/
TR: https://www.w3.org/TR/selectors-5/
Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400
Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/, w3cid 42199
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.
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.
</pre>
<pre class="link-defaults">
spec:selectors-4; type:dfn; text:selector
</pre>

<h2 id="intro">
Introduction</h2>

ISSUE: <strong>This is a diff spec against
<a href="https://www.w3.org/TR/selectors-4/">Selectors Level 4</a>.</strong>

<h3 id="placement">
Module Interactions</h3>

This module extends
the set of selectors defined for CSS in [[selectors-4]].

<h2 id="location">
Location Pseudo-classes</h2>

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

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

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

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

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

<h3 id="custom-state">Exposing custom state: the '':state()'' pseudo-class</h3>
<h2 id="custom-state">
Exposing custom state: the '':state()'' pseudo-class</h2>

The <dfn selector>:state()</dfn> pseudo-class takes a case-sensitive argument
and matches custom elements whose exposed custom states include the argument.

The grammar of the '':state()'' pseudo-class is:

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

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>.

<h2 id="combinators">
Combinators</h2>

<h3 id="idref-combinators">
Reference combinators <code>/ref/</code></h3>

The <dfn export>reference combinator</dfn> consists of two slashes
with an intervening <a href="http://www.w3.org/TR/css3-namespace/#css-qnames">CSS qualified name</a>,
and separates two <a>compound selectors</a>,
e.g. ''A /attr/ B''.
The element represented by the first <a>compound selector</a>
explicitly references
the element represented by the second <a>compound selector</a>.
Unless the host language defines a different syntax for expressing this relationship,
this relationship is considered to exist if
the value of the specified attribute on the first element is an IDREF or an <a>ID selector</a>
referencing the second element.

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">
The following example highlights an <a element>input</a> element
when its <a href="http://www.w3.org/TR/html40/interact/forms.html#h-17.9"><code>&lt;label></code></a>
is focused or hovered-over:

<pre>
label:is(:hover, :focus) /for/ input, /* association by "for" attribute */
label:is(:hover, :focus):not([for]) input { /* association by containment */
box-shadow: yellow 0 0 10px;
}
</pre>
</div>


<h2 id="changes">
Changes</h2>

<h3 id="changes-level-4">
Changes Since Level 4</h3>

Additions since <a href="https://www.w3.org/TR/selectors-4/">Level 4</a>:

<ul>
<li>Reference combinators
(deferred from an <a href="https://www.w3.org/TR/2013/WD-selectors4-20130502/">earlier draft</a> of Selectors 4)</li>
<li>The functional form of the '':local-link'' pseudo-class
(deferred from an <a href="https://www.w3.org/TR/2013/WD-selectors4-20130502/">earlier draft</a> of Selectors 4)</li>
<li>The '':state()'' pseudo-class</li>
</ul>

<h2 id="acknowledgements">
Acknowledgements</h2>

The CSS working group would like to thank everyone who contributed
to the <a href="https://www.w3.org/TR/selectors-4">previous Selectors</a> specifications over the years,
as those specifications formed the basis for this one.
In particular, the working group would like to extend special thanks
to the following for their specific contributions to Selectors Level 5:
Joey Arhar.

<h2 class=no-num id=privacy>Privacy Considerations</h2>

<p>Should be copied from Level 4 when appropriate.</p>

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

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

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

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 comments on commit 4c28983

Please sign in to comment.