Selecting empty table rows with CSS?

This maybe an example of me not seeing the wood for the trees.

I have solved the problem with JS, but did wonder if there was a straight forward option in CSS to select empty table rows.

I came up with this, which works, but is reliant on :has (firefox config etc)

table.my-table-name tr:not(:has(td:not(:empty)))

It’s not a very nice read either.

I don’t believe there’s a solution as you’re looking for a way for a parent to identify what is going on with the children, and that’s :has() as you noted.

I might be wrong, of course :slight_smile: .

1 Like

I’m finding the use of :not a bit confusing here. I guess the double negative makes it work.
More obvious and readable without the nots.

I get it now, it’s so all cells in the row are empty.

1 Like

It’s horrible I agree :slight_smile:

That’s right, so not this

<tr>
    <td></td><td>Baz</td><td></td>
</tr>

I think you could be right, I don’t know if @PaulOB has anything up his sleeve :slight_smile:

As Ryan said you need :has in order to do this. You could simplify the rule a bit like so.

tr{background:green;}
tr:has(td:not(:empty)){
  background: blue;
}

It’s just the opposite basically.

Note that :empty in css means empty. It won’t work if there is a space between opening and closing tags so you could come unstuck if someone formats the code differently.:wink:

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.