Affect an element outside the scope of another element
I'm looking for a technical explanation, not a solution. If I have, for example, the following HTML structure:
<div class="container">
<div class="box1">
<div class="square"></div>
</div>
<div class="box2">
<div class="circle"></div>
</div>
</div>
Why can't I create a CSS rule if the .square
background color changes on hover .circle
? In other words, why can't I affect an element outside the scope of another element?
Will there also be a time when we can do this? Are there any future plans for this behavior?
source to share
As you note, there is currently no way to select the parent of an element in the CSS2 / CSS3 spec.
Answer:
Its just not in the spec, but for modern performance considerations and how that specific works in CSS.
This is in none of the CSS selector specs:
In the meantime, you have to resort to JavaScript if you need to select the parent element.
The 4th level selector worker includes a pseudo-class :has()
that works the same as the jQuery implementation. Since 2015, this is not possible in any browser.
The example has ()
container:has(> a.active) { /* styles to apply to the container tag */ }
source to share
This website explains why we don't have a parent selector - this is what it would take to select a tag within another scope.
To my knowledge, the reason is not that we cannot have it, but simply because the demand for performance is too great.
It can be done - but compatibility would be terrible, to say the least. So why worry about something that is unlikely to be supported when you need an alternative? It's just easier to use JavaScript or other client-side languages.
source to share
Well, this is for curiosity. Well, the :has()
best approach is the future, of course. But in different scenarios, you have different creative possibilities.
For example, in the context I am offering you, elements are positioned with absolute. And now we have the distance between the elements.
We can use a pseudo element after
or before
and put it on top of another. You can now use :hover
.
http://codepen.io/luarmr/pen/jPGYoM
CSS
/*Normal css*/
[class^='box']{
position: absolute;
top:10px;
border:1px solid #fabada;
}
[class^='box']:hover{
background: #0da;
}
.box1{
left:10px;
}
.box2{
left:240px;
}
.square, .circle{
margin:10px;
height:100px;
width:100px;
background:#fe0;
}
.circle{
border-radius:50%;
}
/*TRICK*/
[class^='box']:after{
content:'';
position:absolute;
height:100%;
width:100%;
top:0;
z-index:1;
}
.box1:after{
left:230px;∑
}
.box2:after{
left:-230px;
}
source to share
While you cannot specify parents in CSS selectors (as pointed out by eallү ), you can still style siblings. This way you can style some elements that don't hover:
.square {
display: inline-block;
width: 50px;
height: 50px;
background: none #4679BD;
}
.circle {
display: inline-block;
width: 50px;
height: 50px;
background: none #FFB900;
border-radius: 50%;
}
.triangle {
display: inline-block;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 50px solid green;
}
.square:hover ~ .circle {
background: none #118889;
}
.square:hover ~ .triangle {
border-left: 50px solid #4D4D4D;
}
.circle:hover + * {
border-left: 50px solid lime;
}
<div class="container">
<div class="square"></div>
<div class="circle"></div>
<div class="triangle"></div>
</div>
The same technique is used in this clean css slide. ...
source to share