Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP

B.3. Selector Review

Preceding any block of CSS property assignments is a description of the HTML elements to which the properties apply. There are four basic mechanisms for matching properties to tags:

• By tag name

• By attribute presence or value

• By position within the document

• By pseudo-class

There is also a mechanism for assigning properties to portions of the document that are not elements as such: by pseudo-element.

These methods are frequently combined to minimize collateral damage. Conversely, selectors may be grouped with commas to allow the same property assignments to apply in different contexts.

NOTE

Selectors are covered in-depth in Chapter 13.

B.3.1. Name Matching

This is fairly straightforward, and many selectors include at least one element name. There are two issues involving name matches that may surprise the unwary:

• With XHTML (or any XML grammar), the element names are case sensitive.

• The asterisk (*) serves as a wildcard that matches any tag, although it cannot be used to match a substring. For example, t* may not be used to represent table-related element names.

B.3.2. Attribute Matching

The most general syntax, which can be used to match any attribute, involves square brackets: [colspan] will match any element (presumably td or th) with the colspan attribute set, and [colspan="3"] will match any element with colspan defined with a value of 3.

There exist variations on the preceding syntax for matching a part of an attribute value; see Chapter 13 for more details. ...