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.