html - CSS change style of different element upon active -

trying change content of image clicking image (image gallery viewer), using pure html/css.

i using gumby.css framework , have following html:

<section id="sect">     <div class="three columns">         <img src"/images/help.png">     </div>     <div class="one column">         <img src"/images/help.png">     </div> </section> 

and following css:

#sect .three.columns img:hover {     content:url("/images/about.png");     border: 5px solid red; }  #sect .one.column img:active ~ #sect .three.columns img {     content:url("/images/about.png");     border: 5px solid red; } 

the first css rule #sect .three.columns img:hover works perfectly, indicating have selected right element. second 1 #sect .one.column img:active ~ #sect .three.columns img nothing upon active.

refer here meaning of ~.

anyone have ideas?

thanks.

as noted in comments, isnt possible in way implementing.

css rules depend on degrees of decendancy , cannot traverse dom, say, ascending 1 parent level, moving across , down (in layman terms). limited identifying siblings , children.

the content style only available :before , :after pseudo elements.

as such, alternative apply operation active state of parent elements, removing child images, , referencing background-image , not content property e.g.:

demo fiddle

html

<section id="sect">     <div class="three columns"></div>     <div class="one column"></div> </section> 

css

.column, .columns {     height:200px;     width:200px;     background-image:url(http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg);     background-size:cover; } .three.columns:hover ~ .one.column {     border:1px solid red;     background-image:url(http://upload.wikimedia.org/wikipedia/commons/9/9c/image-porkeri_001.jpg); }