Descendant

The contents shown here are inside a <section> tag.

This is an <h3> header.

This is a <p> paragraph. This is an image within the paragraph.

Select elements that are anywhere within the parent element.

section img {
   border:thick dotted red;
}

Children

The contents shown here are inside a <section> tag.

This is an <h3> header.

This is a <p> paragraph. This is an image within the paragraph.

Select elements that are only one level below the parent element.

section > img {
   border:thick dotted red;
}

Because the second image is a grandchild of the section, it does not the the dotted border.

Adjacent Sibling

The contents shown here are inside a <section> tag.

This is an <h3> header.

This is a <p> paragraph. This is an image within the paragraph.

This is another paragraph.

Select an element that comes immediately after another element with the same parent element

h3 + p {
   border:thick dotted red;
}

You’ll notice that the first paragraph does not have the dotted border because it does not have an <h3> sibling before it.

General Sibling

The contents shown here are inside a <section> tag.

This is an <h3> header.

This is a <p> paragraph. This is an image within the paragraph.

This is another paragraph.

Select an element that comes after (but not necessarily directly after) another element with the same parent element

h3 ~ p {
   border:thick dotted red;
}

All paragraphs following the h3 are targeted.

Class and Id

.className

#idName

Pseudo Selectors

These selectors target elements that have a particular characteristic.

Pseudoclasses

Anchor

These can apply to elements other than anchors.

:link, :visited, :hover, :active

Other

:disabled, :enabled

:focus

:checked — A form element that is checked.

:selection — User highlighted text.

:lang

:nth-child(n), :nth-last-child(n)

Would you care if I blow your mind now? Check this out:

li { color: #00F; }
li:nth-child(odd):not(:last-child) { color: #F00; }

• line 1
• line 2
• line 3
• line 4
• line 5

This will alternate the coloring of every other row, but force the last row to always be blue.

:first-child, :last-child, :only-child

Examples: p:first-child means select the first paragraph that is a child.
:first-child means select the first anything that is subordinate to another element.
div :first-child means select the first anything that appears anywhere inside a div (could be multiple hits).
div>:first-child means target the first thing following a div. This one is actually pretty neat and I can see using it in several places.

:nth-last-of-type(n), :last-of-type, :first-of-type, :only-of-type

:empty An element that has no children

:root

:not(x)

:target

Pseudo-elements

:first-line

:first-letter

:before and :after

Smashing magazine has a great description of :before and :after.

Attribute Selectors

These are used to target elements based on their attributes.

Has the attribute: p[id]

Matches <p id>, <p id="this-one">

Exact match: p[id="thisOne"]

Matches <p id="thisOne">

Contains: p[id~="this"]

Matches <p id="this">, <p id="thisOne">, and <p id="and-this">

Prefix: p[id|="this"]

Matches <p id="this">, <p id="this-one">, and <p id="this-two">

Cheat Sheet

See the last page of the the CSS3 Cheat Sheet for a summary of these selectors.