This tutorial is from open-source community. Access the source code
En este laboratorio, exploraremos la pseudo-clase :empty en CSS, que nos permite seleccionar y ocultar elementos que no tienen contenido. Al aplicar esta técnica, podemos mejorar el diseño general y la legibilidad de nuestras páginas web al eliminar el desorden y los espacios en blanco. A través de una serie de ejercicios, aprenderemos a utilizar efectivamente la pseudo-clase :empty para ocultar elementos vacíos y crear páginas web más limpias y pulidas.
index.html y style.css ya se han proporcionado en la máquina virtual.
Para ocultar elementos sin contenido, utiliza la pseudo-clase :empty. Por ejemplo, si tienes el siguiente código HTML:
<p>Lorem ipsum dolor sit amet. <button></button></p>Puedes utilizar el siguiente código CSS para ocultar el elemento del botón sin contenido:
p:empty {
display: none;
}Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.
¡Felicidades! Has completado el laboratorio Ocultar elementos vacíos. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.