CSS :empty

The CSS :empty selector is used to select elements that do not have any children elements or text content. This selector is particularly useful when you want to style elements that don't have any content. Let's see how it works with some examples.

Result:

In the example above, we have an empty <p></p> element. Let's style this element using the :empty selector.


p:empty {
  background-color: lightblue;
  border: 1px solid blue;
  padding: 10px;
}

Result:

Now, let's create an example with a <div> element that has some children elements but no text content.

Result:


div:empty {
  border: 2px dashed red;
}

Result:

As you can see, the :empty selector selects the <div> element even though it has children elements, but no text content.

It's important to note that the :empty selector does not select elements with whitespace, such as spaces or line breaks. It only selects elements that have no children elements or text content.

Now that you understand how the :empty selector works, you can use it to style elements that don't have any content in your CSS.