Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Revision 41269 of :empty

  • Revision slug: CSS/:empty
  • Revision title: :empty
  • Revision id: 41269
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 17 words added, 4 words removed

Revision Content

{{ CSSRef() }}

Summary

The :empty pseudo-class represents an element that has no children at all. Only element nodes and text (including whitespace) must be considered. Comments or processing instructions must not affect whether an element is considered empty or not.

Syntax

span:empty { style properties }

Examples

span:empty::before  { background-color: lime; }

...where...

  <span></span>

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer ---
Firefox (Gecko) 1.5 (1.8)
Opera 9.5
Safari (WebKit) 3.1 (525), very buggy before

{{ languages( { "es": "es/CSS/vac\u00edo", "fr": "fr/CSS/:empty", "pl": "pl/CSS/:empty" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>The<code> :empty </code>pseudo-class represents an element that has no children at all. Only element nodes and text (including whitespace) must be considered. Comments or processing instructions must not affect whether an element is considered empty or not.</p>
<h3 name="Syntax">Syntax</h3>
<pre class="eval">span:empty { <em>style properties</em> }
</pre>
<h3 name="Examples">Examples</h3>
<pre class="brush: css">span:empty::before  { background-color: lime; }
</pre>
<p>...where...</p>
<pre class="brush: html">  &lt;span&gt;&lt;/span&gt;
</pre>
<h3 name="Specifications">Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#empty-pseudo" title="http://www.w3.org/TR/css3-selectors/#empty-pseudo">CSS3 Selectors #empty-pseudo</a> </li>
</ul>
<h3 name="Browser_compatibility">Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td>---</td> </tr> <tr> <td>Firefox (Gecko)</td> <td><strong>1.5</strong> (1.8)</td> </tr> <tr> <td>Opera</td> <td><strong>9.5</strong></td> </tr> <tr> <td>Safari (WebKit)</td> <td><strong>3.1</strong> (525), very buggy before</td> </tr> </tbody>
</table>
<p>{{ languages( { "es": "es/CSS/vac\u00edo", "fr": "fr/CSS/:empty", "pl": "pl/CSS/:empty" } ) }}</p>
Revert to this revision