Reports

You can refer the following code. You need to check whether selector1 has class show or hide and then apply the conditions.

However, the selector2 ie empty tr element not taking style hence I have added some text.

Please let me know if you get to know the reason.

const selector1 = document.querySelector('.selector1');
const selector2 = document.querySelector('.selector2');

if (selector1.classList.contains('show')) {
    document.getElementById('selector2').innerText = 'somehow styles not applying on empty tr';
  document.getElementById('selector2').style.backgroundColor = 'rgba(255, 255, 0)';
}

if (selector1.classList.contains('hide')) {
    document.getElementById('selector2').innerText = 'somehow styles not applying on empty tr';
  document.getElementById('selector2').style.backgroundColor = 'rgba(255, 0, 0)';
}

.selector1 {
  background-color: red;
  width: 200px;
  padding: 10px;
}

table thead tr .selector2 {
  padding: 10px;
  width: 200px;
}

<div>
  <div class="selector1 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" id="selector2"></tr>
              </thead>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Hope, this helps.

79279010