*

This selector matches any element name in the document’s language. If a rule does not have an explicit selector, then the universal selector is inferred.

* {color: red;}
div * p {color: blue;}

All CSS-aware browsers.

element1

This selector matches the name of an element in the document’s language. Every instance of the element name is matched. (CSS1 referred to these as “element selectors.”)

body {background: #FFF;}
p {font-size: 1em;}

All CSS-aware browsers.

element1 element2

This allows the author to select an element based on its status as a descendant of another element. The matched element can be a child, grandchild, great-grandchild, etc., of the ancestor element. (CSS1 referred to these as “contextual selectors.”)

body h1 {font-size: 200%;}
table tr td div ul li {color: purple;}

All CSS-aware browsers.

element1 > element2

This type of selector is used to match an element based on its status as a child of another element. It is more restrictive than a descendant selector, as only a child will be matched.

div > p {color: cyan;}
ul > li {font-weight: bold;}

Firefox, Internet Explorer 7+ only, Opera, Safari.

element1 + element2

This allows the author to select an element that is the following adjacent sibling of another element. Any text between the two elements is ignored; only elements and their positions in the document tree are considered.

table + p {margin-top: 2.5em;}
h1 + * {margin-top: 0;}

Firefox, Internet Explorer 7+ only, Opera, Safari.

element1.classname
element1.classname1.classname2

In languages that permit it, such as HTML, XHTML, SVG, and MathML, a class selector using “dot notation” can be used to select elements that have a class attribute containing a specific value or values. The name of the class value must immediately follow the dot. Multiple class values can be chained together, although there are support problems in Explorer previous to IE7. If no element name precedes the dot, then the selector matches all elements bearing that class value or values.

p.urgent {color: red;}
a.external {font-style: italic;}
.example {background: olive;}
.note.caution {background: yellow;}

All CSS-aware browsers.

IE previous to IE7 does not support the chained selector syntax, though it does permit multiple words in class values in the markup.

element1#idname

In languages that permit it, such as HTML or XHTML, an ID selector using “hash notation” can be used to select elements that have an ID containing a specific value or values. The name of the ID value must immediately follow the octothorpe (#). If no element name precedes the octothorpe, then the selector matches all elements containing that ID value.

h1#page-title {font-size: 250%;}
body#home {background: silver;}
#example {background: lime;}

All CSS-aware browsers.

element1[attr]

This allows authors to select any element based on the presence of an attribute, regardless of the attribute’s value.

a[rel] {border-bottom: 3px double gray;}
p[class] {border: 1px dotted silver;}

Firefox, Internet Explorer 7+ only, Opera, Safari.

element1[attr="value"]

This allows authors to select any element based on the precise and complete value of an attribute.

a[rel="Start"] {font-weight: bold;}
p[class="urgent"] {color: red;}

Firefox, Internet Explorer 7+ only, Opera, Safari.

element1[attr˜="value"]

This allows authors to select any element based on a portion of the space-separated value of an attribute. Note that [class˜="value"] is equivalent to .value (see above).

a[rel|="friend"] {text-transform: uppercase;}
p[class|="warning"] {background: yellow;}

Firefox, Internet Explorer 7+ only, Opera, Safari.

element1[attr^="substring"]

This allows authors to select any element based on a substring at the very beginning of an attribute’s value.

a[href^="/blog"] {text-transform: uppercase;}
p[class^="test-"] {background: yellow;}

Firefox, Internet Explorer 7+ only, Opera, Safari.

element1[attr$="substring"]

This allows authors to select any element based on a substring at the very end of an attribute’s value.

a[href$=".pdf"] {font-style: italic;}

Firefox, Internet Explorer 7+ only, Opera, Safari.

element1[attr*="substring"]

This allows authors to select any element based on a substring found anywhere within an attribute’s value.

a[href*="oreilly.com"] {font-weight: bold;}
div [class*="port"] {border: 1px solid red;}

Firefox, Internet Explorer 7+ only, Opera, Safari.

element1[lang|="lc"]

This allows authors to select any element with a lang attribute whose value is a hyphen-separated list of values, starting with the value provided in the selector.

html[lang|="tr"] {color: red;}

Firefox, Internet Explorer 7+ only, Opera, Safari.