Pseudoclase empty
La pseudoclase empty define cómo se verá
un elemento vacío (que no contiene texto).
Sintaxis
selector:empty {
}
Ejemplo
En este ejemplo, el último li está vacío,
pero seguirá teniendo un marcador:
<ul>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li></li>
</ul>
:
Ejemplo
Cambiemos el comportamiento para la etiqueta vacía li:
<ul>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li></li>
</ul>
li:empty {
border: 1px solid blue;
list-style-type: circle;
color: blue;
width: 100px;
}
:
Ejemplo
Ocultemos por completo los li vacíos:
<ul>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li></li>
</ul>
li:empty {
display: none;
}
:
Véase también
-
la propiedad
empty-cells,
que indica al navegador cómo mostrar el fondo y el borde de las celdas vacías de una tabla
