0

So I'm having a hard time with the following structure: 

<div id="1">
  <div class="one-child">
    <div class="one-childest"></div>
  </div>
</div>
<div id="2">
 <div class="two-child">
   <div class="two-childest></div>
 </div>
</div>

When hovering over one-childest I want to change color of two-childest but seem to have a hard time doing so. So I guess the main question is, is this possible with pure CSS or do I have to involve jQuery?

This is the CSS I'm trying with currently: 

#1.one-child.one-childest:hover ~ #2.two-child.two-childest{
   background-color:black;
}
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Coss
  • 453
  • 1
  • 4
  • 12
  • 4
    This is not possible with CSS. You can use javascript, no need for jQuery just for this. See this question: https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector – sol Aug 10 '18 at 09:02
  • 1
    To expand on sol's answer, the best you can do would be `#1:hover ~ #2.two-child.two-childest { ... }` – wiiiiilllllll Aug 10 '18 at 09:05
  • Update: I just realised there's a way you could do this, but it's a bit tricksy. Have a look at this pen: https://codepen.io/MartijnCuppens/pen/MBjqbM/ . – wiiiiilllllll Aug 10 '18 at 10:57
  • Thank you, looks like that's what I needed! – Coss Aug 10 '18 at 12:29
  • @Coss no, it doesn't look like. It *could* **only** work from previous towards next sibling and it's children (by using `~` or `+` ). What I mean is that using CSS techniques **it's impossible** to go backwards i.e: from hovering `two-childest` and having anything applied on `one-childest`. - well... unless you're not interested in going *backwards* or *up* the tree. – Roko C. Buljan Aug 11 '18 at 13:24
  • 1
    @RokoC.Buljan I closed the question as duplicate and someone else reopened it ... in order to see who I had to edit so I can have the edit link, so I simply added a space ;) – Temani Afif Aug 11 '18 at 13:27
  • @TemaniAfif I reopened it, as there was a flag asking for it to be reopened, explaining why and they wanted to post an answer. –  Aug 11 '18 at 16:32
  • @YvetteColomb and can we know that reason or that person also? .. I would like to know if there is really a solution to this or an explanation that is not already covered by the duplicate. – Temani Afif Aug 11 '18 at 18:31
  • @TemaniAfif this was the flag "This has been marked as a duplicate but I believe it's different enough that it should be a separate question. Also I have an answer which I think would be helpful here, but would not be directly applicable to the other question ". I can't say for sure if it's valid, I gave them the benefit of the doubt. If you chat with this person, and decide to reopen it, ping me of flag the post again. –  Aug 11 '18 at 18:33
  • @wiiiiilllllll care to chime in on the discussion here? –  Aug 11 '18 at 18:34
  • 1
    Apologies if the flag wasn't the correct way to do things - I'm still learning the etiquette here. Essentially, see my comment above - that's the answer I would give. Admittedly it's not a technique I would use in production, it's more of a CSS trick, but it fulfils the criteria of the question. And as stated in my flag comment, it's not an answer I would post on the linked question, as I feel the two are subtly different. I agree the linked question is relevant here, but I feel my answer is also relevant. – wiiiiilllllll Aug 12 '18 at 07:33

0 Answers0