how to set "div table td" if span class="red_border"

Question

I'm sure the solution will be easy, but I'm new to the CSS, I have this code:

div.main_table td span .red_text
{
    border-left: 10px solid;
    border-left-color: #e22850 !important;
}

<div class="main_table">
 <table>
   <tbody>
  <tr>
     <td>
    <div class="caption">Slot 1</div>
    <div class="container1"> 
     <span class="dash" id="IT1"><span style="" class="red_border">TEST</span></span><span> / </span>
     <span class="dash" id="IT2"><span style="" class="black">TEST</span></span><span> / </span>
     <span class="dash" id="IT3"><span style="" class="black">TEST</span></span>
    </div>
   </td>
     <td>
    <div class="caption">Slot 2</div>
    <div class="container1"> 
     <span class="dash" id="IT4"><span style="" class="black">TEST</span></span><span> / </span>
     <span class="dash" id="IT5"><span style="" class="black">TEST</span></span><span> / </span>
     <span class="dash" id="IT6"><span style="" class="black">TEST</span></span>
    </div>
   </td>  
     <td>
    <div class="caption">Slot 3</div>
    <div class="container1"> 
     <span class="dash" id="IT7"><span style="" class="red_border">TEST</span></span><span> / </span>
     <span class="dash" id="IT8"><span style="" class="black">TEST</span></span><span> / </span>
     <span class="dash" id="IT9"><span style="" class="black">TEST</span></span>
    </div>
   </td>       
  </tr>       
 </tbody></table>
</div>

I have come up with this, but this only applies to the span itself and I need it to be applied to the "div.main_table td" when class="red_border" is present in the span, if it makes any sense. Thanks anyone for any input.

Hi @John K. Your request seems to be unclear what are you trying to do here? — innocent, Mar 28 '22 at 18:03

score 0 · Answer 1 · answered Mar 28 '22 at 18:20

You are trying to target a parent/ancestor element based on a child/grandchild selector. The only CSS method currently available to do this is the :has pseudo-class.

However, the :has pseudo-class currently has extremely limited browser support (only supported by Safari). See caniuse.

Using the :has pseudo-class your selector would look like this:

div.main_table td:has(span.red_text)

how to set "div table td" if span class="red_border"

1 Answers1