Menu
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.
997
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
148
The only thing I can think of that relates to your question is psuedo-classes, such as empty. Here is an example:
<html>
<head>
<title>Example</title>
<style type="text/css">
.cell:not(:empty) {
background-color: red;
}
.cell:empty {
background-color: blue;
}
</style>
</head>
<body>
<table><tBody>
<tr><td class="cell"></td><td class="cell">Not empty</td></tr>
<tr><td class="cell">Not empty</td><td class="cell"></td></tr>
</tBody></table>
</body>
</html>
In modern browsers, you will see that empty cells are blue and cells with content are red. The key here is the first line of CSS, .cell:not(:empty). This applies the CSS if the element does not have the psuedo-class :empty applied.
21
No, with pure cross-browser css it is not. You will have to edit their cms or use javascript.
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
