Complex Selectors with Link States in CSS
All the complex selectors we studied earlier can be applied to links as well.
Let's look at an example. Let's say our links are in a block with a given id
:
<div id="block">
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
</div>
Let's set styles for the links in this block:
#block a:link, #block a:visited {
color: red;
}
#block a:hover {
text-decoration: none;
}
Typically, the states link
and visited
are not shared, so the code can be simplified as follows:
#block a {
color: red;
}
#block a:hover {
text-decoration: none;
}
Explain what the selector in the code below selects. Then write the HTML code that matches that selector. Here's the code with the selector:
#test a {
color: red;
}
#test a:hover {
text-decoration: none;
}