Clase pseudo :empty de CSS

La clase pseudo :empty de CSS selecciona elementos que no tienen ningún elemento hijo ni contenido de texto.

Los ::before y ::after pseudo-elementos no afectan la vaciedad de un elemento, incluso si existen dentro de él.

Si una etiqueta de cierre sigue directamente a la etiqueta de apertura, se considera vacía.

Los elementos de autocierra como <hr />, <br /> y <img /> se consideran vacíos y coincidirán con el selector :empty.

Versión

INFO

Selectores Nivel 4 mantiene el mismo comportamiento para :empty que Nivel 3, coincidiendo solo con elementos que no tienen absolutamente ningún hijo.

Sintaxis

Ejemplo de sintaxis de CSS :empty

css

:empty {
  css declarations;
}

Ejemplo del selector `:empty` con la etiqueta `<p>`:

Código de ejemplo de 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 »

Ejemplo del selector `:empty` con la etiqueta `<div>`:

Otro código de ejemplo de 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 »

Práctica

¿Qué representa la clase pseudo :empty en CSS?

Afecta a elementos sin hijos (incluyendo nodos de texto).Afecta a elementos con contenido de texto en mayúsculas.Un filtro para eliminar elementos vacíos del DOM.Afecta a elementos sin contenido de texto.

Clase pseudo :empty de CSS ​

Versión ​

Sintaxis ​

Ejemplo del selector :empty con la etiqueta <p>: ​