CSS target title that element that ocurrs before a table

Question

I have a table that looks like this...

<h4>Section title</h4>

<table>
    <tbody>
        <tr class="myrow">
        </tr>
    </tbody>
</table>

I am trying to use CSS to target the H4 in realtion to the table below it. I have tried...

    h4:has(+ .tr.myrow) {
        color:red;
    }

This isn't working, where am I going wrong?

UPDATE

I am now attempting to achieve this using jQuery instead like this...

$(".myrow").prev().prev().hide();

Still not seeing what I expect, can you stack .prev like this?

CSS doesn't offer any selectors which will target before a selector! Check this might help - https://stackoverflow.com/questions/10225364/select-specific-element-before-other-element — Ansh Varun, Apr 26 '23 at 18:31
What i can suggest is make empty div before that and then use it with selector like div + h4 — Ansh Varun, Apr 26 '23 at 18:32
If CSS doesn't offer this functionality then is jQuery a suitable alternative? — jsmitter3, Apr 26 '23 at 18:33
@AnshVarun CSS offers :has now and it’s implemented in most major browsers, though in FF it’s still behind a flag — A Haworth, Apr 26 '23 at 18:35
It might not work with few browsers @AHaworth https://caniuse.com/?search=has() — Ansh Varun, Apr 26 '23 at 18:36

score 1 · Answer 1 · answered Apr 26 '23 at 18:42

You can do this using :has provided you are happy that the browsers you are targetting implement it (most major browsers do, but FF puts it behind a flag at the moment).

The + needs to target the element immediately following, this is a table element.

The td doesn't have a dot in front of it - it's a tag not a class.

<h4>Section title</h4>

<table>
  <tbody>
    <tr class="myrow">
    </tr>
  </tbody>
</table>
<style>
  h4:has(+ table tr.myrow) {
    color: red;
  }
</style>

CSS target title that element that ocurrs before a table

1 Answers1