Pseudo-classe CSS :empty

La pseudo-classe CSS :empty sélectionne les éléments qui n’ont aucun élément enfant ni contenu textuel.

Les pseudo-éléments ::before et ::after n’affectent pas le caractère vide d’un élément, même s’ils existent à l’intérieur de l’élément.

Si une balise de fermeture suit directement la balise d’ouverture, alors l’élément est considéré comme vide.

Les éléments auto-fermants tels que <hr />, <br /> et <img /> sont considérés comme vides et correspondront au sélecteur :empty.

Version

Selectors Level 3

Selectors Level 4

INFO

Selectors Level 4 conserve le même comportement pour :empty que le Level 3, en ne sélectionnant que les éléments n’ayant absolument aucun enfant.

Syntaxe

Exemple de syntaxe CSS :empty

css

:empty {
  css declarations;
}

Exemple du sélecteur :empty avec la balise `<p>` :

Exemple de code CSS :empty

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:empty {
        width: 200px;
        height: 30px;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:empty selector example</h2>
    <p>Lorem ipsum is simply dummy text...</p>
    <p></p>
    <p>Lorem ipsum is simply dummy text...</p>
  </body>
</html>

Try it Yourself »

Exemple du sélecteur :empty avec la balise `<div>` :

Autre exemple de code CSS :empty

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div:empty {
        background-color: #ccc;
        padding: 15px;
        width: 50%;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>:empty selector example</h2>
    <p>
      Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
    <div></div>
    <p>
      Lorem Ipsum is simply dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
  </body>
</html>

Try it Yourself »

Practice

What does the :empty pseudo-class in CSS represent?

Affects elements with no children (including text nodes).Affects elements with uppercase text content.A filter for removing empty elements from the DOM.Affects elements with no text content.

Pseudo-classe CSS :empty ​

Version ​

Syntaxe ​

Exemple du sélecteur :empty avec la balise <p> : ​