html - Affect an element outside of another element's scope -

i'm looking technical explanation, not solution. if have, example, following structure of html:

<div class="container">     <div class="box1">         <div class="square"></div>     </div>     <div class="box2">         <div class="circle"></div>     </div> </div> 

why can't create css rule if hover on .square, change background color of .circle? in other words, why can't affect element outside of element's scope?

also, there time when can this? there future plans allow behavior?

as point out, there no way select parent of element in css2/css3 spec.

answer:

its not in spec namely present performance considerations , way specificity works in css.

it in neither of current css selectors specs:

• selectors level 3 spec
• css 2 selectors spec

in meantime you'll have resort javascript if need select parent element.

the selectors level 4 working draft includes :has() pseudo-class works same jquery implementation. of 2015, not available in browser.

example has()

container:has(> a.active) { /* styles apply container tag */ }