Selector Question

[bluebomber]

Hello, I have a decent grasp of most areas of CSS but am just starting to learn how to effectively use selectors.In the past, I've made descendent elements appear and disappear during the hover pseudo class of their parent element.For example....menu:hover .large {visibility:visible;}All elements of class "large" which are descendants to elements with class "menu" become visible when the user hovers the cursor over the elements with the "menu" class.Is it possible to effectively do the same thing but in situations where the class you want to change isn't a direct descendent?So for example.. how would I achieve the same effect (make "large" classes visible) in the example above when elements with the "large" class are not descendants of elements with the "menu" class?I hope that makes sense - thanks!

[Dilated]

Hello, I have a decent grasp of most areas of CSS but am just starting to learn how to effectively use selectors.In the past, I've made descendent elements appear and disappear during the hover pseudo class of their parent element.For example....menu:hover .large {visibility:visible;}All elements of class "large" which are descendants to elements with class "menu" become visible when the user hovers the cursor over the elements with the "menu" class.Is it possible to effectively do the same thing but in situations where the class you want to change isn't a direct descendent?So for example.. how would I achieve the same effect (make "large" classes visible) in the example above when elements with the "large" class are not descendants of elements with the "menu" class?I hope that makes sense - thanks!

Keep in mind that the whitespace selector does not select for "direct descendants" - the direct descendant, or child selector, is ">".If I understand what you're asking, you want the .large elements to be displayed when the parent element is hovered, regardless of what their parent element is?If so, you could do:

*:hover > .large { visibility: visible; }

There are several different selectors. If there is some element preceding the .large elements, for example, you could do:

element:hover ~ .large { visibility: visible; }

The element, named "element", when hovered, would then show the .large elements.

[bluebomber]

Thanks for replying, I'm beginning to think that I might be getting my terms mixed up so I apologise for that.In the example I gave, I was able to change the visibility of "large" classed elements that were "nested" (in HTML) within elements that had the "menu" class.I thought that's what a "descendant" meant.Essentially I want the same effect, but one that will change the visibility of "large" elements anywhere in the HTML once the menu class was being hovered over.

[jeffman]

What you want is possible if the descendant element is positioned absolutely, using coordinates that remove it from its logical location inside the parent. In this way, the descendant can literally be anywhere in the document. Developers will disagree on the "wisdom" of such a technique, but it does work.

[bluebomber]

Deirdre's Dad - this is actually exactly what I've ended up doing!It works fine, but I was just wondering if there was a cleaner way.Thanks.