HTML and CSS Reference
In-Depth Information
Selector
Description
Example
Defined In
Selects all elements of
E that have the given
attribute attr
CSS2
E[
attr
]
a[href] {background-color:
yellow;}
/* sets the background color
to yellow for all a tags
that have an href attribute
*/
E[
attr=value
]
Selects all elements of
E that have set the given
attribute attr equal to
the given value
a[href="http://www.htmlref
.com"] {font-weight: bold;}
/* sets the font-weight to
bold on all a tags that have
their href attribute set to
http://www.htmlref.com */
CSS2
E[attr|=value]
Selects all elements of
E that have an attribute
that contains a value
that starts with a
value that is a list of
hyphen-separated values
p[lang|="en"] { color: red;}
/* English text in red */
CSS2
E[attr~=value]
Selects all elements
of E that have a space-
separated list of values
for attr where one of
those values is equal to
the given value
p[title~="Test"]
{font-style: italic;}
/* sets the font style to
italic on all p tags that
have one word in their title
equal to Test */
CSS2
Selects all elements of
E that have the attribute
attr that begins with the
given value
CSS3
E[attr^=value]
p[title^="HTML"]{color:
green;}
/* sets the color to green
if the title starts with
HTML */
E[attr$=value]
Selects all elements of
E that have the attribute
attr that ends with the
given value
p[title$="!"]{color: red;}
/* sets the color to red
if the title ends with an
exclamation mark */
CSS3
Selects all elements of
E that have the attribute
attr that contains the
given value
CSS3
E[attr*=value]
p[title*="CSS"]{font-style:
italic;}
/* sets the font style to
italic in any p tag that has
CSS in its title */
T
ABLE
4-7
CSS Attribute Selectors
