How to set CSS attributes for one element on the basis of other element's class

sunil
December 13, 2024
151 views
0 votes
2 Answers

I am working with React and CSS. I wanted to set "background-color":"yellow" on selector 2 (tr#selector2), if selector 1 (div.selector1) is having "show" class:

div.selector1.show

And wanted to set "background-color":"red" on selector 2 (tr#selector2), if selector 1 (div.selector1) is having "hide" class-

div.selector1.hide

Note: Selector 1 and Selector 2 both are not siblings. Both are dynamic elements in html.

<div>
  <div class="selector1"></div>
  <div class="div2">
    <div>
      <div>
        <div class="div3"></div>
        <div class="div4"></div>
        <div class="div5">
          <div class="div6"></div>
          <div class="div7"></div>
          <div class="div8">
            <table>
              <thead>
                <tr class="selector2"></tr>
              </thead>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answers

If the structure is as shown it in terms of the juxtaposition of selector1 and div2 then you can select using the adjacent sibling combinator (+):

<style>
  .selector1.show+.div2 .selector2 {
    background-color: pink;
  }
  
  .selector1.hide+.div2 .selector2 {
    background-color: yellow;
  }
</style>
<div>
  <div class="selector1 show"></div>
  <div class="div2">
    <div>
      <div>
        <div class="div3"></div>
        <div class="div4"></div>
        <div class="div5">
          <div class="div6"></div>
          <div class="div7"></div>
          <div class="div8">
            <table>
              <thead>
                <tr class="selector2">
                  <td>selector2</td>
                </tr>
              </thead>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

If the structure is more general, in that selector1 and div2 are not in any sort of relationship (but selector2 is still within div2) then you can select using :has on some parent of selector1 and div2. This snippet uses body for that:

<style>
  body:has(.selector1.show) .div2 .selector2 {
    background-color: pink;
  }
  
  body:has(.selector1.hide) .div2 .selector2 {
    background-color: yellow;
  }
</style>
<div>
  <div class="selector1 show"></div>
  <div class="div2">
    <div>
      <div>
        <div class="div3"></div>
        <div class="div4"></div>
        <div class="div5">
          <div class="div6"></div>
          <div class="div7"></div>
          <div class="div8">
            <table>
              <thead>
                <tr class="selector2">
                  <td>selector2</td>
                </tr>
              </thead>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

I would suggest some restructuring to make things much more convenient and extendable. You probably switch the classes based on a condition or something. What ever that thing is you can put in your react state and then programmatically switch classes like:

import React, { useState, useEffect } from 'react';

export function App(props) {
  const [myCond, setMyCond] = useState(false)

  useEffect(() => {
    // you need to calculate the correct value for your condition here
    setMyCond(true)
  }, [])

  return (
    <div>
      <div class={`selector1${myCond ? ' show' : ' hide'}`}></div>
      <div class="div2">
        <div>
          <div>
            <div class="div3"></div>
            <div class="div4"></div>
            <div class="div5">
              <div class="div6"></div>
              <div class="div7"></div>
              <div class="div8">
                <table>
                  <thead>
                    <tr class={`selector2${myCond ? ' bg-yello' : ' bg-red'}`}></tr>
                  </thead>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Please signup or login to give your own answer.

Click here to cancel reply.