158 CHAPTER 4 Getting started with CSS3
a[data-linktype ~='imageFile']:after {
content: '(img)';
}a[data-linktype ~='zipFile']:after {
content: '(zip)';
}}Consider the following HTML document that has three <a> elements where there is a mix
of values and the appropriate styles must be applied based on the datalinktype attribute.
<!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' data-linktype="externalLink zipFile">Link 1</a><br />
<a href='default.html' data-linktype="internalLink zipFile">Link 2</a><br />
<a href='http://microsoft.com/logo.jpg' data-linktype="externalLink imageFile">Link
3</a><br />
</body>
</html>
The first and third hyperlinks are external links, so they have a background color of yellow.
The second hyperlink is an internal link, so it has a background color of lime. The first and
second hyperlinks are links to zip files, so ‘(zip)’ is appended to the content. The third hyper-
link is a link to an image so ‘(img)’ is appended to the content. The rendered HTML document
is shown in Figure 4-5.FIGURE 4-5 he rendered HTML document showing the different styles based on matching to an item in T
the datalinktype attribute