はじめに
この実験では、CSS の:empty疑似クラスを調べます。これにより、コンテンツがない要素を選択して非表示にすることができます。この手法を適用することで、雑音や空きスペースを取り除くことができ、Web ページの全体的なデザインと読みやすさを向上させることができます。一連のエクササイズを通じて、:empty疑似クラスを効果的に使用して空の要素を非表示にし、クリーンで洗練された Web ページを作成する方法を学びます。
空の要素を非表示にする
VM 内には既にindex.htmlとstyle.cssが用意されています。
コンテンツがない要素を非表示にするには、:empty疑似クラスを使用します。たとえば、次の HTML コードがある場合：
<p>Lorem ipsum dolor sit amet. <button></button></p>コンテンツがないボタン要素を非表示にするには、次の CSS コードを使用できます：
p:empty {
display: none;
}右下隅の「Go Live」をクリックして、ポート 8080 で Web サービスを実行してください。その後、Web 8080タブを更新して Web ページをプレビューできます。
まとめ
おめでとうございます！「空の要素を非表示にする」実験を完了しました。技術力を向上させるために、LabEx でさらに実験を行って練習してください。