Masquer les éléments vides

CSSCSSBeginner
Pratiquer maintenant

This tutorial is from open-source community. Access the source code

💡 Ce tutoriel est traduit par l'IA à partir de la version anglaise. Pour voir la version originale, vous pouvez cliquer ici

Introduction

Dans ce laboratoire, nous allons explorer la pseudo-classe :empty en CSS, qui nous permet de sélectionner et de masquer les éléments qui n'ont pas de contenu. En appliquant cette technique, nous pouvons améliorer la conception globale et la lisibilité de nos pages web en éliminant le brouillard et les espaces vides. Grâce à une série d'exercices, nous allons apprendre à utiliser efficacement la pseudo-classe :empty pour masquer les éléments vides et créer des pages web plus propres et plus soignées.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) 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{{"Masquer les éléments vides"}} css/display_property -.-> lab-35208{{"Masquer les éléments vides"}} css/pseudo_classes -.-> lab-35208{{"Masquer les éléments vides"}} end

Masquer les éléments vides

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour masquer les éléments sans contenu, utilisez la pseudo-classe :empty. Par exemple, si vous avez le code HTML suivant :

<p>Lorem ipsum dolor sit amet. <button></button></p>

Vous pouvez utiliser le code CSS suivant pour masquer l'élément bouton sans contenu :

p:empty {
  display: none;
}

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire Masquer les éléments vides. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.