html - targeting different div styles with target method -


hello using target method manipulate different div styles, first "link_one" working, while have 1 link, question how make work "link_two" ? link_two second part of css ? more important here each link maniluplating 2 different classes in link 1 , 2 1 of class same.

<a href="#sections">link_one</a>  <div id="sections"> <div id="link_one">info</div> <div id="link_two">info</div> </div>  /* link 1 code */      #sections:target #link_one{         height:90px;         background:#333;         transition:all 1s ease;     }      #sections:target .rslides {         height:0px;         transition:all 1s ease;     }  /* link 2 code */    #sections:target #link_two{         height:90px;         background:#333;         transition:all 1s ease;     }      #sections:target .rslides {         height:0px;         transition:all 1s ease;     } 

one way apply target selector be:

for html

<a href="#sections1">link_one</a> <br> <a href="#sections2">link_two</a>  <div id="sections1"></div> <div id="sections2"></div> <div id="link_one" class="link">info</div> <div id="link_two" class="link">info</div> 

set css

 .link {     height: 20px;     transition:all 1s ease; }  #sections1:target ~ #link_one{     height:90px;     background:#333; }  #sections2:target ~ #link_two{     height:90px;     background:#333; } 

fiddle


Comments

Popular posts from this blog

html - Sizing a high-res image (~8MB) to display entirely in a small div (circular, diameter 100px) -

java - IntelliJ - No such instance method -

identifier - Is it possible for an html5 document to have two ids? -