Skip to content

Commit

Permalink
[selectors-5][editorial] Light rewrite of :state() definition.
Browse files Browse the repository at this point in the history
  • Loading branch information
tabatkins committed Sep 24, 2024
1 parent 6b91e79 commit baced94
Showing 1 changed file with 15 additions and 5 deletions.
20 changes: 15 additions & 5 deletions selectors-5/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,10 @@ 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
spec:html; type:dfn; text:states set
</pre>

<h2 id="intro">
Expand Down Expand Up @@ -133,16 +135,24 @@ The local link pseudo-class '':local-link''</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 <dfn selector id="state-pseudo">:state( <<ident>> )</dfn> pseudo-class
matches [=custom elements=]
whose [=states set=] contains a string
that [=string/is=] the selector's argument's value.

The grammar of the '':state()'' pseudo-class is:
<!-- Using <<ident>>, rather than <<custom-ident>>,
to avoid excluding the CSS-wide keywords. -->

<pre class=prod>:state( <ident> )</pre>
Note: The "[=string/is=]" matching behavior compares strings by codepoint;
notably, it's case-sensitive.
So if "foo" is in the [=states set=], '':state(FOO)'' will <em>not</em> match.

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>.
For clarity, the concepts explaining this pseudo-class
link to the HTML definition;
see <a href="https://html.spec.whatwg.org/multipage/custom-elements.html#custom-state-pseudo-class">HTML's definition</a> for more detail.
Other host languages must define how this pseudo-class matches.

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

0 comments on commit baced94

Please sign in to comment.