Section 17.2. Contextual Selectors

17.2. Contextual Selectors

Type selectors, such as those in the previous example, apply to all instances of that element found in a document. By contrast, contextual selectors allow you to apply style properties to select elements, based on their context or relation to another element. There are several types of contextual selectors: descendant, child, and adjacent sibling. This is where being familiar with the document tree structure of your document comes in handy.

Contextual selectors use a specific character to signify the type of relationship between the elements in the selectors. This character is known as the combinator.

17.2.1. Descendant Selector

Descendant selectors target elements that are contained within (therefore descendants of) another element. They are indicated in a list separated by a character space (the combinator for descendant selectors ), starting with the higher-level element. For example, the following rule specifies that em elements should be olive, but only when they are descendants of a list item (li). All other em elements are unaffected by this rule.

     li em {color: olive;} 

Like simple type selectors , contextual selectors can be grouped together in comma-separated lists. The following code makes emphasized (em) text red only when it appears in the context of a first-, second-, or third-level heading:

     h1 em, h2 em, h3 em {color: red;} 

Descendant selectors may also be nested several layers deep, as shown in this example that targets only emphasized text (em) within anchors (a) within ordered lists (ol).

     ol a em {font-weight: bold;} 

17.2.2. Child Selector

A child selector is similar to the descendant selector, but it targets only direct children of a given element. In other words, the element must be contained directly within the higher-level element with no other element levels in between. Child selectors are separated by the greater-than symbol (>). The rule in the following example makes the background of emphasized text gray, but only when it is the child of a paragraph:

     p > em {background-color: gray;} 

Therefore, in the following markup example, only the first instance of em receives a gray background, because the second one is the child of an intervening strong element:

     <p>I've got <em>laser</em> eyes, and <strong>I know what you're <em>thinking.</em></strong></p> 

17.2.3. Adjacent Sibling Selector

The adjacent sibling selector is used to target an element that comes immediately after another element with the same parent element. The combinator for adjacent sibling selectors is a plus (+) sign. For example, if you wanted to give special presentation treatment to the first paragraph following a first-level heading, the resulting rule would look like this:

     H1 + p {padding-left: 40;} 

Browser alert: Child selectors and adjacent sibling selectors are not supported by Netscape 4 or Internet Explorer Version 6 and earlier. Support in Internet Explorer 7, in beta as of this writing, is not yet documented.