Dominando la pseudo-clase :empty de CSS

Introducción

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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/IntermediateStylingGroup -.-> css/pseudo_classes("Pseudo-classes") subgraph Lab Skills css/selectors -.-> lab-35208{{"Ocultar elementos vacíos"}} css/display_property -.-> lab-35208{{"Ocultar elementos vacíos"}} css/pseudo_classes -.-> lab-35208{{"Ocultar elementos vacíos"}} end

Ocultar elementos vacíos

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.

Resumen

¡Felicidades! Has completado el laboratorio Ocultar elementos vacíos. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.