El selector :empty

facebook-svg gplus-svg twitter-svg

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

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

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

El soporte en los navegadores

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

Enlaces útiles

- El soporte en los navegadores para el pseudo-selector :empty