DAN STORM

• previous
• next

Indirect Adjacent Sibling Selector

We've already studied the direct adjacent sibling selector in CSS2.1. As you should recall, the direct adjacent sibling selector is a compound selector consisting of at least two selectors and a sibling combinator. It matches one selector with another selector that immediately precedes it when both share the same parent. By contrast, the indirect adjacent sibling selector need not immediately precede the second matching selector. That is, other elements might intervene at the same level of the document tree. Consider the two sibling selectors below.

The direct adjacent sibling selector would only style the first sample of HTML below, while the indirect adjacent sibling selector would style both.

The indirect adjacent sibling selector is also known as the General Sibling selector.

Substring Matching Attribute Selectors

In the former part of this course we were introduced to four attribute selectors: the simple attribute selector, for matching an attribute without regard to value; the attribute value selector (=), to select an exact attribute value; the one-of-many attribute value selector (~) to match a space-separated list of characters; and the hyphen attribute value selector (|), which applies when the attribute value is hyphen-separated. CSS3 introduces three more string selectors, and a namespace selector.

"Begins-with" Attribute Value Selector

The "^" selector matches the beginning of a string. You could use the following sample diagnostically to find all absolute URLs.

This selector is useful if you want to place an icon before all links that are external as in the example below.

"Ends-with" Attribute Value Selector

The "$" selector matches the end of a string. Here's a good application. It's frustrating to click on a link only to find out later that a PDF is launching. You can provide users a little icon to call out PDF links.

In this example all anchor tags whose hyper reference ends with ".pdf" will have a PDF icon after the link.

"Contains" Attribute Value Selector

This selector—not be confused with the universal selector—matches any string containing the designated text. Suppose that you want some images to have a border placed around them, and that all these images are uniquely located in the same directory.

This selector (*) will find the string "/products/". This differs from the one-of-many attribute value selector (~) in that this string is not space-delimited.

Namespace Selector

This syntax allows distinct XML namespaces to be addressed for attributes and their values in selectors. A namespace prefix that has been previously declared (via the @namespace at-rule) may be prepended to the attribute name separated by the namespace separator (|). In keeping with the namespaces in the XML recommendation, default namespaces do not apply to attributes, therefore attribute selectors without a namespace component apply only to attributes that have no declared namespace. An asterisk may be used for the namespace prefix indicating that the selector is to match all attribute names without regard to the attribute's namespace. Let's assume the following namespace declaration in the style sheet for the following examples.

We can apply styles based on namespaces using a pipe (|) (not to be confused with the hyphen attribute value selector). This rule will match elements with the attribute "type" in the "http://www.example.com" namespace with the value "text".

The next rule will match only elements with the attribute "align" regardless of the namespace of the attribute, (including no declared namespace).

The last two rules are equivalent and will match only elements with the attribute "style" where the attribute is not declared to be in a namespace.

Incidentally, finding all style attributes is useful if you wish to remove inline styles.

• previous
• next