- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 10 Aug 2011 19:31:07 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/selectors4
In directory hutz:/tmp/cvs-serv2573
Modified Files:
Overview.html Overview.src.html
Log Message:
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>
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/selectors4/Overview.html,v
retrieving revision 1.43
retrieving revision 1.44
diff -u -d -r1.43 -r1.44
--- Overview.html 6 Aug 2011 18:06:35 -0000 1.43
+++ Overview.html 10 Aug 2011 19:31:04 -0000 1.44
@@ -15,13 +15,13 @@
<h1 id=title>Selectors Level 4</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 6 August 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 10 August 2011</h2>
<dl>
<dt>This version:
- <dd> <!-- <a href="http://www.w3.org/TR/2011/ED-selectors4-20110806/">
- http://www.w3.org/TR/2011/WD-selectors4-20110806</a> -->
+ <dd> <!-- <a href="http://www.w3.org/TR/2011/ED-selectors4-20110810/">
+ http://www.w3.org/TR/2011/WD-selectors4-20110810</a> -->
<a href="http://dev.w3.org/csswg/selectors4">
http://dev.w3.org/csswg/selectors4</a>
@@ -282,11 +282,30 @@
<li><a href="#enableddisabled"><span class=secno>11.1. </span> The
:enabled and :disabled pseudo-classes</a>
- <li><a href="#checked"><span class=secno>11.2. </span> The :checked
- pseudo-class</a>
+ <li><a href="#checked"><span class=secno>11.2. </span> The
+ selected-option pseudo-class <code>:checked</code></a>
<li><a href="#indeterminate"><span class=secno>11.3. </span> The
- :indeterminate pseudo-class</a>
+ indeterminate-value pseudo-class <code>:indeterminate</code></a>
+
+ <li><a href="#pseudo-default"><span class=secno>11.4. </span> The
+ default option pseudo-class <code>:default</code></a>
+
+ <li><a href="#pseudo-validity"><span class=secno>11.5. </span> The
+ validity pseudo-classes <code>:valid</code> and
+ <code>:invalid</code></a>
+
+ <li><a href="#pseudo-range"><span class=secno>11.6. </span> The range
+ pseudo-classes <code>:in-range</code> and
+ <code>:out-of-range</code></a>
+ <ul class=toc>
+ <li><a href="#pseudo-required-value"><span class=secno>11.6.1.
+ </span><span>:required</span> and <span>:optional</span></a>
+
+ <li><a href="#pseudo-ro-rw"><span class=secno>11.6.2. </span> The
+ mutability pseudo-classes <code>:read-only</code> and
+ <code>:read-write</code></a>
+ </ul>
</ul>
<li><a href="#structural-pseudos"><span class=secno>12. </span>
@@ -767,12 +786,21 @@
<td class=origin>3
<tr>
- <td class=pattern>E:checked<!--<br>E:indeterminate-->
+ <td class=pattern>E:checked
- <td class=meaning>a user interface element E which is
- checked<!-- or in an
- indeterminate state--> (for instance a
- radio-button or checkbox)
+ <td class=meaning>a user interface element E which is checked/selected
+ (for instance a radio-button or checkbox)
+
+ <td class=described><a href="#UIstates">The UI element states
+ pseudo-classes</a>
+
+ <td class=origin>3
+
+ <tr>
+ <td class=pattern>E:indeterminate
+
+ <td class=meaning>a user interface element E which is in an
+ indeterminate state (neither checked nor unchecked)
<td class=described><a href="#UIstates">The UI element states
pseudo-classes</a>
@@ -1546,11 +1574,9 @@
(<code>|</code>). In keeping with the Namespaces in the XML
recommendation, default namespaces do not apply to attributes, therefore
attribute selectors without a namespace component apply only to attributes
- that have no namespace (equivalent to "<code>|attr</code>"; these
- attributes are said to be in the "per-element-type namespace partition").
- An asterisk may be used for the namespace prefix indicating that the
- selector is to match all attribute names without regard to the attribute's
- namespace.
+ that have no namespace (equivalent to "<code>|attr</code>"). An asterisk
+ may be used for the namespace prefix indicating that the selector is to
+ match all attribute names without regard to the attribute's namespace.
<p>An attribute selector with an attribute name containing a namespace
prefix that has not been previously <a href="#nsdecl">declared</a> is an
@@ -1983,10 +2009,10 @@
For example, a visual user agent could apply this pseudo-class when the
cursor (mouse pointer) hovers over a box generated by the element. User
agents not that do not support <a
- href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">interactive
+ href="http://www.w3.org/TR/CSS21/media.html#interactive-media-group">interactive
media</a> do not have to support this pseudo-class. Some conforming user
agents that support <a
- href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">interactive
+ href="http://www.w3.org/TR/CSS21/media.html#interactive-media-group">interactive
media</a> may not be able to support this pseudo-class (e.g., a pen device
that does not detect hovering).
@@ -2210,7 +2236,8 @@
e.g., the <code>display</code> and <code>visibility</code> properties have
no effect on the enabled/disabled state of an element.
- <h3 id=checked><span class=secno>11.2. </span> The :checked pseudo-class</h3>
+ <h3 id=checked><span class=secno>11.2. </span> The selected-option
+ pseudo-class <code>:checked</code></h3>
<p>Radio and checkbox elements can be toggled by the user. Some menu items
are "checked" when the user selects them. When such elements are toggled
@@ -2227,14 +2254,14 @@
apply.
<div class=example>
- <p>An unchecked checkbox can be selected by using the <code>:not()</code>
+ <p>An unchecked checkbox can be selected by using the negation
pseudo-class:
<pre>:not(:checked)</pre>
</div>
- <h3 id=indeterminate><span class=secno>11.3. </span> The :indeterminate
- pseudo-class</h3>
+ <h3 id=indeterminate><span class=secno>11.3. </span> The
+ indeterminate-value pseudo-class <code>:indeterminate</code></h3>
<p>The <code>:indeterminate</code> pseudo-class applies to UI elements
whose value is in an indeterminate state. For example, radio and checkbox
@@ -2243,9 +2270,76 @@
Similarly a progress meter can be in an indeterminate state when the
percent completion is unknown.
- <p>Like the <code>:checked</code> pseudo-class, :indeterminate applies to
- all media. Components of a radio-group initialized with no pre-selected
- choice, for example, would be :indeterminate even in a static display.
+ <p>Like the <code>:checked</code> pseudo-class, <code>:indeterminate</code>
+ applies to all media. Components of a radio-group initialized with no
+ pre-selected choice, for example, would be <code>:indeterminate</code>
+ even in a static display.
+
+ <h3 id=pseudo-default><span class=secno>11.4. </span> The default option
+ pseudo-class <code>:default</code></h3>
+
+ <p>The <code>:default selector</code> applies to the one or more UI
+ elements that are the default among a set of similar elements. Typically
+ applies to context menu items, buttons and select lists/menus.
+
+ <p>One example is the default submit button among a set of buttons. Another
+ example is the default option from a popup menu. Multiple elements in a
+ select-many group could have multiple <code>:default</code> elements, like
+ a selection of pizza toppings for example.
+
+ <h3 id=pseudo-validity><span class=secno>11.5. </span> The validity
+ pseudo-classes <code id=pseudo-valid>:valid</code> and <code
+ id=pseudo-invalid>:invalid</code></h3>
+
+ <p>An element is <code>:valid</code> or :invalid when its contents or value
+ is, respectively, valid or invalid with respect to data validity semantics
+ defined by the document language (e.g. <a href="#XFORMS10"
+ rel=biblioentry>[XFORMS10]<!--{{XFORMS10}}--></a> or <a href="#HTML5"
+ rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>). An element which lacks data
+ validity semantics is neither <code>:valid</code> nor
+ <code>:invalid</code>. This is different from an element which otherwise
+ has no constraints. Such an element would always be <code>:valid</code>.
+ For example, a text input field with no constraints would always be
+ <code>:valid</code>.
+
+ <h3 id=pseudo-range><span class=secno>11.6. </span> The range
+ pseudo-classes <code id=pseudo-in-range>:in-range</code> and <code
+ id=pseudo-out-of-range>:out-of-range</code></h3>
+
+ <p>The <code>:in-range</code> and <code>:out-of-range</code> pseudo-classes
+ apply only to elements that have range limitations. An element is
+ <code>:in-range</code> or <code>:out-of-range</code> when the value that
+ the element is bound to is in range or out of range with respect to its
+ range limits as defined by the document language. An element that lacks
+ data range limits or is not a form control is neither
+ <code>:in-range</code> nor <code>:out-of-range</code>. E.g. a slider
+ element with a value of 11 presented as a slider control that only
+ represents the values from 1-10 is :out-of-range. Another example is a
+ menu element with a value of "E" that happens to be presented as a popup
+ menu that only has choices "A", "B" and "C".
+
+ <h4 id=pseudo-required-value><span class=secno>11.6.1. </span><span
+ id=pseudo-required>:required</span> and <span
+ id=pseudo-optional>:optional</span></h4>
+
+ <p>A form element is <code>:required</code> or <code>:optional<code> if a
+ value for it is, respectively, required or optional before the form it
+ belongs to can be validly submitted. Elements that are not form elements
+ are neither required nor optional. </code></code>
+
+ <h4 id=pseudo-ro-rw><span class=secno>11.6.2. </span> The mutability
+ pseudo-classes <code id=pseudo-read-only>:read-only</code> and <code
+ id=pseudo-read-write>:read-write</code></h4>
+
+ <p>An element whose contents are not user-alterable is
+ <code>:read-only</code>. However, elements whose contents are
+ user-alterable (such as text input fields) are considered to be in a
+ :read-write state. In typical documents, most elements are
+ <code>:read-only</code>. However it may be possible (e.g. in the context
+ of an editor) for any element to become <code>:read-write</code>.
+
+ <p class=issue>I don't think it makes sense for an editor to match
+ selectors differently because it is an editor rather than a renderer.
<h2 id=structural-pseudos><span class=secno>12. </span> Tree-Structural
pseudo-classes</h2>
@@ -3487,6 +3581,15 @@
</dd>
<!---->
+ <dt id=XFORMS10>[XFORMS10]
+
+ <dd>John M. Boyer. <a
+ href="http://www.w3.org/TR/2009/REC-xforms-20091020/"><cite>XForms
+ 1.1.</cite></a> 20 October 2009. W3C Recommendation. URL: <a
+ href="http://www.w3.org/TR/2009/REC-xforms-20091020/">http://www.w3.org/TR/2009/REC-xforms-20091020/</a>
+ </dd>
+ <!---->
+
<dt id=XML-NAMES>[XML-NAMES]
<dd>Tim Bray; et al. <a
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/selectors4/Overview.src.html,v
retrieving revision 1.45
retrieving revision 1.46
diff -u -d -r1.45 -r1.46
--- Overview.src.html 6 Aug 2011 18:06:35 -0000 1.45
+++ Overview.src.html 10 Aug 2011 19:31:04 -0000 1.46
@@ -355,9 +355,17 @@
pseudo-classes</a></td>
<td class="origin">3</td></tr>
<tr>
- <td class="pattern">E:checked<!--<br>E:indeterminate--></td>
- <td class="meaning">a user interface element E which is checked<!-- or in an
- indeterminate state--> (for instance a radio-button or checkbox)</td>
+ <td class="pattern">E:checked</td>
+ <td class="meaning">a user interface element E which is checked/selected
+ (for instance a radio-button or checkbox)</td>
+ <td class="described"><a
+ href="#UIstates">The UI element states
+ pseudo-classes</a></td>
+ <td class="origin">3</td></tr>
+ <tr>
+ <td class="pattern">E:indeterminate</td>
+ <td class="meaning">a user interface element E which is in an
+ indeterminate state (neither checked nor unchecked)</td>
<td class="described"><a
href="#UIstates">The UI element states
pseudo-classes</a></td>
@@ -1058,8 +1066,7 @@
the Namespaces in the XML recommendation, default namespaces do not
apply to attributes, therefore attribute selectors without a namespace
component apply only to attributes that have no namespace (equivalent
- to "<code>|attr</code>"; these attributes are said to be in the
- "per-element-type namespace partition"). An asterisk may be used for
+ to "<code>|attr</code>"). An asterisk may be used for
the namespace prefix indicating that the selector is to match all
attribute names without regard to the attribute's namespace.
@@ -1464,10 +1471,10 @@
it. For example, a visual user agent could apply this pseudo-class
when the cursor (mouse pointer) hovers over a box generated by the
element. User agents not that do not support <a
- href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">interactive
+ href="http://www.w3.org/TR/CSS21/media.html#interactive-media-group">interactive
media</a> do not have to support this pseudo-class. Some conforming
user agents that support <a
- href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">interactive
+ href="http://www.w3.org/TR/CSS21/media.html#interactive-media-group">interactive
media</a> may not be able to support this pseudo-class (e.g., a pen
device that does not detect hovering).</li>
@@ -1681,7 +1688,7 @@
on the enabled/disabled state of an element.</p>
<h3 id=checked>
-The :checked pseudo-class</h3>
+The selected-option pseudo-class <code>:checked</code></h3>
<p>Radio and checkbox elements can be toggled by the user. Some menu
items are "checked" when the user selects them. When such elements are
@@ -1698,13 +1705,13 @@
longer apply.
<div class="example">
- <p>An unchecked checkbox can be selected by using the <code>:not()</code>
+ <p>An unchecked checkbox can be selected by using the negation
pseudo-class:
<pre>:not(:checked)</pre>
</div>
<h3 id=indeterminate>
-The :indeterminate pseudo-class</h3>
+The indeterminate-value pseudo-class <code>:indeterminate</code></h3>
<p>The <code>:indeterminate</code> pseudo-class applies to UI elements whose
value is in an indeterminate state. For example, radio and checkbox elements
@@ -1712,9 +1719,73 @@
an indeterminate state, neither checked nor unchecked. Similarly a progress
meter can be in an indeterminate state when the percent completion is unknown.
- <p>Like the <code>:checked</code> pseudo-class, :indeterminate applies to
- all media. Components of a radio-group initialized with no pre-selected
- choice, for example, would be :indeterminate even in a static display.</p>
+ <p>Like the <code>:checked</code> pseudo-class, <code>:indeterminate</code>
+ applies to all media. Components of a radio-group initialized with no
+ pre-selected choice, for example, would be <code>:indeterminate</code>
+ even in a static display.</p>
+
+<h3 id="pseudo-default">
+The default option pseudo-class <code>:default</code></h3>
+ <p>The <code>:default selector</code> applies to the one or more UI elements
+ that are the default among a set of similar elements. Typically applies to
+ context menu items, buttons and select lists/menus.
+
+ <p>One example is the default submit button among a set of buttons.
+ Another example is the default option from a popup menu. Multiple elements
+ in a select-many group could have multiple <code>:default</code> elements,
+ like a selection of pizza toppings for example.
+
+<h3 id="pseudo-validity">
+The validity pseudo-classes <code id="pseudo-valid">:valid</code>
+and <code id="pseudo-invalid">:invalid</code></h3>
+
+ <p>An element is <code>:valid</code> or :invalid when its contents or
+ value is, respectively, valid or invalid with respect to data validity
+ semantics defined by the document language (e.g. [[XFORMS10]] or [[HTML5]]).
+ An element which lacks data validity semantics is neither <code>:valid</code>
+ nor <code>:invalid</code>. This is different from an element which
+ otherwise has no constraints. Such an element would always be
+ <code>:valid</code>. For example, a text input field with no constraints
+ would always be <code>:valid</code>.
+
+<h3 id="pseudo-range">
+The range pseudo-classes <code id="pseudo-in-range">:in-range</code> and
+<code id="pseudo-out-of-range">:out-of-range</code></h3>
+
+ <p>The <code>:in-range</code> and <code>:out-of-range</code> pseudo-classes
+ apply only to elements that have range limitations. An element is
+ <code>:in-range</code> or <code>:out-of-range</code> when the value
+ that the element is bound to is in range or out of range with respect
+ to its range limits as defined by the document language. An element
+ that lacks data range limits or is not a form control is neither
+ <code>:in-range</code> nor <code>:out-of-range</code>.
+ E.g. a slider element with a value of 11 presented as a slider control
+ that only represents the values from 1-10 is :out-of-range. Another
+ example is a menu element with a value of "E" that happens to be
+ presented as a popup menu that only has choices "A", "B" and "C".
+
+<h4 id="pseudo-required-value"><span id="pseudo-required">:required</span>
+and <span id="pseudo-optional">:optional</span></h4>
+
+ <p>A form element is <code>:required</code> or <code>:optional<code>
+ if a value for it is, respectively, required or optional before the
+ form it belongs to can be validly submitted. Elements that are not
+ form elements are neither required nor optional.
+
+<h4 id="pseudo-ro-rw">
+The mutability pseudo-classes <code id="pseudo-read-only">:read-only</code>
+and <code id="pseudo-read-write">:read-write</code></h4>
+
+ <p>An element whose contents are not user-alterable is
+ <code>:read-only</code>. However, elements whose contents are
+ user-alterable (such as text input fields) are considered to be
+ in a :read-write state. In typical documents, most elements are
+ <code>:read-only</code>. However it may be possible (e.g. in the
+ context of an editor) for any element to become <code>:read-write</code>.</p>
+
+ <p class="issue">I don't think it makes sense for an editor to
+ match selectors differently because it is an editor rather than
+ a renderer.
<h2 id=structural-pseudos>
Tree-Structural pseudo-classes</h2>
Received on Wednesday, 10 August 2011 19:31:08 UTC