Search code examples
csshoverchildren

Use the :hover selector to alter the rules of deep children elements with pure CSS

Take a look at this element structure.

[#parent]
  [#childA]
    [#childChildA]
    [#childChildB]
      [#childChildChildA]
  [#childB]
[/#parent]

I want to change #childChildChildA to opacity: 0; by using the #childA :hover selector. I tried:

#childA:hover > #childChildB > #childChildChildA {
  opacity: 0 !important;
}

But this accomplished nothing. How can I modify a deep child element when using a much higher up parent element with pure CSS?

Solution

  • you need to remove the >'s

    <div id='a'>
    <div id='b'></div>
    <div id='c'>
        <div id='d'></div>
    </div>
</div>


#a:hover #c #d {
  opacity: 0 !important;
}

    http://jsfiddle.net/qDRwa/

    This is an example of it with different id names.