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:

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 */ } 

Comments

Popular posts from this blog

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

twig - Using Twigbridge in a Laravel 5.1 Package -

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -