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) 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


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.

  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:


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