the css selector :empty for tr td is not working

Question

I have checked some article here, but I just got no answer in my case. I need the empty content td show no bg-color, and I have css an :empty, but it does not work.

sample code here: http://codepen.io/bard/pen/aDKiv

Thanks experts.

Answer 1

It is not working as your TD has a blank space in itself. Do not let that '&nbsp' come in TD and it will work as '&nbsp' does not fulfill the condition of :empty

And change the following

#wp-calendar tr td:empty {
    background:none !important;
}

Answer 2

you can achieve it as follows:

#wp-calendar tr td.pad:not(:empty) {
    border:none !important;
    background-color: rgba(255,255,255,0.04);
}

if you want to apply some style in case of empty. try following:

#wp-calendar tr td.pad:(:empty) {
   /* some style */
}