CSS3 Proprietary and Emerging Features Reference - HTML and CSS: The Complete Reference - page 617

Selector Description Example

E ~ F Selects siblings. 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 ^= value ] Selects all elements of E
that have the attribute attr
that begins with the given
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 end with the given
value.

p[title$="!"] {color: red;}
/* sets the color to red if the title
ends with an exclamation mark */

E[ attr *= value ] Selects all elements of E
that have the attribute attr
that contains the given
value.

p[title*="CSS"] {font-style: italic;}
/* sets the font style to italic in
any p tag that has CSS in its title
*/

::after Same as :after ;

changed under CSS3 to
make pseudo-elements
obvious.

div::after {content: url(sectionend
.gif);}
/* inserts the sectionend.gif image
immediately following all div tags */

::before Same as :before ;

changed under CSS3 to
make pseudo-elements
obvious.

div::before {content:
url(sectionstart.gif);}
/* inserts the sectionstart.gif image
before all div tags */

:checked Selects the elements that

are checked.

:checked {color: blue;}
/* sets the color to blue if an
element is checked */

:default Selects the elements that

are the default among a
set of similar elements.

:default {background-color: red;}
/* sets the background color of a
default button like a submit to red
*/

:disabled Selects the elements that

are currently disabled.

input:disabled {background-color:
gray;}
/* sets the background color to gray
on disabled input elements */

:empty Selects an element that

has no children.

div:empty {display: none;}
/* hides the div if it has no
children */

T ABLE 6-2 CSS3 Selectors (continued)