# empty pseudo-class

The `empty` pseudo-class specifies how an empty element (containing no text) will look like.

## Syntax

`selector:empty { }`

## Example

In this example, the last `li` is empty, but will still have a marker:

`<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li></li> </ul>`

:

## Example

Let's change the behavior for the empty `li` tag:

`<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li></li> </ul>` `li:empty { border: 1px solid blue; list-style-type: circle; color: blue; width: 100px; }`

:

## Example

Let's hide the empty `li` completely:

`<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li></li> </ul>` `li:empty { display: none; }`

:

## See also

- the `empty-cells` property
  that tells the browser how to display the background and border of empty table cells

← →
↑
en ru