Question

Is it possible to have a css style be aware of whether the element it is being applied to has some sort of content or not? I am currently using tables (forced to since the end user uses cms to create pages) with a css for each cell, as so

<table>
<tr>
    <td class="someClass">Test value 1</td>
    <td class="someClass">Test value 2</td>
</tr>
<tr>
    <td class="someClass">Test value 3</td>
    <td class="someClass"></td>
</tr>
</table>

As displayed, there is the chance that a table cell is left empty. Is there a way to make “someClass” aware of this and not apply the style to this cell?

I am sure there is some js hack I could apply, but I wonder if it is possible with pure css. Long shot?

Thanks.

Answer 1

Simply use the :empty pseudo-class like so:

td.someClass:not(:empty) {
    /* Styles */
}

As Petr Marek mentions it’s not very reliable as a cross-browser solution, so if you must support older browsers (IE8 and older) you will need JS (which you can probably figure out yourself). Otherwise, the above CSS rule will work just fine.

You can find the browser compatibility of :not() and :empty here