Defining Selectors Based on Tag Attributes

Although style attributes should all be handled by CSS, many HTML tags still have attributes that define how they behave. For example, the image tag (img) always includes the src attribute to define the source for the image file to be loaded.

Styles can be assigned to an HTML element based on an attribute or an attribute value, allowing you to set styles if the attribute has been set, is or is not a specific value, or contains a specific value (Table 2.2).

Table 2.2. Attribute Selectors
FORMAT	DESCRIPTION	COMPATIBILITY
[attr]	Attribute	IE7, FF1.5, O5, S2, CSS2
[attr="value"]	Exact value	IE7, FF1.5, O5, S2, CSS2
[attr~="value"]	Value in space-separated list	IE7, FF1.5, O5, S2, CSS2
[attr\|="value"]	Begins with value in hyphen-separated list	IE7, FF1.5, O5, S2, CSS2

The syntax for the different attribute selectors is shown in Figures 2.32, 2.33, 2.34, and 2.35.

Figure 2.32. The general syntax for an attribute selector.

Figure 2.33. The general syntax for an exact value attribute selector.

Figure 2.34. The general syntax for a value in a space-separated list-attribute selector.

Figure 2.35. The general syntax for a value at the beginning of a hyphen-separated list-attribute selector.

In this example (Figure 2.36), I've done the following:

Set up a list of navigation links
Set the style of the navigation link that has the URL "index.html" to be a good deal larger than the rest
Set images with the onclick event handler to have a thick, red border
Set styles for the images with an alt tag that contains the word "Illustration" in it.

Figure 2.36. The link for "Cover" is styled to make it more prominent; the text in French is black; the image labeled as an "illustration" has a red double-line border and the image with an `onclick` event handler has a thick solid red border.

To set styles based on an element's attributes:

img[onclick] {...}

To set styles based on the existence of an attribute, type the selector you want to style (HTML, class, or ID), an opening square bracket, the name of the attribute you want to check for, and the closing square bracket (Code 2.17).

Code 2.17. There are several ways to define styles based on the attributes defined within an HTML tag.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Defining Tags in Context | Universal</title> <style type="text/css" media="all"> body {      font: 1.2em Georgia, 'Times New Roman', times, serif;      background-color: #fff;      color: #000000;      margin: 8px; } a {     color: red; } img[onclick] {      float: left;      border: 4px red solid; }      a[href='index.html'] {      font-size: 3em;      color: black;      text-decoration: none; }      img[alt~='Illustration'] {      float: left;      border: 6px red double; }      p[lang|="fr"] {      color: black; }      p[lang|="en"] {      color: #999; } </style> </head> <body> <div><a href="index.html">Cover</a> | <a href="#">Table of Content</a> | <a href="#">Photo Gallery</a> | <a href="#">Credits</a> <p lang="en-US">In US English: The color of the leaves</p> <p lang="en-UK">In UK English: The colour of the leaves</p> <p lang="fr">In French: La couleur des feuilles</p> </div> <div> <img src="/books/3/292/1/html/2/aliceInLeaves.jpg" onclick="photocredits('jason')" alt="Photo-of-Alice" width="363" height="484" /> <img src="/books/3/292/1/html/2/alice15a.gif" alt="Illustration of Alice" width="363" height="480" /> </div> </body></html>

This will assign the styles you declare only if the tag has this attribute assigned to it, regardless of the value.

a[href='index.html'] {...}

To set styles based on an attribute's exact value, type the selector you want to style (HTML, class, or ID), an opening square bracket, the name of the attribute you want to check for, an equal sign (=), the value you are testing for in quotes ('...'), and the closing square bracket.

This will assign the styles you declare only if the tag has this attribute assigned to it with the exact assigned value.

img[alt~='Illustration'] {...}

To set styles based on an attribute's value that is within a list of space separated values (for example, a particular word in a sentence), type the selector you want to style (HTML, class, or ID), an opening square bracket, the name of the attribute you want to check for, a tilde (~), an equal sign (=), the value you are testing for in quotes ('...'), and the closing square bracket.

This will assign the styles you declare only if the tag has this attribute assigned to it with a value that contains the value as part of a list separated by spaces. Generally, this means that it is a word in a sentence. Partial words do not count. So, for example, testing for 'Ill' in this example will not work.

p[lang|='en'] {...}

To set styles based on an attribute's value being the first in a list separated by hyphens, type the selector you want to style (HTML, class, or ID), an opening square bracket, the name of the attribute you want to check for, a bar (|), an equal sign (=), the value you are testing for in quotes ('...'), and the closing square bracket.

This will assign the styles you declare only if the tag has this attribute assigned to it with a value that contains the value at the beginning of list separated by hyphens. Generally, this is used for styling languages as an alternative to using the language pseudo-class.