Breaking

Post Top Ad

Your Ad Spot

miércoles, 13 de noviembre de 2019

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
124
567
91011
 141516

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 :emptystar es muy bueno.

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas