Add class to div depending on class in another div

Question

I have a situation that looks something like this:

<div class="top">
  <div class="is-active">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<div class="bottom">
  <div>Text 1</div>
  <div>Text 2</div>
  <div>Text 3</div>
</div>

The CSS is:

.top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  height: 40px;
  
  > div {
    text-align: center;

    &:nth-child(1) {
      background: rgba(red, 0.5);
      
      &.is-active {
        background: rgba(red, 1.0);
      }
    }

    &:nth-child(2) {
      background: rgba(green, 0.5);
      
      &.is-active {
        background: rgba(green, 1.0);
      }
    }

    &:nth-child(3) {
      background: rgba(blue, 0.5);
      
      &.is-active {
        background: rgba(blue, 1.0);
      }
    }

    &:nth-child(4) {
      background: rgba(yellow, 0.5);
      
      &.is-active {
        background: rgba(yellow, 1.0);
      }
    }
  }
}

.bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: red;
  height: 40px;
  
  > div {
    text-align: center;
  }
}

https://jsfiddle.net/9yeLcvow/

Now, right now it's just static, i.e. I have manually given the first div of the top container the class is-active. When a div has this class, the opacity should change from 0.5 to 1. However, what I would also like to do is change the color of the bottom container to match the color of the is-active div in the top container.

Can this be done somehow, without using JS ?

No, you can't, This would require going UP the Dom before going down with your selector. — Paulie_D, Jul 17 '21 at 22:02

score 0 · Answer 1 · answered Jul 17 '21 at 22:28

You can select the first element with the is-active class with document.querySelector, then get its computed color and assign it to the color style property of the element with the class bottom:

document.querySelector('.bottom').style.color = window.getComputedStyle(document.querySelector('.is-active')).getPropertyValue("color");

.is-active{
  color:red;
}

<div class="top">
  <div class="is-active">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<div class="bottom">
  <div>Text 1</div>
  <div>Text 2</div>
  <div>Text 3</div>
</div>

Add class to div depending on class in another div

1 Answers1