156 CHAPTER 4 Getting started with CSS3
Consider the following HTML document, which has three <a> elements, one of which sets
the href attribute to http://contoso.com.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="default.css" rel="stylesheet" />
</head>
<body>
<a href='http://contoso.com' >Link 1</a><br />
<a href='http://microsoft.com'>Link 2</a><br />
<a href='http://www.contoso.com/default.html' >Link 3</a><br />
</body>
</html>The first and third hyperlinks have href attributes that contain contoso.com, so hovering
over these hyperlinks causes the hyperlink to be displayed with a yellow background.Using the attribute value starts with selector
An attribute value starts with selector selects all elements whose specified attributes value
starts with the specified value. To specify the attribute value starts with selector, add a caret
(^) suffix to the attribute name.
The following example demonstrates the use of the attribute value starts with selector
to locate all hyperlinks that reference external sites by looking for href values that start with
http. This automatically includes hrefs that start with https.
a[href^='http']:hover {
background-color: yellow;
}Consider the following HTML document that has three <a> elements, one of which sets
the href attribute to http://microsoft.com.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="default.css" rel="stylesheet" />
</head>
<body>
<a href='sales/default.html' >Link 1</a><br />
<a href='http://microsoft.com'>Link 2</a><br />
<a href='default.html' >Link 3</a><br />
</body>
</html>The first and third hyperlinks have href attributes that don’t start with http, so hover-
ing over these hyperlinks does not cause the hyperlink to be displayed with a yellow back-
ground. Hovering over the second hyperlink does cause the hyperlink to display with a yellow
background.