CODEWITHSUNDEEP
htmlcss
Tim
Tim

Reputation: 3

Can't select specific ID with :target

I try to change the bg-color of the div-element with the id "id1". Initially it should be blue, which works fine. A click on "Test" should turn it into red, but it won't work, though it is described literally like this in many tutorials.

What's wrong?

Thanks!

<!DOCTYPE html>
<html>
<head>
<style>
#id1 {
    background-color:blue;
  }
#link1:target #id1 { 
      background-color:red;
  }
</style>
</head>
<body>
<a href="#link1">test</a>
<div id="id1">hello</div>
</body>
</html>

Upvotes: 0

Views: 27

Answers (1)

MightyPork
MightyPork

Reputation: 18861

You probably misunderstood it, it works like this (try it!)

#link1:target {
  background-color: red;
}
<a href="#link1">test</a>
<div id="link1">hello</div>

:target matches the element if it's the active target of a # link.

#link1:target #id1 would mean "something with id 'id1' inside something with id 'link1' that is a target"

Upvotes: 1

Related Questions