Lesson 2: Understanding selectors, specificity, and cascading CHAPTER 4 155
<body>
<a href='http://contoso.com' >Link 1</a><br />
<a>Link 2</a><br />
<a href='http://www.contoso.com' >Link 3</a><br />
</body>
</html>The first <a> element sets the href attribute to http://contoso.com, so hovering over this
link causes the hyperlink to be displayed with a yellow background, as shown in Figure 4-4.
The other hyperlinks remain unaffected.FIGURE 4-4 Hovering over a link whose href attribute is set to http://contoso.com causes the href value
to be displayedA potential problem with this approach is that the value must match exactly to work. To
solve this problem, use the attribute contains value selector.Using the attribute contains value selector
The attribute contains value selector selects all elements that contain the specified attribute
value within the specified attribute. This is similar to the attribute value selector, but it is more
flexible because you don’t need to provide an exact match. To specify the attribute contains
value selector, add an asterisk (*) suffix to the attribute name.
The following example demonstrates the use of the attribute contains value selector to
locate all hyperlinks that have an href attribute value that contains contoso.com. This example
also demonstrates combining the attribute selector with the :hover pseudo class.
a[href*='contoso.com']:hover {
background-color: yellow;
}