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:


If desired, type element, where element is the selector for the element whose attributes are in question.


Type [attribute, where attribute is the name of the attribute that an element must have to be selected.


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


Type ] (Figure 9.36).

Figure 9.36. The square brackets enclose the desired attribute and any desired value.


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

HTML, XHTML, & CSS(c) Visual QuickStart Guide
HTML, XHTML, and CSS, Sixth Edition
ISBN: 0321430840
EAN: 2147483647
Year: 2004
Pages: 340

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: