For your information, here is a list of CSS Selectors as defined in the W3C CSS 2.1 Specification.
Universal Selector
Pattern:
*
Description:
Matches any element name in the document.
Examples:
* {color: #F00;}
div * p {line-spacing: 120%;}
Browser Support:
All CSS-Aware Browsers
Type Selector
Pattern:
element1
Description:
This selector matches all instances of the element name in the document.
Examples:
body {background: blue;}
image {border: 0;}
Browser Support:
All CSS-Aware Browsers
Class Selector
Pattern:
element1.classname1
element1.classname1.classname2
Description:
Matches instances of an element with a specific class attribute. If more than one class attribute is given, it matches instances of the element with all of the classes.
Examples:
a.nounderline {text-decoration: none;}
.noborder {border: 0;}
Browser Support:
All CSS-Aware Browsers. IE < 7 only supports one class per selector.
ID Selector
Pattern:
element1#idname
Description:
Matches the first instance of an element with a specified id attribute.
Examples:
div#wrapper {width: 100%;}
img#header {height: 80px;}
Browser Support:
All CSS-Aware Browsers.
Descendant Selector
Pattern:
element1 element2
Description:
Selects elements which are descendants of another element, meaning that it is nested between the other element. The element can be a child, grandchild, great-grandchild, etc.
Examples:
body div {background: blue;}
li a {text-decoration: none;}
Browser Support:
All CSS-Aware Browsers
Child Selector
Pattern:
element1 > element2
Description:
Selects elements which are children of another element, similar to the descendant selector. The element can only be a child, that is, if you have an img wrapped by a div wrapped by a table,
table > img will not match the img, because it is a grandchild.
Examples:
body > img {border: 0;}
ol > li {color: white;}
Browser Support:
Firefox, Internet Explorer 7+, Opera, Safari
Sibling Selector
Pattern:
element1 + element2
Description:
Selects elements which are siblings of another element, that is, wrapped by the same tag. Only adjacent siblings are selected. Any text between the siblings are ignored, only the document tree is used.
Examples:
p + img {padding: 4px;}
h1 + * {margin-bottom: 5px;}
Browser Support:
Firefox, Internet Explorer 7+, Opera, Safari
Simple Attribute Selector
Pattern:
element1[attrib]
Description:
Selects elements with the given attribute set, regardless of value.
Examples:
a[title] {border-bottom: 1px dotted #999;}
img[class] {margin: 5px;}
Browser Support:
Firefox, Internet Explorer 7+, Opera, Safari
Exact Attribute Value Selector
Pattern:
element1[attrib="value"]
Description:
Selects elements with the given attribute set to a certain value.
Examples:
img[alt="go"] {padding: 0.4em;}
div[class="urgent"] {color: red;}
Browser Support:
Firefox, Internet Explorer 7+, Opera, Safari
Beginning Substring Attribute Value Selector
Pattern:
element1[attrib^="substring"]
Description:
Selects elements with the given attribute with a given substring at the very start of the value.
Examples:
a[href^="/blog"] {color: purple}
img[src^="/images/icons"] {border: 0;}
Browser Support:
Firefox, Internet Explorer 7+, Opera, Safari
Ending Substring Attribute Value Selector
Pattern:
element1[attrib$="substring"]
Description:
Selects elements with the given attribute with a given substring at the very end of the value.
Examples:
a[href$=".pdf"] {font-weight: bold;}
img[src$=".jpg"] {border: 1px solid #999;}
Browser Support:
Firefox, Internet Explorer 7+, Opera, Safari
Arbitrary Substring Attribute Value Selector
Pattern:
element1[attrib*="substring"]
Description:
Selects elements with the given attribute with a given substring at any position in the value.
Examples:
a[href*="goatse.cx"] {display: none;}
div[class*="right"] {float: right;}
Browser Support:
Firefox, Internet Explorer 7+, Opera, Safari
There are two more, the Partial Attribute Value Selector, which is like the Arbitrary Substring Value Selector, except the substring has to be seperated by a space from the rest of the value, and the Language Attribute Selector, which I don't think people actually use.
For the W3C technical specification, go to
http://www.w3.org/TR/2001/CR-css3-selectors-20011113/.
(By the way, who came up with these names?)
