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

Answer 1

With the following html structure:

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);
}