El selector :empty CSS

El pseudo-selector :empty ( nuevo en CSS3 )  selecciona elementos HTML vacíos, pero no a todos:

Selecciona:

  <td></td>
  <td><!--comentario--></td>

No selecciona:

  <td>  </td><!--un espacio en blanco-->
  <td>&nbsp;</td>

Veamos un ejemplo:

En el siguiente ejemplo queremos aplicar una trama ( background-image:url(images/pattern.png) ) a las celdas vacías ( td:empty ).

table#ejemplo{ width:500px; margin:10px auto;}
table#ejemplo td{ border:1px solid #d9d9d9; border-collapse:collapse; text-align:center; padding:.5em;}
table#ejemplo td:empty{ background-image:url(images/pattern.png);}

<table id="ejemplo">
  <tbody><tr>
    <td>1</td>
    <td>2</td>
    <td></td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td><!--casilla nº 8--></td>
  </tr>
  <tr>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td>14</td>
    <td>15</td>
    <td>16</td>
  </tr>
</tbody></table>

Observamos que las casillas 3 ( <td></td> ) y 8  ( <td><!--casilla nº 8--></td> ) tienen la trama como imagen de fondo, mientras que las celdas 12 ( <td> </td> ) y 13 ( <td>&nbsp;</td> ) quedan sin estilo

1	2		4
5	6	7
9	10	11
	14	15	16

Ojo

El selector :empty selecciona elementos como <img>, <hr>, <input type="text"> o <textarea> vacíos. También lo puede ser un elemento <canvas> aunque hayamos utilizado javascript para dibujar algo dentro.

El soporte en los navegadores

El soporte en los navegadores para el pseudo-selector :empty es muy bueno.