Re: :required validation in CSS3
"Jukka K. Korpela" <[email protected]> Fri, 17 Jun 2016 07:16:13 +0300
| Newsgroups | gmane.org.w3c.validator.css |
|---|---|
| Message-ID | <[email protected]> |
15.6.2016, 23:49, Kravvitz wrote:
> Isn't the main difference between a given attribute selector and its
> equivalent pseudo-class that the attribute selector only matches the
> attribute but a pseudo-class can be dynamic (e.g. respond to a property
> change or other change in state)?
That=E2=80=99s the conceptual difference.
> An example would be "p:lang(en)",
> which will match the "computed language" (for lack of a better term) of
> paragraph elements whereas "p[lang|=3Den]" will only match the attribut=
e
> on the paragraph elements themselves.
That=E2=80=99s a case where the conceptual difference matters. The reason=
is=20
that the declared language of an element is defined so that setting the=20
lang or xml:lang attribute on an element sets it for its children, too,=20
unless they have their own lang or xml:lang attribute.
For :required, the situation is different. As far as I can see, the=20
conceptual difference is insignificant in practice; I suppose this is=20
the reason why :required has been omitted.
> Fortunately, JavaScript can be
> used to simulate most pseudo-classes, either by calling "setAttribute()=
"
> or by adding/removing a class to/from the element.
It would be logical to think that [required] would refer to the presence=20
of an attribute in HTML or XML markup only. But under
=E2=80=9C6.3.4. Default attribute values in DTDs=E2=80=9D, the CSS 3 Sele=
ctors spec says:
=E2=80=9CAttribute selectors represent attribute values in the document t=
ree.=20
How that document tree is constructed is outside the scope of Selectors.=E2=
=80=9D
So setting an attribute in JavaScript can be expected to be relevant to=20
the interpretation of attribute selectors in CSS. This means that=20
[required] is just as dynamic as :required =E2=80=93 or am I missing some=
other=20
dynamics that might apply?
It seems that you don=E2=80=99t even need to use setAttribute(). Setting =
the=20
property directly in JavaScript works, too. This change is reflected as=20
a change of the corresponding attribute.
In the following example, both <input> elements are rendered so that=20
both CSS rules apply (when JavaScript execution is enabled):
<!doctype html>
<title>required</title>
<style>
:required { border: solid red; }
[required] { background: yellow; }
</style>
<input required>
<p>
<input id=3Dfoo>
<script>
document.getElementById('foo').required =3D true;
</script>
Yucca