HTML and CSS Reference
In-Depth Information
You can accomplish exactly the same goal using an attribute selector, like so:
div[id=”main”] {
background-color: white;
}
Which should you use? Because attribute selectors aren't supported in Internet Explorer 6, and ID and class selectors
are just a little quicker to type anyway, I'd suggest using those instead.
Of course, elements can have a lot of other attributes you could use to create a selector. Here's an example:
1.
In styles.css, add the following:
input[type=”text”], input[type=”email”] {
border: none;
}
2.
Save styles.css.
Here, you select the newsletter input fields with attribute types
text
and
email
and declare these elements should
have no border.
The power of attribute selectors doesn't just end there.
Selecting Elements with an Attribute, Regardless of Its Value
This example selects an element such as
<a title=”More information”>
. As long as it has a title, it is se-
lected regardless of the title's value:
a[title] {
color: blue;
}
Selecting Elements with Multiple Attributes
The following example selects an element that has both of the attributes
type=”submit”
and
class=”button”
:
1.
In styles.css, add the following:
input[type=”submit”][class=”button”] {
font-size: 1em;
}
2.
Save styles.css.
This will give the newsletter sign up button
<input class=”button” id=”submit-newsletter”
type=”submit” value=”Sign Up” />
a font size of 1em. More on
font-size
in Chapter 11.
Other Attribute Selectors
Attribute selectors don't just stop there, but the remainders tend to be for more special use case situations, so they
aren't covered in
CSS3 Foundations
.
These other attribute selectors allow you to select an element that:
