Pseudo- classes in CSS: Styling Elements That Have No Children Using :empty

Sometimes WYSIWYG (what you see is what you get) editors add empty <p> elements to your content. These empty elements may affect your document layout if your stylesheet also uses p as a type selector. It’s possible to visually exclude these elements, however, with the :empty pseudo-class:

p:empty {

display: none;


Earlier versions of the selectors specifications defined :empty elements as elements devoid of any element or text nodes—including space or newline characters. This means that for most current implementations, p:empty matches <p></p> , but not <p> </p> .

Perhaps unexpectedly, :empty will always match <img> and <input> elements when used with the universal selector (again, :empty is the same as *:empty ). For <input> elements, this is true even if the field contains text.

In the meantime, you can use the :pLacehoLder-shown pseudo-class to select blank form control fields. We’ll discuss this selector later in the chapter.

Source: Brown Tiffany B (2021), CSS , SitePoint; 3rd edition.

Leave a Reply

Your email address will not be published. Required fields are marked *