INTRODUCTION TO CSS3 AND MODERN WEB DESIGN - Practical CSS3: Develop and Design - page 22

TAB LE 1.3 CSS Selectors Reference (continued)

SELECTOR EXAMPLE DESCRIPTION BROWSER

SUPPORT

Descendant Selects the element on the right only if it is nested

somewhere inside the element(s) to the left. You
can chain more than two together—for example,
nav li a.

All.

nav a

Child body>header Selects the element on the right only if it is a

direct child of the element(s) to the left. You can
chain more than two together—for example,
body>header>p.

Not IE6 or
earlier.

Adjacent sibling Selects the element on the right only if it comes

immediately after the element on the left in the
source order, and they are siblings at the same
nesting level. It's perfect if, for example, you set
paragraphs to have an indent on the first line but
want to remove that indent for the first line after
each heading.

Not IE6 or
earlier.

h1 + p

General sibling h1 ~ img Selects the element on the right only if it is a sib-

ling (at the same nesting level) as the element on
the left. It's great for setting that indent mentioned
previously on each paragraph after a heading or
giving a special styling only to images inside an
article at the same level as a heading.

Not IE6 or
earlier.

UI element
pseudo-classes

Styles the default state of a link. All.

a:link

a:visited Styles links when they've already been visited. All.

Styles elements when they're hovered over. All.

img:hover

input:focus Styles elements when they're given focus (e.g., with

the keyboard).

All.

Styles links while they are being activated (e.g., by
being clicked on).

All.

a:active

continues on next page