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 paul white
paul white
13,958 Points

CSS - :hover & Selectors

Hi all, this may simply not be possible but I am looking to do the following with CSS and no javascript:

I have an anchor tag buried down inside a few div's something like this:

<div>
   <div>
     <div>
       <a href="#something">Example Link</a>
     </div>
   </div>
</div>

<div id="something">
</div>

Obviously this is a super rudimentary example, but what I would like to do is style the div with the ID of "something" when the link above pointing to it is clicked, hovered over, etc. Is this possible?

Hopefully this made sense, thank you for any help!

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Paul,

It's probably not possible in your real world example but it's possible in your specific example at least for :hover

I don't think it's possible when clicked to make the styles remain because the browser is going to scroll to that point in the page and the div will just have whatever it's normal styles are.

Here's a codepen showing how :hover could work http://codepen.io/anon/pen/navBf

Presumably though you're going to have other content inside all those nested div's and this will not work. #something will change when hovering over any part of that outermost div not just the link.

The general idea though is if you can somehow structure your html in a way so that the element you're hovering over is a sibling to #something then you can make it work out.

There isn't such a thing in css as the parent selector although it has been talked about. What you really need to do is be able to go up 3 parents and then the adjacent sibling.

Can I ask what your objection to javascript would be? With javascript you'd be able to assign and remove a class on your #something div based on user interaction with the link. You'd also be able to make the style stick once the link is clicked.

If this is a purely visual enhancement on your page then I don't think there would be anything wrong with doing it in javascript. Especially if you're going to have to make compromises with the css.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I completely forgot about the :target selector. This could make the style persist when the link is clicked.

#link-container:hover + #something,
:target {
  color: red;
}

http://css-tricks.com/on-target/

Unfortunately, I think you're still in a predicament for :hover

Caroline Hagan
Caroline Hagan
12,612 Points
Caroline Hagan
Caroline Hagan
12,612 Points

I'm not aware of an easy solution to do this in CSS; best off using a little bit of jquery... you could add a "clicked" class to the DIV, or just assign the relevant CSS straight in the jquery. If you are already using jQuery in your project anyway, I don't think you're going to see any advantage/disadvantage of using CSS over jQuery in this instance :-)