HTML and CSS Reference
In-Depth Information
Selector
Description
Example
:default
Selects the interactive element out
of a group that is the default choice.
Generally used with input elements.
input[type="submit"]:default
{color: red;}
/* makes the default submit
button red */
:in-range
Used to select interactive elements
whose values are found within a
range specified by the HTML5
min
and
max
attributes.
:in-range {color: green;}
/* if in defined range, say 1 -
100, set with min and max, makes
the element green */
:invalid
Applies styles to elements that are
invalid per HTML5 validations set
by the
pattern
or implied by the
type
attributes for the form control.
:invalid {color: red;}
/* all fields currently in error
are set red */
Applies styles to elements that
are optional (not required to be
addressed before submission) as
defined by all elements without the
HTML5
required
attribute set.
:optional
:optional {color: gray;}
:out-of-range
Used to select interactive elements
whose values are outside the range
specified by the HTML5
min
and
max
attributes.
:out-of-range {color: red;}
/* if beyond defined range, say
1 - 10,0 set with min and max,
makes the element red */
:read-only
Used to select elements that are
read-only. When applied to form
elements, this would select fields
with the
readonly
attribute set.
input:read-only {color: gray;}
/* put all read only fields in
gray */
Used to select elements that
are possible to read and write.
While this would apply to all
form elements, considered
with the emerging use of
contenteditable
this suggests
this selector may have value beyond
form fields.
:read-write
p:read-write {outline: green
solid 10px;}
/* Provides hints on what
paragraphs are editable */
:required
Applies styles to elements that are
required (must be addressed before
submission) as defined by the
HTML5
required
attribute.
:required:after {content: " ( *
) "; color: red;}
/* marks the required fields
with common red color and symbol
indicator */
:valid
Applies styles to elements that are
valid per HTML5 validations set
either with the
pattern
or
type
attributes.
:valid {color: green;}
/* all fields not in error are
set green */
T
ABLE
6-3 Emerging CSS3 Selectors Summary
