CSS Syntax and Property Reference - HTML and CSS: The Complete Reference - page 534

Selector Description Example Defined In

Selects direct
descendents

CSS2

E > F body > p {background-color:

yellow;}
/* makes all p tags that have the
body tag as their immediate parent
have the background color yellow */

E + F Selects adjacent

siblings

h1 + p {color: red;}
/* makes all p tags that are
immediately preceded by an h1 tag
red */

CSS2

Selects preceding
siblings

CSS3

E ~ F p ~ strong {font-style: italic;}

/* sets the font style to italic
on all strong tags that have a p
tag as a preceding sibling */

E[ attr ] Selects all elements of

E that have the given
attribute attr

a[href] {background-color: yellow;}
/* sets the background color to
yellow for all a tags that have an
href attribute*/

CSS2

Selects all elements
of E that have set the
given attribute attr
equal to the given
value

CSS2

E[ attr = 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 */

E[ attr |= value ] Selects all elements of

E that have an attribute
attr that contains a
value that starts with
the value given in a list
of hyphen-separated
values

p[lang|="en"] { color: red; }
/* English text in red */

CSS2

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

CSS2

E[ attr ~= 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 */

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 */

T ABLE 5-5 CSS Selectors