CSS Selector For Child Of Parent's Sibling Element


Answer :

In a word: no.



Given the current structure of your HTML (and the current state of CSS selectors), this is not possible. Perhaps we will get something like this in CSS4, but traversal like this is best left up to Javascript.



You can obviously restructure your markup, and use the sibling selector:



HTML



<div class="parent">
<a href="#" id="trigger">Trigger</a>
<div class="sibling">
<div id="change">Hello</div>
</div>
</div>


CSS



#trigger:hover + .sibling #change {
color:red;
}


codepen



No. You cannot achieve this using CSS only. Javascript is a good option in this case..



You can however detect the .parent being hovered (which will solve your problem if the parent surrounds exactly the trigger):



.parent:hover + .sibling div#change{background:red;}


(markup stays the same jsFiddle)



Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android How Can I Convert A String To A Editable