Is there a css selector which selects an element outside the current element?

Question

Code explains better than words

<div class="parent">
  <span class="child"></span>
</div>
<div class="outside"></div>

What I want to do

.child:hover ? .outside { }

where ? is the selector I'm looking for

Solution 1

Selectors express structural relationships between elements. When you ask for a selector for an element that is "outside" another element, you're looking for a combinator that says "this element appears outside the containing scope of this other element".

There is no such combinator.

You could conceivably select specifically the .outside sibling of .parent, but then you run into another problem that there is no parent selector for matching .parent relative to .child:hover like there is for matching .child:hover relative to .parent (that is, .parent > .child:hover).

See also: How do I select an element based on the state of another element in the page with CSS?

Solution 2

The easiest way would to be to make the .parent class the element needed to hover over.

Then you could do

.parent:hover ~ .outside {

}

Solution 3

With the following html structure:

<div class="parent">
<span class="child"></span>
</div>

<div class="outside"></div>

since there is no reliable parent selector in CSS, you can select .outside only in 5 ways:

1. Directly.
2. If it is a sibling of .parent.
3. If it is a child of .parent.
4. If it is a sibling of .child.
5. If it is a child of .child.

Since .outside is neither a sibling nor a child of .child, nor is it a child of .parent, your only remaining relationship via which to select .outside is as a sibling of .parent.

This isn't really what you want, if you only want the presentation of .outside to change only when you hover over .child.

I'm no fan of using javascript to influence presentation when CSS can already handle the task, but in this case, CSS cannot handle the task and the javascript is elementary:

var child = document.getElementsByClassName('child')[0];
var outside = document.getElementsByClassName('outside')[0];

function childHover() {
outside.classList.toggle('childhover');
}

function initialiseChildHover() {
child.addEventListener('mouseover',childHover,false);
child.addEventListener('mouseout',childHover,false);
}

window.addEventListener('load',initialiseChildHover,false);

.parent {
display: inline-block;
width: 200px;
height: 200px;
background-color: rgba(255, 0, 0, 1);
}

.child {
display: inline-block;	
width: 100px;
height: 100px;
margin: 50px;
background-color: rgba(255, 255, 0, 1);
}

.outside {
display: inline-block;
width: 150px;
height: 150px;
background-color: rgba(0, 255, 0, 1);
}

.outside.childhover {
background-color: rgba(0, 0, 255, 1);
}

<div class="parent">
<span class="child"></span>
</div>
    
<div class="outside"></div>

Comments

[Harry]

No, not when .child:hover. You can select .outside on .parent:hover though. And if your .child covers the entire space of the parent (which I doubt because it is a span) then .child:hover will effectively be equivalent to .parent:hover.

[Marty]

I doubt it. CSS selectors don't usually work in a way that would require traversing the DOM outwards (hence the previous sibling selector having bad support).

[BoltClock]

Selectors express structural relationships between elements. There is no conceivable relationship that can be expressed here using a single combinator (besides, perhaps, .child:hover existing somewhere in the document tree).

[goupil]

lets have a look to this w3.org/TR/css3-selectors/#selectors

[boop]

@BoltClock that sounds more like an answer than a comment ;)

[Ashith]

Also: stackoverflow.com/questions/6910049/… ; stackoverflow.com/questions/28708741/… ; stackoverflow.com/questions/10483323/…

[Ashith]

This looks like it can be kind-a done via :target pseudo-class. developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors/…