Is it possible to modify the looks of a father nodes child (including hover of the original node) with CSS only?

Question

I have a css that modifies a child element under specific circumstances (and only if the child element has a specific class). Now my problem is that I (in addition) need to modify a different child of the father node during the same circumstances. And (especially also as IE has no parent node selector) I'm not sure if it is at all possible with pure CSS (I thought a lot there but didn't come to a conclusion).

So my question is: Is it possible and if so how?

To go into more details:

<form id="ResultForm">
    <div class="rddtSlide">
        MyTest
    </div>

    <div>
        <div id="InterfaceContainer">
            test3
            <div id="Interface" class="t2">
                Test2
            </div>
        </div>
    </div>
</form>

The css code that I have now:

div#InterfaceContainer > div#Interface.t2 {
    color: blue;
}

div#InterfaceContainer:hover > div#Interface.t2 {
    color: red;
}

Now what I'm trying to achieve is that if div#Interface.t2 gets the red color then rddtSlide should also get the red color. And if it gets the blue color then the other one should also get the blue color. The class t2 is added and removed via jquery.

Originally I used a sole CSS approach for this as I had troubles with the mouseevents for mouseout,... firing when they shouldn't. Thus I need to stay in a pure CSS approach if possible at all.

So to ask it here again: Is it possible to do this with pure CSS and if so how?

The way you single out IE in your question seems to imply that other browsers do, which AFAIK [simply isn't the case](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector). — BoltClock, Apr 24 '15 at 10:58
Ah ok I only signled out IE as I only checked it there. Will modify the question there so that it is not IE specific tnx! — Thomas, Apr 24 '15 at 10:59
Not sure changing the question is required. The simple answer is **There is no CSS parent selector** as indicated by BoltClock. — Paulie_D, Apr 24 '15 at 11:00
You can achieve what you're looking for if you're willing to move to LESS, see this SO answer: http://stackoverflow.com/questions/21985161/less-immediate-parent-selector — thomaux, Apr 24 '15 at 11:05

Shaggy · Accepted Answer · 2015-04-24T11:12:25.553

What you're attempting to do is not possible with CSS alone as it does not have a parent selector (yet).

You will need to look into an alternative solution using JavaScript, along the lines of the following.

document.getElementById("InterfaceContainer").addEventListener("mouseover",function(){
  this.parentNode.previousSibling.previousSibling.classList.add("blue");
},0);
document.getElementById("InterfaceContainer").addEventListener("mouseout",function(){
  this.parentNode.previousSibling.previousSibling.classList.remove("blue");
},0);

.rddtSlide{
  background:green;
  margin:0 0 10px;
}
#InterfaceContainer{
  background:red;
}
#InterfaceContainer:hover,.blue{
  background:blue;
}

<div class="rddtSlide">MyTest</div>
<div>
  <div id="InterfaceContainer">
    test3
    <div id="Interface" class="t2">Test2</div>
  </div>
</div>

Thanks I had feared that there is no way to work around that but had hopes up still that there is some css workaround. So then to javascript — Thomas, Apr 24 '15 at 11:12

Is it possible to modify the looks of a father nodes child (including hover of the original node) with CSS only?

1 Answers1