0

i want to add a class to a div that has adjacent sibling selector.

What i am trying to do? I have two divs which appear on top of each other. so was thinking to move one div (prev_div) slightly above div(next_div) so they are visible. when next_div is closed the prev_div should get back to its original position.

Below is the html code,

<div class="wrapper">
    <div class="prev_div">previous</div>
    <div class="next_div">next</div>
</div>

I want to add margin property to the div with class "prev_div". I tried doing that with css as below,

.wrapper div.prev_div + div.next_div {
    position: relative;
    bottom: 70px;
 }

But the above adds the margin to the div with class next_div instead i wanted the position style for the prev_div.

So i tried doing the same using the javascript by finding the element with prev_div and next_div. if next_div present adding a class "additional" to the prev_div. once class additional added and if the next_div not present remove the additional class for prev_div. but this doesnt work...there is a delay in removing the class added when next_div not present.

this next_div can be closed with close button. and i am doing the node calculations in render method. the next_div is removed there is no trigger to render...it is taking time to detect it...can i do it in componentdidupdate or so.

could someone help me fix this. thanks. I think since i am 

render = () => {
    const prev_div = document.querySelector('.wrapper div.prev_div');
    const next_div = document.querySelector('.wrapper div.prev_div + div.next_div');
    if (next_div) {
        prev_div.classList.add('additional');
    } else {
        if (prev_div && prev_div.classList.contains('additional')) {
            prev_div.classList.remove('additional');
        }
    }
}

Also the above doesnt work cause the next_div in the dom is from child component. so even if i put these calculations for node and clases in componentdidupdate...closing the next_div is not recognised soon. there is a delay in it.

thanks.

someuser2491
  • 1,848
  • 5
  • 27
  • 63

2 Answers2

0
.wrapper .next_div {
    margin-left: 10px;
 }

If this is a react project it wouldn't work. You're using class instead of className in your html.

Chad
  • 608
  • 5
  • 15
  • typo in my code. fixed it...can i do it somehow with css alone? – someuser2491 Feb 17 '20 at 19:01
  • This should be a css only solution. Is your goal to space the two divs with 10 margin? you could do 10 padding on .wrapper and then 10 margin left on the next_div. – Chad Feb 17 '20 at 19:14
  • yes it should be css only :/ my goal is to move the prev_div above the next_div (when next_div is present) so basically the prev_div is always at the bottom of the page...when next_div is also present in the page then the prev_div should go above. – someuser2491 Feb 17 '20 at 19:16
  • .wrapper { display: flex; flex-direction: column; } would work! You may need to add padding to next_div to get some spacing. – Chad Feb 17 '20 at 19:21
0

If I understand you correctly, you don't need to do all this stuff.

If next_div can be closed, just add margin-top: 10px to next_div, so when prev_div is "alone" -- you respect the proper styling

this is simplest css only solution

Maksym Koshyk
  • 468
  • 5
  • 8