B.1 Selectors

B.1 Selectors

B.1.1 Universal Selector

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.

Pattern: *

Examples:

* {color: red;}

div * p {color: blue;}

B.1.2 Type Selector

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.)

Pattern: element1

Examples:

body {background: #FFF;}

p {font-size: 1em;}

B.1.3 Descendant Selector

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.)

Pattern: element1 element2

Examples:

body h1 {font-size: 200%;}

table tr td div ul li {color: purple;}

B.1.4 Child Selector

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

Pattern: element1 > element2

Examples:

div > p {color: cyan;}

ul > li {font-weight: bold;}

B.1.5 Adjacent Sibling Selector

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.

Pattern: element1 + element2

Examples:

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

h1 + * {margin-top: 0;}

B.1.6 Class Selector

In languages that permit it, such as HTML, SVG, and MathML, a class selector using "dot notation" can be used to select elements that have a class containing a specific value or values. The name of the class value must immediately follow the dot. Multiple class values can be "chained" together. If no element name precedes the dot, then the selector matches all elements containing that class value.

Patterns: element1.classname element1.classname1.classname2

Examples:

p.urgent {color: red;}

a.external {font-style: italic;}

.example {background: olive;}

B.1.7 ID Selector

In languages that permit it, such as HTML, 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.

Pattern: element1#idname

Examples:

h1#page-title {font-size: 250%;}

body#home {background: silver;}

#example {background: lime;}

B.1.8 Simple Attribute Selector

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

Pattern: element1[attr]

Examples:

a[rel] {border-bottom: 3px double gray;}

p[class] {border: 1px dotted silver;}

B.1.9 Exact Attribute Value Selector

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

Pattern: element1[attr="value"]

Examples:

a[rel="Home"] {font-weight: bold;}

p[class="urgent"] {color: red;;}

B.1.10 Partial Attribute Value Selector

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).

Pattern: element1[attr~="value"]

Examples:

a[rel~="friend"] {text-transform: uppercase;}

p[class~="warning"] {background: yellow;}

B.1.11 Language Attribute Selector

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.

Pattern: element1[lang|="lc"]

Examples:

html[lang|="en"] {color: gray;}