HTML and CSS Reference
In-Depth Information
TAB LE 1.3
CSS Selectors Reference
(continued)
SELECTOR
EXAMPLE
DESCRIPTION
BROWSER
SUPPORT
UI element
pseudo-classes
(continued)
Styles form inputs that contain valid data. These
types of selectors are very useful for giving users
hints about whether their form data is valid or not.
Not supported
in IE.
input:valid
input:invalid
Styles form inputs that contain invalid data.
Not supported
in IE.
Styles enabled form inputs.
All.
input:enabled
input:disabled
Styles disabled form inputs.
All.
Styles form inputs that contain data that is inside
the valid range.
Not supported
in IE.
input:in-range
input:out-of-range
Styles form inputs that contain data that is outside
the valid range.
Not supported
in IE.
Negation selector
input:not([type="submit"])
Styles the specified element if it isn't selected by
the simple selector(s) inside the parentheses. This is
useful in cases where you have several similar ele-
ments and want to select them all except for one
of two. For example, when laying out a form you'll
want to give most of the inputs an equal width
but not the
submit
or
file
inputs. You can include
multiple selectors to negate inside the paren-
theses in a comma-delimited list—for example,
input:not([type="submit"], [type="file"])
.
Not IE8 or
earlier.
Language selector
p:lang(en-US)
Styles the specified element only if it has the
language inside the parentheses set on it via the
lang attribute.
Not IE6 or
earlier.
Target selector
Styles the element only if it is the target of a link.
It's incredibly cool for making content appear at
the click of a button, such as overlays, information
boxes, or different tabs in a tabbed interface, with-
out needing JavaScript. The main problem is that
each new state will be at a different URL, so it can
break the expected Back button functionality.
Not IE8 or
earlier.
article:target
