CODEWITHSUNDEEP
htmlcsscss-selectors
user4913694
user4913694

Reputation: 526

Affect an element outside of another element's scope

I'm looking for a technical explanation, not a solution. If I have, for example, the 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 I create a CSS rule where if I hover over .square, change the background color of .circle? In other words, why can't I affect an element outside of another element's scope?

Also, will there be a time when we can do this? Are there any future plans to allow this behavior?

Upvotes: 3

Views: 2692

Answers (4)

ѺȐeallү
ѺȐeallү

Reputation: 3017

As you point out, there is currently no way to select the parent of an element in CSS2/CSS3 spec.

Answer:

Its just not in the spec namely for present performance considerations and the way that specificity works in CSS.

It is in neither of the current CSS selectors specs:

In the meantime you'll have to resort to JavaScript if you need to select a parent element.

The Selectors Level 4 Working Draft includes a :has() pseudo-class that works the same as the jQuery implementation. As of 2015, this is not available in any browser.

Example has()

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

Upvotes: 2

skobaljic
skobaljic

Reputation: 9634

While you cannot target parents in CSS selectors (as ѺȐeallү pointed out), you can still style siblings. So, you can style some elements which are not hovered:

.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>

Same method is used in this pure css slide toggle example.

Upvotes: 0

Ra&#250;l Mart&#237;n
Ra&#250;l Mart&#237;n

Reputation: 4679

Well, it is for curiosity. Well, the :has() is the best approach, it is the future, for sure. But in different scenarios you have differents creative possibilities.

For example, in the context that I propose to you, the elements are positioning with absolute. And we now the distance between the elemetns.

We can use the pseudo-element after or before and put in top of the other. Now you can 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;
}

Upvotes: 0

jaunt
jaunt

Reputation: 5086

This website explains why we can't have a parent selector - which is what would be required in order to select a tag inside another scope.

From my knowledge, the reason is not that we can't have it, but simply because the performance demand is too great.

It could be done - but compatibility would be god awful to say the least. So why bother implementing that will hardly be supported when you'll need an alternative anyway? It's just easier to use JavaScript or other client side languages.

Upvotes: 0

Related Questions