How to Css nested div to effect outer external div?

Question

i wanna make child div effect outer div , i want box1 to change middle div box2 bg to something else , how can i do that without scripts i did try and fail to #box:hover ~ #box2 also fail with "+"

<div class="father">  
       <div class="child2">
                <div id="box1" class="child3"> hover here </div>
       </div>  

 </div>                



<div id="box2" class="father2"> change this background </div>


<div class="father">
       <div class="child2">
                <div id="box1" class="child3"> hover here </div>
       </div>  

 </div>

Unfortunately, with CSS only, it is currently impossible to select parent elements. You will need to go with a scripting language such as jQuery/Javascript. If you would like an example of how to do this, just ask :) — Fizzix
– Fizzix, Commented May 7, 2014 at 23:03
#box1 (ID) can be used only once per document, uses .box1 (CLASS) instead. Javascript will do what you wish to :) Else , for the fun and the use of pointer events : codepen.io/gc-nomade/pen/bjcql — G-Cyrillus
– G-Cyrillus, Commented May 7, 2014 at 23:12
@fizzix check this for the fun and the curiosity codepen.io/gc-nomade/pen/bjcql — G-Cyrillus
– G-Cyrillus, Commented May 7, 2014 at 23:22
Quite interesting, wasn't aware of that, thanks for the example @GCyrillus. Although, why does it stop working if the box2 is moved above father? — Fizzix
– Fizzix, Commented May 7, 2014 at 23:31
@fizzix If box2 is moved above , CSS selector cannot access it, you can only navigate down the dom tree :) — G-Cyrillus
– G-Cyrillus, Commented May 7, 2014 at 23:34

G-Cyrillus · Accepted Answer · 2014-05-07 23:38:42Z

1

This answer is more for the curiosity than a real solution.

If your nested box stands inside a div preceding in the flow, the box you want to see background being updated , you may use pointer-events to control area that will react to hover.

Remenber: CSS selectors can only navigate down the DOM tree, climbing up is not possible.

DEMO

Basic CSS would be :

div {
  pointer-events:none;
}
div #box1 {
  pointer-events:auto;
}
div:hover + div {
  background:red;
}

for :

<div class="father">  
  <div class="child2">
    <div id="box1" class="child3"> hover here </div>
  </div>  
</div>                
<div id="box2" class="father2"> 
  change this background 
</div>

edited May 7, 2014 at 23:38

answered May 7, 2014 at 23:21

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Natanel Soussana Over a year ago

is that will work with multiply boxes ? i gonna make small divs that will be the character thumbs , and each character we hover on , the middle picture will change :)

G-Cyrillus Over a year ago

if the background to change stands next in the flow and if browser supports pointer-events, it should work.

Fizzix Over a year ago

It won't work if the DOM is slightly changed though. In your example, move the box2 above the father, and it will stop working.

G-Cyrillus Over a year ago

@fizzix this is what i tell. selector avalaible are only + or ~to navigate down the dom tree. and the selector to climb up will surely not be supported (it would involved too much ressource as i understood)

Fizzix Over a year ago

Ahhh, interesting. So + can be used to work down the tree, although there is no selector (yet) that can work up the tree?

|

Community · Accepted Answer · 2017-05-23 12:05:10Z

0

First, don't label with javascript or jquery if you don't want to use scripting...

You cant have two divs (or anything) with the same ID, if you want to have two of something use classes, it doesn't matter if they are identical. Only the first one (I think, it might be the last one...) is used and the others are ignored.

Answering the question

The + combinator only works on siblings i.e. they have to be in the same div together not nested in any other div and they have to be directly one after another so .father:hover + .father2 works only for the first div. You could use ~ instead of + if there is some other elements between .father and .father2.

So that answers the question partially, I don't know how to get the second one to work.

Try this question for additional help

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered May 7, 2014 at 23:25

john

1572 silver badges6 bronze badges

3 Comments

G-Cyrillus Over a year ago

have you checked my demo with selector + ? codepen.io/gc-nomade/pen/bjcql pointer-events is involved , so you need a browser that gets it:)

Natanel Soussana Over a year ago

i think i will let my brother write me a script :/ im afraid this will not work good with my example of my needs : i62.tinypic.com/2lj0yfn.jpg

john Over a year ago

@GCyrillus Sorry for the delay, I haven't been on SO for a while. I hadn't heard of pointer-events before. After looking over your css I think that I understand the principle. (You posted your answer first, but I started writing mine before anyone had posted any answers so I didn't read your answer before posting mine)

Collectives™ on Stack Overflow

How to Css nested div to effect outer external div?

2 Answers 2

7 Comments

Answering the question

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Answering the question

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related