El selector :empty
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> </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> </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.