Skip to content

[selectors-4] Add :defined pseudo-class #3735

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Feb 8, 2020
Merged

[selectors-4] Add :defined pseudo-class #3735

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
abf6d91
Define :defined pseudo-class
Mar 15, 2019
f74e601
Replace space with tab
Mar 15, 2019
edb9db5
Define a high-level :defined
zcorpan Oct 24, 2019
cfa6d55
Apply suggestions from code review
zcorpan Feb 3, 2020
fb31fea
Rephrase :defined to be a little less vague about what "defined" means.
tabatkins Feb 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions selectors-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1415,6 +1415,35 @@ Namespaces in Elemental Selectors</h3>
that has not been previously <a href="#nsdecl">declared</a>
is an <a>invalid selector</a>.

<h3 id="the-defined-pseudo">
The Defined Pseudo-class: '':defined''</h3>

In some host languages,
elements can have a distinction between being “defined”/“constructed” or not.
The <dfn id='defined-pseudo'>:defined</dfn> <a>pseudo-class</a> matches elements
that are fully defined,
as dictated by the host language.

If the host language does not have this sort of distinction,
all elements in it match '':defined''.

<div class="example">
In HTML, all built-in elements are always considered to be defined,
so the following example will always match:

<pre highlight=css>p:defined { ... }</pre>

[=Custom elements=], on the other hand,
start out <em>un</em>defined,
and only become defined when <l spec=html>[=element definition|properly registered=]</l>.
This means the '':defined'' pseudo-class
can be used to hide a custom element
until it has been registered:

<pre>custom-element { visibility: hidden }</pre>
<pre>custom-element:defined { visibility: visible }</pre>
</div>

<h2 id="attribute-selectors">
Attribute selectors</h2>

Expand Down