JSFiddle - React, Tailwind, and code Playground

by pleinx

HTML

<h1>
  Short + child combinator
</h1>
<div class="example">
  <div class="box">
    A
    <table>
      <tr>
        <td>
          <div class="box">
            nested again
          </div>
        </td>
      </tr>
    </table>
  </div>
  <div class="box">
    B
    <table>
      <tr>
        <td>
          <div class="box">
            nested again
          </div>
        </td>
      </tr>
    </table>
  </div>
</div>

<h1>
Long
</h1>
<div class="example">
  <div class="long-selectors-box">
    A
    <table>
      <tr>
        <td>
          <div class="long-selectors-box">
            nested again
          </div>
        </td>
      </tr>
    </table>
  </div>
  <div class="long-selectors-box">
    B
    <table>
      <tr>
        <td>
          <div class="long-selectors-box">
            nested again
          </div>
        </td>
      </tr>
    </table>
  </div>
</div>

CSS

.example {
  margin: 10px 0;
}

.example > .box {
  border: 1px solid red;
}

/*
.example > .box, table td > .box {
  border: 1px solid red;
}
*/

.example .long-selectors-box {
  border: 1px solid red;
}