HTML and CSS Reference
In-Depth Information
input[type="text"] {
width: 200px;
}
This will target all the
input
elements whose
type
attribute is exactly
“text”.
Now let's say you want to add a di
"
erent icon next to each di
"
erent type of
file your website is linking to, so your website's visitors know when they'll
get an image, a PDF file, a Word document, etc. This can be done by using
an attribute selector:
a[href$=".jpg"] {
background: url(jpeg.gif) no-repeat left 50%;
padding: 2px 0 2px 20px;
}
a[href$=".pdf"] {
background: url(pdf.gif) no-repeat left 50%;
padding: 2px 0 2px 20px;
}
a[href$=".doc"] {
background: url(word.gif) no-repeat left 50%;
padding: 2px 0 2px 20px;
}
In this example, we've used an attribute selector that will target all the links
(
a
) whose
href
attribute ends (
$
) with .jpg, .pdf or .doc.
Notes on browser support
Apart from Internet Explorer 6, all major browsers support attribute
selectors. This means that when you are using attribute selectors on your
stylesheets, you should make sure that IE6 users will still be provided with a
usable site. Take our third example: adding an icon to your links adds
