HTML and CSS Reference
In-Depth Information
Let's illustrate these three attribute-substring selectors with an example. Suppose you have a web page
with multiple hyperlinks. Some of them point to URLs and some point to e-mail addresses, as shown here:
<a href="
http://www.microsoft.com">Go
to Microsoft's website.</a>
<a href="
mailto:contact@somedomain.com">Con
tact us here.</a>
Now assume that you wish to display all hyperlinks starting with
http://
in red and all hyperlinks
starting with
mailto:
in blue. You can do so using an attribute-substring selector:
a[href^="http://"] {
color:red;
font-size:30px;
}
a[href^="mailto:"] {
color:blue;
font-size:30px;
}
The CSS selectors used in these classes use
^=
operator to match the start of the
href
attribute of
anchor elements with a specific string. The first selector selects all hyperlinks that begin with
http://
and
sets their color to red; the other selector selects all hyperlinks that begin with
mailto:
and sets their color
to blue. Figure 13-1 shows how these links look in the browser.
Figure 13-1.
“Attribute starts with” selector in action
Now, further assume that the same page contains the URLs of certain PDF files, and you wish to
render these hyperlinks in green. In this case, you can use the “attribute ends with” selector as shown next:
a[href$=".pdf"] {
color:green;
font-size:30px;
}
The “attribute ends with” selector uses the
$=
operator to match the end of an attribute value with a
specified string. In this example, the end of the
href
attribute value is matched against
".pdf"
, and all
hyperlinks that match the criteria are shown in green. An example of a matching hyperlink is as follows:
<a href="downloads/ebook.pdf">Download eBook here.</a>
Extending the idea further, you can also display hyperlinks that contain (rather than start or end with)
specific text. For example, to display in orange all hyperlinks that contain the word
google
, you use
a[href*="google"] {
color:orange;
font-size:30px;
}
