Note: Some content from CSS Anthology 3rd Edition, sitepoint books.
All HTML elements can have associated properties, called attributes. These attributes generally have values. Any number of attribute/value pairs can be used in an element's tag - as long as they are separated by spaces. They may appear in any order.
In the example below, the code segments highlighted in blue are attributes and the segments highlighted in red are attribute values.
<h1 id="section1">
<img src="small.gif" width="100" height="100">
<img title="mainimage" alt="main image">
<a href="foo.htm">
<p class="maintext">
<form style="padding: 10px">
Attribute selectors are used to select elements based on their attributes or attribute value. For example, you may want to select any image on an HTML page that is called "small.gif". This could be done with the rule below, that will only target images with the chosen name:
img[src="small.gif"] { border: 1px solid #000; }
There are four types of attribute selectors.
The first option is to select based on attribute. The example below will select an element (in this case "img") with the relevant attribute. Examples could include:
img[title] { border: 1px solid #000; }
img[width] { border: 1px solid #000; }
img[alt] { border: 1px solid #000; }
The second option is to select based on value. The example below will select any image whose attribute (in this case "src") has a value of "small.gif".
img[src="small.gif"] { border: 1px solid #000; }
The third method will select space separated instances of a value. The example below will select any image whose attribute (in this case "alt") contains a space separated list of words - in this case any "alt" that includes the word "small".
img[alt~="small"] { border: 1px solid #000; }
The fourth method will select hyphen separated instances of a value. The example below will select any image whose attribute (in this case "title") has a hyphen separated list - in this case any title that includes "small-".
img[title|="small"] { border: 1px solid #000; }
Attribute selectors are not supported by Windows Internet Explorer 5, 5.5 and 6 or Macintosh Internet Explorer 5. They are also not supported by earlier versions of Opera.
a[href ^="mailto:"] {
padding-left: 20px; background-image: url(link_icon_email.gif); background-repeat: no-repeat;
}
The ^= operator means “begins with”.
a[href $=".pdf"] {
padding-left: 20px; background-image: url(link_icon_pdf.gif); background-repeat: no-repeat;
}
The $= operator means “ends with”.
a[href *="google"] {
color: red;
}
The *= operator in this case matched links that contain "google".
These CSS3 attribute selectors are widely supported in modern browsers, although they will be ignored in Internet Explorer 6.
Note: Some content from CSS Anthology 3rd Edition, sitepoint books.