CODEWITHSUNDEEP
htmlcss
Anonymous
Anonymous

Reputation: 1990

targeting two divs with a link

I want to change color of two divs using pure css.However I am only able to change color of one div using a single href attribute.Is it possible using pure CSS.

#link1:target{color:red;}
#link2:target{color:green;}
margin-top:20px;
<a href="#link1 ">Make links change color</a>
<!-- <a href="#link1 #link2">Make links change color</a> //this not working-->
<div id="link1">
link1
</div>

<div id="link1">
link2
</div>

Upvotes: 1

Views: 1106

Answers (2)

shubham agrawal
shubham agrawal

Reputation: 3541

You can wrap it in a div with the target id.

Like this:

#link1:target {
  color: red;
}
<a href="#link1 ">Make links change color</a>
<div id="link1">
  <div class="link2">
    link1
  </div>

  <div class="link2">
    link2
  </div>
</div>

Upvotes: 4

Michael Coker
Michael Coker

Reputation: 53674

Without modifying your markup, this is the CSS you would use, utilizing the adjacent sibling selector and assuming that's where you wanted the margin. But you can only use an ID on a page once, so you should make the 2nd one id="link2".

#link1:target {
  color: red;
}

#link1:target + #link1 {
  color: green;
  margin-top:20px;
}
<a href="#link1 ">Make links change color</a>

<div id="link1">
  link1
</div>

<div id="link1"> <!-- make this one id="link2" -->
  link2
</div>

Upvotes: 2

Related Questions