:empty - CSS Selector

:empty

Summary of characteristics of the :empty selector

Quick description
Pseudo-class targeting elements without content.
Status
Standard
W3C Module
Selectors
References (W3C)
 🡇  
 🡅  
Document status: WD (Working Draft)
Document status: REC (Recommendation)

Description of the :empty pseudo-class.

The pseudo-class selector :empty targets empty elements, meaning those that have no content and no child elements. Comments are considered empty, but be careful with spaces that may appear before or after the comment.

Examples of empty paragraphs: p/p p!-- Comment --/p Example of a non-empty paragraph: p !-- Comment -- /p

If content is added by the content property before or after the element, this content is not taken into account to determine if the element is empty.

Unfortunately, the pseudo-class :empty doesn't apply to input fields in a form.

Level 4 of the specification states that elements that contain only one or more spaces should be considered empty, and therefore targeted by the pseudo-class :empty. This is more in line with what the user sees.

Example of use of the pseudo-class :empty.

The example below shows the effect of the pseudo-class :empty on table cells: empty cells have a red outline, in addition to the black border common to all cells.
The last cell contains a space. The latest version of the standard specifies that spaces should be considered empty content, but no browsers handle this peculiarity at the moment (2026).

MondayTuesdayWednesdayThursdayFriday
SwimmingFootingSquash

The operation is exactly the same on a grid (below). The second cell is indeed empty, while the last cell contains a span element: so it’s not considered empty, even though the span element itself is empty.

We can also see that the content generated by the content property (the dashes) isn't taken into account when determining empty cells.

Cell 1
Cell 3
Cell 4
Cell 5

Browser compatibility with :empty.

The pseudo-class :empty is well recognized by current browsers. On the other hand, treating elements that contain only one or more spaces as empty is far from being supported (2026).

Column 1
Browser support for the :empty pseudo-class, which targets empty elements (elements that have no content).
Column 2
Browser support for level 4 of the specification, which considers that spaces are not enough for the element to be considered non-empty.
1
:empty
pseudo-class
2
Support for
spaces
Estimated overall support.
97%
0%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Edge

Firefox

Chrome

Safari sur IOS

Androïd Brower

KaiOS Browser

Opéra

Safari

Chrome pour Androïd

Firefox pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.
Caniuse
Caniuse

Historic of the :empty pseudo-class.

  • Selectors Level 3

    This document describes the selectors that already exist in CSS1 and CSS2, and further introduces new selectors for CSS3 and other languages that may need them.

    Regarding :empty Introduction of the pseudo-class :empty.
    WD
    August 03, 1999
    Working Draft.
    CR
    November 13, 2001
    Candidate Recommendation.
    PR
    December 15, 2009
    Proposed for recommendation.
    REC
    September 29, 2011
    Recommendation .

  • Selectors Level 4

    This specification module defines new selectors that can be used in CSS.

    Regarding :empty Level 4 of the specification now provides that the pseudo-class :empty targets elements that contain only spaces.
    WD
    September 29, 2011
    Working Draft.
    CR
    PR
    REC

See also: DOM-related pseudo-classes.

Many pseudo-classes allow you to target elements based on their position in the document tree (DOM).

:empty
Pseudo-class targeting elements without content.
:first-child
Pseudo-class targeting the first child of an element, in the document order.
:first-of-type
Pseudo-class targeting the first elements of each type, in the order of the document.
:last-child
Pseudo-class targeting the last child of an element in the document order.
:last-of-type
Pseudo-class targeting the last elements of each type in the document order.
:nth-child()
Langue française
Pseudo-class targeting a descendant based on its position in the document order.
⚠
:nth-col()
Langue française
Pseudo-class targeting one of the columns in a grid container based on its number.
:nth-last-child()
Langue française
Pseudo-class targeting an element based on its number, starting from the end, and in document order.
⚠
:nth-last-col()
Langue française
Pseudo-class targeting one of the columns in a grid container, starting the count from the end.
:nth-last-of-type()
Langue française
Pseudo-class targeting an element by its number, counting only elements of the same type and starting from the end.
:nth-of-type()
Langue française
Pseudo-class targeting an element based on its number, counting only elements of the same type.
:only-child
Langue française
Pseudo-class targeting elements that are the only children of their parent.
:only-of-type
Langue française
Pseudo-class indicating elements that are the only child of their parent, considering only elements of the same type.
:root
Pseudo-class targeting the root element of the document (in HTML, the root element is the HTML element).
:scope
Targets the current element. Useful inside an @scope directive.
::part()
Langue française
Pseudo-element that targets a sub-element in the page's shadow tree (created by template).