I followed the instructions I found online when using the :target, but it’s not working.
Expected output
When the first link is clicked, the background color and font color of #div1 will change
When the second link is clicked, the border of #div2 will change
Actual output
Nothing changes when I click either links
Where did I go wrong in here?
<!doctype html>
<html>
<head>
<title>Title</title>
<meta charset="UTC-8">
<style>
a.div1:target {
background-color: blue;
color: yellow;
}
a.div2:target {
border: 10px dotted green;
}
div {
width: 300px;
border: 1px solid;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<a href="#div1" class="div1">First Link</a>
<a href="#div2" class="div2">Second Link</a>
<div id="div1">
Div 1
</div>
<div id="div2">
Div 2
</div>
</body>
</html>
>Solution :
:target matches the element that is linked to, not the link itself.
div#div1:target {
background-color: blue;
}