Using Basic Selectors - Beginning CSS3 - page 22

Descendant Selectors
A descendant selector matches any element that is a descendant of another. To create a descendant selector,
separate the two selectors by a space, putting the ancestor first. For example, #sidebar p affects only paragraphs
that are descendants of an element that has the ID sidebar .
Attribute Selectors
An attribute selector matches any element that has a particular attribute in its opening HTML tag. Because IE 6
doesn't support them, attribute selectors have been largely overlooked by web designers. Now that the market
share of IE 6 has dropped to insignificant levels in many parts of the world, you should become familiar with
them and incorporate them into your styles unless a large part of your target audience is still using IE 6.
You create an attribute selector by putting the attribute—optionally with a value—in a pair of square
brackets after a type (tag) selector.
The following sections describe the most common attribute selectors.
Match Any Value
The simplest type of attribute selector matches an element that contains a particular attribute in its opening
tag. The value of the attribute is unimportant. For example, the following style rule adds a five-pixel red border
around every image that contains the alt attribute:
img[alt] {
border: 5px solid red;
}
This can be useful for checking that all images have alternate text before uploading your site. You can see
instantly if the alt attribute is missing from any images because they won't have a border. Obviously, you would
use this only for local testing—unless you like heavy red borders on your images, that is.
Match an Exact Value
To select elements with attributes that have a specific value, add an equal sign after the attribute followed by the
value you want to match. This is particularly useful when styling forms. For example, the following style rule gives
all text input fields a width of 250 pixels:
input[type="text"] {
width: 250px;
}
Match the Beginning of a Value
You can select elements by matching only the first few characters of an attribute's value. Precede the equal sign
with a caret or circumflex like this:
a[href^="http://"] {
color: red;
}
This matches all links where the href attribute begins with http:// . In other words, it matches all external
links, except those made over a secure connection.