This tutorial is from open-source community. Access the source code
Neste laboratório, exploraremos a pseudo-classe :empty em CSS, que nos permite selecionar e ocultar elementos que não possuem conteúdo. Ao aplicar esta técnica, podemos melhorar o design geral e a legibilidade de nossas páginas web, removendo desordem e espaços vazios. Através de uma série de exercícios, aprenderemos a usar efetivamente a pseudo-classe :empty para ocultar elementos vazios e criar páginas web mais limpas e polidas.
index.html e style.css já foram fornecidos na VM (Virtual Machine).
Para ocultar elementos sem conteúdo, use a pseudo-classe :empty. Por exemplo, se você tiver o seguinte código HTML:
<p>Lorem ipsum dolor sit amet. <button></button></p>Você pode usar o seguinte código CSS para ocultar o elemento button sem conteúdo:
p:empty {
display: none;
}Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.
Parabéns! Você concluiu o laboratório Ocultar Elementos Vazios. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.