html - style a div based on the condition that a separate table with no tds -

i have table , div next it.

 <table>   <tbody>      <tr>       <th>           name      </th>      <th>          age      </th>   </tr>   </tbody>  <table>    <div>table has not tds</div> 

i wanted highlight div based on condition above table has no tds.

i tried this:

table tbody td:empty + div {   background-color: red; } 

the above not working. can suggest solution pure css?

the + on css selector not work because <div> not sibling of <td>. on other hand, table + div { something: }would work, because on same hierarchical level.

aside that, unfortunately, afaik, there's no way make css rule child affects parent (nor siblings of parent).

basically, html need restructured in way want. could, example, write small bit of js code adds class table if has no <td>s, class used css rule.