Selecting Elements Based on Attributes

You can also apply formatting to those elements that have a given attribute or attribute value.

Figure 9.35. In this code, only the two inner div elements have class attributes.

To select elements to format based on their attributes:

1.	If desired, type element, where element is the selector for the element whose attributes are in question.
2.	Type [attribute, where attribute is the name of the attribute that an element must have to be selected.
3.	If desired, type ="value" if you want to specify the value that the attribute must have for its element to be selected. Or, if desired, type ~="value", to specify a value that the attribute can contain (along with other content) for its element to be selected. Or, if desired, type | (the pipe symbol) ="value" to specify that the attribute's value begin with value- (that is, what you typed followed by a hyphen) in order for its element to be selected. (This is most common when searching for elements in a particular language.)
4.	Type ] (Figure 9.36). Figure 9.36. The square brackets enclose the desired attribute and any desired value.

Tip

• Selecting elements based on the attributes (and values) they contain is supported by all current major browsers (including IE as of version 7).

  Figure 9.37. Every div element that contains a class attribute, regardless of the class's value, is red.