Choose td that has a child with certain class

Question

I am trying to come up with a selector that would apply to only those tds that have a child with special class. To achieve this, I am trying to use has selector. What I am doing wrong here ?

tr td:has(.test_has' {
 background: red;
}

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>
      <div class="test">Griffin</div>
    </td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

"In the current specification :has is not marked as part of the snapshot selector profile, **which means it can not be used within stylesheets**; only with functions like document.querySelector()." - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) — Turnip, Jul 09 '18 at 09:08
The :has pseudoclass is currently not supported by any browser, so it won't work now, and I guess it won't work in the near future. See [here](https://caniuse.com/#search=%3Ahas) — Matthias Seifert, Jul 09 '18 at 09:09

score 0 · Accepted Answer · answered Jul 09 '18 at 09:10

.has is an experimental technology for now so it will not work. Check this

Alternate you can use jQuery

$(".test").each(function() {
  $(this).closest("td").css({
    "background": "red"
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>
      <div class="test">Griffin</div>
    </td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

jQuery, not even javascript? – Temani Afif Jul 09 '18 at 09:12 — Temani Afif, Jul 09 '18 at 09:12

Choose td that has a child with certain class

1 Answers1