:placeholder-shown, :empty & :blank

These three pseudo-classes match "emptiness" in different, precise senses: an input currently showing placeholder text, an with literally zero content, and (in newer browsers) a form control the the user hasn't typed anything into.

:placeholder-shown

<input> and <textarea> elements match :placeholder-shown while they are currently displaying their placeholder text. This happens when the field is empty and has a placeholder attribute.

CSS

input::placeholder {
  color: #9ca3af;
}

/* Style the input itself while its placeholder is showing */
input:placeholder-shown {
  border-style: dashed;
}

/* Once the user types something, the input no longer
   matches :placeholder-shown, and this rule stops applying */
input:not(:placeholder-shown) {
  border-style: solid;
}

:empty

:empty matches an element that has absolutely no children at all—no element children and no text nodes, not even whitespace.

CSS

/* Hide empty tooltip/badge containers that a CMS
   sometimes renders with no content */
.badge:empty {
  display: none;
}

HTML

<!-- Matches :empty -->
<div class="badge"></div>

<!-- Does NOT match :empty — contains a text node (just a space) -->
<div class="badge"> </div>

<!-- Does NOT match :empty — contains a child element -->
<div class="badge"><span></span></div>

Whitespace disqualifies :empty

A single space, newline, or any other whitespace text node is enough to make an element no longer match :empty. If your template or formatter leaves whitespace inside an otherwise empty container, the selector will not match it.

:blank

:blank is a newer pseudo-class intended for form controls whose current value is empty. Unlike :placeholder-shown, it does not depend on the existence of a placeholder attribute.

CSS

textarea:blank {
  border-color: #d1d5db;
}

Note

Browser support for :blank is still limited compared with :placeholder-shown and :empty. Verify support before using it in production. For most forms,:placeholder-shown remains the more practical choice.

Choosing between them

Use :placeholder-shown when you want to style an <input> or <textarea> that is currently displaying its placeholder. Use :empty when you need to detect elements with absolutely no content, remembering that even whitespace prevents a match. Use :blank only if your target browsers support it, treating it as a progressive enhancement rather than a required feature.