Skip to content

Commit 5b00d95

Browse files
fantasaifantasai
committed
Paste in definitions of UI pseudo-classes from css3-ui. Fix errors pointed out in <http://lists.w3.org/Archives/Public/www-style/2011Aug/0255.html>
1 parent 14ed147 commit 5b00d95

2 files changed

Lines changed: 212 additions & 38 deletions

File tree

‎selectors4/Overview.html‎

Lines changed: 128 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,13 @@
1515

1616
<h1 id=title>Selectors Level 4</h1>
1717

18-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 6 August 2011</h2>
18+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 10 August 2011</h2>
1919

2020
<dl>
2121
<dt>This version:
2222

23-
<dd> <!-- <a href="http://www.w3.org/TR/2011/ED-selectors4-20110806/">
24-
http://www.w3.org/TR/2011/WD-selectors4-20110806</a> -->
23+
<dd> <!-- <a href="http://www.w3.org/TR/2011/ED-selectors4-20110810/">
24+
http://www.w3.org/TR/2011/WD-selectors4-20110810</a> -->
2525
<a href="http://dev.w3.org/csswg/selectors4">
2626
http://dev.w3.org/csswg/selectors4</a>
2727

@@ -282,11 +282,30 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
282282
<li><a href="#enableddisabled"><span class=secno>11.1. </span> The
283283
:enabled and :disabled pseudo-classes</a>
284284

285-
<li><a href="#checked"><span class=secno>11.2. </span> The :checked
286-
pseudo-class</a>
285+
<li><a href="#checked"><span class=secno>11.2. </span> The
286+
selected-option pseudo-class <code>:checked</code></a>
287287

288288
<li><a href="#indeterminate"><span class=secno>11.3. </span> The
289-
:indeterminate pseudo-class</a>
289+
indeterminate-value pseudo-class <code>:indeterminate</code></a>
290+
291+
<li><a href="#pseudo-default"><span class=secno>11.4. </span> The
292+
default option pseudo-class <code>:default</code></a>
293+
294+
<li><a href="#pseudo-validity"><span class=secno>11.5. </span> The
295+
validity pseudo-classes <code>:valid</code> and
296+
<code>:invalid</code></a>
297+
298+
<li><a href="#pseudo-range"><span class=secno>11.6. </span> The range
299+
pseudo-classes <code>:in-range</code> and
300+
<code>:out-of-range</code></a>
301+
<ul class=toc>
302+
<li><a href="#pseudo-required-value"><span class=secno>11.6.1.
303+
</span><span>:required</span> and <span>:optional</span></a>
304+
305+
<li><a href="#pseudo-ro-rw"><span class=secno>11.6.2. </span> The
306+
mutability pseudo-classes <code>:read-only</code> and
307+
<code>:read-write</code></a>
308+
</ul>
290309
</ul>
291310

292311
<li><a href="#structural-pseudos"><span class=secno>12. </span>
@@ -767,12 +786,21 @@ <h2 id=overview><span class=secno>2. </span> Selectors Overview</h2>
767786
<td class=origin>3
768787

769788
<tr>
770-
<td class=pattern>E:checked<!--<br>E:indeterminate-->
789+
<td class=pattern>E:checked
790+
791+
<td class=meaning>a user interface element E which is checked/selected
792+
(for instance a radio-button or checkbox)
793+
794+
<td class=described><a href="#UIstates">The UI element states
795+
pseudo-classes</a>
796+
797+
<td class=origin>3
798+
799+
<tr>
800+
<td class=pattern>E:indeterminate
771801

772-
<td class=meaning>a user interface element E which is
773-
checked<!-- or in an
774-
indeterminate state--> (for instance a
775-
radio-button or checkbox)
802+
<td class=meaning>a user interface element E which is in an
803+
indeterminate state (neither checked nor unchecked)
776804

777805
<td class=described><a href="#UIstates">The UI element states
778806
pseudo-classes</a>
@@ -1546,11 +1574,9 @@ <h3 id=attrnmsp><span class=secno>6.4. </span> Attribute selectors and
15461574
(<code>|</code>). In keeping with the Namespaces in the XML
15471575
recommendation, default namespaces do not apply to attributes, therefore
15481576
attribute selectors without a namespace component apply only to attributes
1549-
that have no namespace (equivalent to "<code>|attr</code>"; these
1550-
attributes are said to be in the "per-element-type namespace partition").
1551-
An asterisk may be used for the namespace prefix indicating that the
1552-
selector is to match all attribute names without regard to the attribute's
1553-
namespace.
1577+
that have no namespace (equivalent to "<code>|attr</code>"). An asterisk
1578+
may be used for the namespace prefix indicating that the selector is to
1579+
match all attribute names without regard to the attribute's namespace.
15541580

15551581
<p>An attribute selector with an attribute name containing a namespace
15561582
prefix that has not been previously <a href="#nsdecl">declared</a> is an
@@ -1983,10 +2009,10 @@ <h3 id=hover-pseudo><span class=secno>8.1. </span> The pointer hover
19832009
For example, a visual user agent could apply this pseudo-class when the
19842010
cursor (mouse pointer) hovers over a box generated by the element. User
19852011
agents not that do not support <a
1986-
href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">interactive
2012+
href="http://www.w3.org/TR/CSS21/media.html#interactive-media-group">interactive
19872013
media</a> do not have to support this pseudo-class. Some conforming user
19882014
agents that support <a
1989-
href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">interactive
2015+
href="http://www.w3.org/TR/CSS21/media.html#interactive-media-group">interactive
19902016
media</a> may not be able to support this pseudo-class (e.g., a pen device
19912017
that does not detect hovering).
19922018

@@ -2210,7 +2236,8 @@ <h3 id=enableddisabled><span class=secno>11.1. </span> The :enabled and
22102236
e.g., the <code>display</code> and <code>visibility</code> properties have
22112237
no effect on the enabled/disabled state of an element.
22122238

2213-
<h3 id=checked><span class=secno>11.2. </span> The :checked pseudo-class</h3>
2239+
<h3 id=checked><span class=secno>11.2. </span> The selected-option
2240+
pseudo-class <code>:checked</code></h3>
22142241

22152242
<p>Radio and checkbox elements can be toggled by the user. Some menu items
22162243
are "checked" when the user selects them. When such elements are toggled
@@ -2227,14 +2254,14 @@ <h3 id=checked><span class=secno>11.2. </span> The :checked pseudo-class</h3>
22272254
apply.
22282255

22292256
<div class=example>
2230-
<p>An unchecked checkbox can be selected by using the <code>:not()</code>
2257+
<p>An unchecked checkbox can be selected by using the negation
22312258
pseudo-class:
22322259

22332260
<pre>:not(:checked)</pre>
22342261
</div>
22352262

2236-
<h3 id=indeterminate><span class=secno>11.3. </span> The :indeterminate
2237-
pseudo-class</h3>
2263+
<h3 id=indeterminate><span class=secno>11.3. </span> The
2264+
indeterminate-value pseudo-class <code>:indeterminate</code></h3>
22382265

22392266
<p>The <code>:indeterminate</code> pseudo-class applies to UI elements
22402267
whose value is in an indeterminate state. For example, radio and checkbox
@@ -2243,9 +2270,76 @@ <h3 id=indeterminate><span class=secno>11.3. </span> The :indeterminate
22432270
Similarly a progress meter can be in an indeterminate state when the
22442271
percent completion is unknown.
22452272

2246-
<p>Like the <code>:checked</code> pseudo-class, :indeterminate applies to
2247-
all media. Components of a radio-group initialized with no pre-selected
2248-
choice, for example, would be :indeterminate even in a static display.
2273+
<p>Like the <code>:checked</code> pseudo-class, <code>:indeterminate</code>
2274+
applies to all media. Components of a radio-group initialized with no
2275+
pre-selected choice, for example, would be <code>:indeterminate</code>
2276+
even in a static display.
2277+
2278+
<h3 id=pseudo-default><span class=secno>11.4. </span> The default option
2279+
pseudo-class <code>:default</code></h3>
2280+
2281+
<p>The <code>:default selector</code> applies to the one or more UI
2282+
elements that are the default among a set of similar elements. Typically
2283+
applies to context menu items, buttons and select lists/menus.
2284+
2285+
<p>One example is the default submit button among a set of buttons. Another
2286+
example is the default option from a popup menu. Multiple elements in a
2287+
select-many group could have multiple <code>:default</code> elements, like
2288+
a selection of pizza toppings for example.
2289+
2290+
<h3 id=pseudo-validity><span class=secno>11.5. </span> The validity
2291+
pseudo-classes <code id=pseudo-valid>:valid</code> and <code
2292+
id=pseudo-invalid>:invalid</code></h3>
2293+
2294+
<p>An element is <code>:valid</code> or :invalid when its contents or value
2295+
is, respectively, valid or invalid with respect to data validity semantics
2296+
defined by the document language (e.g. <a href="#XFORMS10"
2297+
rel=biblioentry>[XFORMS10]<!--{{XFORMS10}}--></a> or <a href="#HTML5"
2298+
rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>). An element which lacks data
2299+
validity semantics is neither <code>:valid</code> nor
2300+
<code>:invalid</code>. This is different from an element which otherwise
2301+
has no constraints. Such an element would always be <code>:valid</code>.
2302+
For example, a text input field with no constraints would always be
2303+
<code>:valid</code>.
2304+
2305+
<h3 id=pseudo-range><span class=secno>11.6. </span> The range
2306+
pseudo-classes <code id=pseudo-in-range>:in-range</code> and <code
2307+
id=pseudo-out-of-range>:out-of-range</code></h3>
2308+
2309+
<p>The <code>:in-range</code> and <code>:out-of-range</code> pseudo-classes
2310+
apply only to elements that have range limitations. An element is
2311+
<code>:in-range</code> or <code>:out-of-range</code> when the value that
2312+
the element is bound to is in range or out of range with respect to its
2313+
range limits as defined by the document language. An element that lacks
2314+
data range limits or is not a form control is neither
2315+
<code>:in-range</code> nor <code>:out-of-range</code>. E.g. a slider
2316+
element with a value of 11 presented as a slider control that only
2317+
represents the values from 1-10 is :out-of-range. Another example is a
2318+
menu element with a value of "E" that happens to be presented as a popup
2319+
menu that only has choices "A", "B" and "C".
2320+
2321+
<h4 id=pseudo-required-value><span class=secno>11.6.1. </span><span
2322+
id=pseudo-required>:required</span> and <span
2323+
id=pseudo-optional>:optional</span></h4>
2324+
2325+
<p>A form element is <code>:required</code> or <code>:optional<code> if a
2326+
value for it is, respectively, required or optional before the form it
2327+
belongs to can be validly submitted. Elements that are not form elements
2328+
are neither required nor optional. </code></code>
2329+
2330+
<h4 id=pseudo-ro-rw><span class=secno>11.6.2. </span> The mutability
2331+
pseudo-classes <code id=pseudo-read-only>:read-only</code> and <code
2332+
id=pseudo-read-write>:read-write</code></h4>
2333+
2334+
<p>An element whose contents are not user-alterable is
2335+
<code>:read-only</code>. However, elements whose contents are
2336+
user-alterable (such as text input fields) are considered to be in a
2337+
:read-write state. In typical documents, most elements are
2338+
<code>:read-only</code>. However it may be possible (e.g. in the context
2339+
of an editor) for any element to become <code>:read-write</code>.
2340+
2341+
<p class=issue>I don't think it makes sense for an editor to match
2342+
selectors differently because it is an editor rather than a renderer.
22492343

22502344
<h2 id=structural-pseudos><span class=secno>12. </span> Tree-Structural
22512345
pseudo-classes</h2>
@@ -3487,6 +3581,15 @@ <h3 id=informative-references><span class=secno>19.2. </span> Informative
34873581
</dd>
34883582
<!---->
34893583

3584+
<dt id=XFORMS10>[XFORMS10]
3585+
3586+
<dd>John M. Boyer. <a
3587+
href="http://www.w3.org/TR/2009/REC-xforms-20091020/"><cite>XForms
3588+
1.1.</cite></a> 20 October 2009. W3C Recommendation. URL: <a
3589+
href="http://www.w3.org/TR/2009/REC-xforms-20091020/">http://www.w3.org/TR/2009/REC-xforms-20091020/</a>
3590+
</dd>
3591+
<!---->
3592+
34903593
<dt id=XML-NAMES>[XML-NAMES]
34913594

34923595
<dd>Tim Bray; et al. <a

‎selectors4/Overview.src.html‎

Lines changed: 84 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -355,9 +355,17 @@ <h2 id=overview>
355355
pseudo-classes</a></td>
356356
<td class="origin">3</td></tr>
357357
<tr>
358-
<td class="pattern">E:checked<!--<br>E:indeterminate--></td>
359-
<td class="meaning">a user interface element E which is checked<!-- or in an
360-
indeterminate state--> (for instance a radio-button or checkbox)</td>
358+
<td class="pattern">E:checked</td>
359+
<td class="meaning">a user interface element E which is checked/selected
360+
(for instance a radio-button or checkbox)</td>
361+
<td class="described"><a
362+
href="#UIstates">The UI element states
363+
pseudo-classes</a></td>
364+
<td class="origin">3</td></tr>
365+
<tr>
366+
<td class="pattern">E:indeterminate</td>
367+
<td class="meaning">a user interface element E which is in an
368+
indeterminate state (neither checked nor unchecked)</td>
361369
<td class="described"><a
362370
href="#UIstates">The UI element states
363371
pseudo-classes</a></td>
@@ -1058,8 +1066,7 @@ <h3 id=attrnmsp>
10581066
the Namespaces in the XML recommendation, default namespaces do not
10591067
apply to attributes, therefore attribute selectors without a namespace
10601068
component apply only to attributes that have no namespace (equivalent
1061-
to "<code>|attr</code>"; these attributes are said to be in the
1062-
"per-element-type namespace partition"). An asterisk may be used for
1069+
to "<code>|attr</code>"). An asterisk may be used for
10631070
the namespace prefix indicating that the selector is to match all
10641071
attribute names without regard to the attribute's namespace.
10651072

@@ -1464,10 +1471,10 @@ <h3 id="hover-pseudo">
14641471
it. For example, a visual user agent could apply this pseudo-class
14651472
when the cursor (mouse pointer) hovers over a box generated by the
14661473
element. User agents not that do not support <a
1467-
href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">interactive
1474+
href="http://www.w3.org/TR/CSS21/media.html#interactive-media-group">interactive
14681475
media</a> do not have to support this pseudo-class. Some conforming
14691476
user agents that support <a
1470-
href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">interactive
1477+
href="http://www.w3.org/TR/CSS21/media.html#interactive-media-group">interactive
14711478
media</a> may not be able to support this pseudo-class (e.g., a pen
14721479
device that does not detect hovering).</li>
14731480

@@ -1681,7 +1688,7 @@ <h3 id=enableddisabled>
16811688
on the enabled/disabled state of an element.</p>
16821689

16831690
<h3 id=checked>
1684-
The :checked pseudo-class</h3>
1691+
The selected-option pseudo-class <code>:checked</code></h3>
16851692

16861693
<p>Radio and checkbox elements can be toggled by the user. Some menu
16871694
items are "checked" when the user selects them. When such elements are
@@ -1698,23 +1705,87 @@ <h3 id=checked>
16981705
longer apply.
16991706

17001707
<div class="example">
1701-
<p>An unchecked checkbox can be selected by using the <code>:not()</code>
1708+
<p>An unchecked checkbox can be selected by using the negation
17021709
pseudo-class:
17031710
<pre>:not(:checked)</pre>
17041711
</div>
17051712

17061713
<h3 id=indeterminate>
1707-
The :indeterminate pseudo-class</h3>
1714+
The indeterminate-value pseudo-class <code>:indeterminate</code></h3>
17081715

17091716
<p>The <code>:indeterminate</code> pseudo-class applies to UI elements whose
17101717
value is in an indeterminate state. For example, radio and checkbox elements
17111718
can be toggled between checked and unchecked states, but are sometimes in
17121719
an indeterminate state, neither checked nor unchecked. Similarly a progress
17131720
meter can be in an indeterminate state when the percent completion is unknown.
17141721

1715-
<p>Like the <code>:checked</code> pseudo-class, :indeterminate applies to
1716-
all media. Components of a radio-group initialized with no pre-selected
1717-
choice, for example, would be :indeterminate even in a static display.</p>
1722+
<p>Like the <code>:checked</code> pseudo-class, <code>:indeterminate</code>
1723+
applies to all media. Components of a radio-group initialized with no
1724+
pre-selected choice, for example, would be <code>:indeterminate</code>
1725+
even in a static display.</p>
1726+
1727+
<h3 id="pseudo-default">
1728+
The default option pseudo-class <code>:default</code></h3>
1729+
<p>The <code>:default selector</code> applies to the one or more UI elements
1730+
that are the default among a set of similar elements. Typically applies to
1731+
context menu items, buttons and select lists/menus.
1732+
1733+
<p>One example is the default submit button among a set of buttons.
1734+
Another example is the default option from a popup menu. Multiple elements
1735+
in a select-many group could have multiple <code>:default</code> elements,
1736+
like a selection of pizza toppings for example.
1737+
1738+
<h3 id="pseudo-validity">
1739+
The validity pseudo-classes <code id="pseudo-valid">:valid</code>
1740+
and <code id="pseudo-invalid">:invalid</code></h3>
1741+
1742+
<p>An element is <code>:valid</code> or :invalid when its contents or
1743+
value is, respectively, valid or invalid with respect to data validity
1744+
semantics defined by the document language (e.g. [[XFORMS10]] or [[HTML5]]).
1745+
An element which lacks data validity semantics is neither <code>:valid</code>
1746+
nor <code>:invalid</code>. This is different from an element which
1747+
otherwise has no constraints. Such an element would always be
1748+
<code>:valid</code>. For example, a text input field with no constraints
1749+
would always be <code>:valid</code>.
1750+
1751+
<h3 id="pseudo-range">
1752+
The range pseudo-classes <code id="pseudo-in-range">:in-range</code> and
1753+
<code id="pseudo-out-of-range">:out-of-range</code></h3>
1754+
1755+
<p>The <code>:in-range</code> and <code>:out-of-range</code> pseudo-classes
1756+
apply only to elements that have range limitations. An element is
1757+
<code>:in-range</code> or <code>:out-of-range</code> when the value
1758+
that the element is bound to is in range or out of range with respect
1759+
to its range limits as defined by the document language. An element
1760+
that lacks data range limits or is not a form control is neither
1761+
<code>:in-range</code> nor <code>:out-of-range</code>.
1762+
E.g. a slider element with a value of 11 presented as a slider control
1763+
that only represents the values from 1-10 is :out-of-range. Another
1764+
example is a menu element with a value of "E" that happens to be
1765+
presented as a popup menu that only has choices "A", "B" and "C".
1766+
1767+
<h4 id="pseudo-required-value"><span id="pseudo-required">:required</span>
1768+
and <span id="pseudo-optional">:optional</span></h4>
1769+
1770+
<p>A form element is <code>:required</code> or <code>:optional<code>
1771+
if a value for it is, respectively, required or optional before the
1772+
form it belongs to can be validly submitted. Elements that are not
1773+
form elements are neither required nor optional.
1774+
1775+
<h4 id="pseudo-ro-rw">
1776+
The mutability pseudo-classes <code id="pseudo-read-only">:read-only</code>
1777+
and <code id="pseudo-read-write">:read-write</code></h4>
1778+
1779+
<p>An element whose contents are not user-alterable is
1780+
<code>:read-only</code>. However, elements whose contents are
1781+
user-alterable (such as text input fields) are considered to be
1782+
in a :read-write state. In typical documents, most elements are
1783+
<code>:read-only</code>. However it may be possible (e.g. in the
1784+
context of an editor) for any element to become <code>:read-write</code>.</p>
1785+
1786+
<p class="issue">I don't think it makes sense for an editor to
1787+
match selectors differently because it is an editor rather than
1788+
a renderer.
17181789

17191790
<h2 id=structural-pseudos>
17201791
Tree-Structural pseudo-classes</h2>

0 commit comments

Comments
 (0)