HTML and CSS Reference
In-Depth Information
would set any text field that has a
readonly
attribute set to have a dashed red border. If we
wanted to select fields that were both readable and writable, we would use a rule like
input[type=text]:read-write {border: 2px dashed red;}
which would pick all text fields that are not read-only.
If we have a set of various input elements where one is the default, we could use the
:default
pseudo-class rule to style it. For example,
input[type=submit]:default {background-color: red;}
would set the default submit button in a form to have a red background.
Looking further, the meaning of the emerging pseudo-classes becomes less clear. While
it seems obvious reading the specification that
:valid
and
:invalid
could be used to style
interface elements which are not in a valid state, a pseudo-class of
:required
would pick
fields which are required state and so on. However, even if the selectors are clear, the big
question is how do you actually indicate such states for markup elements? The specification
defines that this is related to WebForms, which is not a well-implemented technology.
However, many of the useful ideas of that specification have made their way into HTML5,
so it is quite possible these selectors will someday be implemented. Certainly support for
these selectors should not be assumed, so please test the example online.
O
NLINE
http://htmlref.com/ch4/elementstate.html
Document Tree Pseudo-Classes
CSS2 supports a pseudo-class
:first-child
that is used to find only the first child of a
parent element. For example,
ul li:first-child {font-weight: bold;}
would make the first
<li>
tag found within an unordered list tag (
<ul>
) bold. Do note that
without using descendent selectors, you are specifying a universal selector. For example, a
rule like
p:first-child {color: red;}
really is
* p:first-child {color: red;}
because it says that any time a
<p>
tag is a first child of some element including the
body
element it would be red. Try for yourself, using this simple example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
First Child Pseudo-Class
</title>
<style type="text/css" media="screen">
p:first-child { color: red;}
</style>
</head>
