Lesson 2: Understanding selectors, specificity, and cascading CHAPTER 4 157
Using the attribute value ends with selector
An attribute value ends with selector selects all elements whose specified attributes value ends
with the specified value. To specify the attribute value ends with selector, add a dollar sign ($)
suffix to the attribute name.
The following example demonstrates the use of the attribute value ends with selector to
locate all hyperlinks that reference jpg files.
a[href$='jpg']:hover {
background-color: yellow;
}Consider the following HTML document that has is 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='logo.jpg'>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 end with jpg, so hovering
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.Using the attribute contains value in list selector
An attribute contains value in list selector selects all elements whose specified attribute
contains the specified value when the attribute has a space-delimited list of values and there
is a match to one of the values. This works well with custom attributes when you might want
to specify a list of values in one attribute. For example, you might have a hyperlink that has
a datalinktype attribute that contains a list of values that describe the type of link, such as
secure, externalLink, internalLInk, imageFile, zipFile. When the link is rendered to the browser,
it includes the datalinktype attribute with the appropriate values. You want to add different
styles to the hyperlink based on these values, as follows.
a[data-linktype ~='externalLink'] {
background-color: yellow;
}a[data-linktype ~='internalLink'] {
background-color: lime;
}