Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Kristian Woods
Kristian Woods
23,414 Points

How to target a CSS element that isn't a direct/general child/sibling of another element?

I can't believe I'm asking this, but, I'm looking to target an element that isn't a child/sibling of the one I'm hovering on.

I'm trying to get a div to display when I hover on an element that is way further up the markup.

I set the elements display value to none, and try to display it block when I hover on a certain element.

Is this a task for javascript?

How can I achieve this?

Kristian Woods
Kristian Woods
23,414 Points

The problem is that I'm working with the Wordpress theme - Avada. The markup is all over the place

Kristian Woods
Kristian Woods
23,414 Points

You can't work your way up? For example , you couldn't target the element's parent sibling?

Thanks

1 Answer

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

You can work both up and down the tree, so if you want the next sibling of your element's parent you might write:

    let mytarget = this.parentNode.nextElementSibling;

You may also have other options depending on classes or id's the elements have.

Can you provide a specific example on your site's URL?

Kristian Woods
Kristian Woods
23,414 Points

Thanks, Steven. I thought Javascript would be the answer. I was trying to accomplish the task using CSS selectors

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

There aren't any "up" selection methods in CSS. Some have been proposed but none have been adopted so far.

It might still be possible to accomplish what you need in CSS by using classes and/or Id's with descendant, child, and sibling selectors.