Skip to content

Commit

Permalink
[selectors-4] Define :empty to ignore whitespace. Define :blank to ap…
Browse files Browse the repository at this point in the history 
…ply to empty inputs. #1967 #1283
  • Loading branch information
@fantasai
fantasai committed Oct 3, 2018
1 parent 6a0270b commit 2b42b64
Showing 1 changed file with 60 additions and 42 deletions.
102 changes: 60 additions & 42 deletions selectors-4/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -397,7 +397,7 @@ Selectors Overview</h2>
<td>3
<tr>
<td><code>E:empty</code>
<td>an E element that has no children (not even text nodes)
<td>an E element that has no children (neither elements nor text)
<td>[[#structural-pseudos]]
<td>3
<tr>
Expand Down Expand Up @@ -2580,6 +2580,26 @@ The Indeterminate-value Pseudo-class: '':indeterminate''</h4>
<h3 id='ui-validity'>
Input Value-checking</h3>

<h4 id="blank">
The Empty-Value Pseudo-class: '':blank''</h4>

The <dfn id="blank-pseudo">:blank</dfn> pseudo-class
applies to user-input elements whose input value is empty
(consists of the empty string or otherwise null input).

<div class="example">
Examples of '':blank'' user-input elements would be
a <{textarea}> element whose contents are empty,
or an <{input}> field whose value is empty.
Note that the value under consideration here is the value
that would be submitted
(see <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#a-form-control's-value">A form control’s value</a> in [[HTML]]),
which in HTML does not necessarily correspond to the value
of the element’s <{input/value}> attribute.
</div>

Note: This selector is at-risk.

<h4 id="validity-pseudos">
The Validity Pseudo-classes: '':valid'' and '':invalid''</h4>

Expand Down Expand Up @@ -2697,7 +2717,9 @@ Tree-Structural pseudo-classes</h2>
<h3 id="the-empty-pseudo">
'':empty'' pseudo-class</h3>

The <dfn id='empty-pseudo'>:empty</dfn> pseudo-class represents an element that has no children at all.
The <dfn id='empty-pseudo'>:empty</dfn> pseudo-class represents
an element that has no children
except, optionally, <a>document white space characters</a>.
In terms of the document tree,
only element nodes and content nodes
(such as [[DOM]] text nodes, and entity references)
Expand All @@ -2707,48 +2729,37 @@ Tree-Structural pseudo-classes</h2>

<div class="example">
Examples:
''p:empty'' is a valid representation of the following fragment:

<pre>&lt;p>&lt;/p></pre>

''foo:empty'' is not a valid representation for the
following fragments:

<pre>&lt;foo>bar&lt;/foo></pre>

<pre>&lt;foo>&lt;bar>bla&lt;/bar>&lt;/foo></pre>

<pre>&lt;foo>this is not &lt;bar>:empty&lt;/bar>&lt;/foo></pre>
</div>

Issue: The WG is considering whether to allow elements containing only white space to match this selector.
The advantage would be that--
as white space is largely collapsible in HTML and is therefore used for source code formatting, and especially because elements with omitted end tags are likely to absorb such white space into their DOM text contents--
many elements which authors perceive of as empty would be selected by this selector, as they expect.
The disadvantages are a potential conflict with Web-compat if there exist pages that depend on this selector excluding white space;
and that one might consider uncollapsed white space to be significant content, but the selector cannot change its behavior based on the 'white-space' property.
See <a href="https://github.com/w3c/csswg-drafts/issues/1967">discussion</a>.


<h3 id='the-blank-pseudo'>
'':blank'' pseudo-class</h3>

The <dfn id='blank-pseudo'>:blank</dfn> pseudo-class is like the '':empty'' pseudo-class,
except that it additionally matches elements that only contain
<a href="https://www.w3.org/TR/css3-text/#white-space-rules">code points affected by whitespace processing</a>. [[!CSS3TEXT]]
''p:empty'' is a valid representation of the <{p}> elements
in the following HTML fragment:

<pre class="html">
&lt;p>&lt;/p>
&lt;p>
&lt;p> &lt;/p>
&lt;p><!-- comment -->&lt;/p>
</pre>

<div class='example'>
For example, the following element matches '':blank'',
but not '':empty'',
because it contains at least one linebreak, and possibly other whitespace:
''div:empty'' is not a valid representation of the <code>&lt;div></code> elements
in the following fragment:

<pre>&lt;p><br>&lt;/p></pre>
<pre class="html">
&lt;div>text&lt;/div>
&lt;div>&lt;p>&lt;/p>&lt;/div>
&lt;div>&amp;nbsp;&lt;/div>
&lt;div>&lt;p>bla&lt;/p>&lt;/div>
&lt;div>this is not &lt;p>:empty&lt;/p>&lt;/div>
</pre>
</div>

Issue: The WG is considering whether to rename this or file its definition under the existing '':empty'' pseudo-class.
See <a href="https://github.com/w3c/csswg-drafts/issues/1967">discussion</a>.
There's also a <a href="https://github.com/w3c/csswg-drafts/issues/1283">related issue</a> on a selector for empty input fields which might legitimately steal this name.

Note: In Level 2 and Level 3 of Selectors,
'':empty'' did not match elements that contained only white space.
This was changed so that that--
given white space is largely collapsible in HTML
and is therefore used for source code formatting,
and especially because elements with omitted end tags
are likely to absorb such white space into their DOM text contents--
elements which authors perceive of as empty
can be selected by this selector, as they expect.

<h3 id='child-index'>
Child-indexed Pseudo-classes</h3>
Expand Down Expand Up @@ -3897,6 +3908,13 @@ Appendix B: Obsolete but Required Parsing Quirks for Web Compat</h2>
<h2 id="changes">
Changes</h2>

Significant changes since the <a href="https://www.w3.org/TR/2018/WD-selectors-4-20180202/">2 February 2018 Working Draft</a>:

<ul>
<li>Removed '':blank'' and defined '':empty'' to ignored white-space&ndash;only nodes.
(<a href="https://github.com/w3c/csswg-drafts/issues/1967">Issue 1967</a>)
</ul>

Significant changes since the <a href="https://www.w3.org/TR/2013/WD-selectors4-20130502/">2 May 2013 Working Draft</a> include:

<ul>
Expand All @@ -3906,7 +3924,7 @@ Changes</h2>
<li>Replaced the '':nth-match()'' and '':nth-last-match()'' selectors
with '':nth-child(&hellip; of <var>selector</var>)'' and '':nth-last-child(&hellip; of <var>selector</var>)''.
<li>Changed the <css>:active-drop-target</css>, <css>:valid-drop-target</css>, <css>:invalid-drop-target</css> with '':drop()''.
<li>Sketched out an empty-or-whitespace-only selector for discussion ('':blank'').
<li>Sketched out an empty-or-whitespace-only selector for discussion
(See <a href="https://github.com/w3c/csswg-drafts/issues/1967">open issue</a>.)
<li>Renamed '':user-error'' to '':user-invalid''.
(See <a href="https://www.w3.org/mid/CADhPm3v+WfeGQfBwwx8QBuiOjn2k38V_DcKW17Cm81VgZb1nbQ@mail.gmail.com">Discussion</a>)
Expand Down Expand Up @@ -3948,7 +3966,7 @@ Changes</h2>
Significant changes since the <a href="https://www.w3.org/TR/2012/WD-selectors4-20120823/">23 August 2012 Working Draft</a> include:

<ul>
<li>Added '':blank'' and '':placeholder-shown'' pseudo-classes.
<li>Added '':placeholder-shown'' pseudo-classes.
<li>Released some restrictions on '':matches()'' and '':not()''.
<li>Defined fast and complete Selectors profiles (now called <a>live</a> and <a>snapshot</a>).
<li>Improved definition of <a>specificity</a> to better handle <a>:matches()</a>.
Expand Down

0 comments on commit 2b42b64

Please sign in to comment.