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


Revision 40999 of :last-child

  • Revision slug: CSS/:last-child
  • Revision title: :last-child
  • Revision id: 40999
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment linkification + better wording; 1 words added, 1 words removed

Revision Content

{{ CSSRef() }}


The :last-child pseudo-class represents any element that is the last child element of its parent.


element:last-child { style properties }



    background-color: lime;


    <span>This span is not limed.</span>
    <span>This span is! :)</span>

... should look like ...
This span is not limed. This span is! :)


{{ languages( { "fr": "fr/CSS/:last-child", "pl": "pl/CSS/:last-child" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>The <code>:last-child</code> <a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> represents any element that is the last child element of its parent.</p><h3 name="Syntax">Syntax</h3>
<pre class="eval">element:last-child { <em>style properties</em> }
<p>  </p>
<h3 name="Examples">Examples</h3>
<pre class="brush: css">span:last-child
    background-color: lime;
<pre class="brush: html">  &lt;div&gt;
    &lt;span&gt;This span is not limed.&lt;/span&gt;
    &lt;span&gt;This span is! :)&lt;/span&gt;
<p>... should look like ... <br>
<span>This span is not limed.</span> <span style="background-color: lime;">This span is! :)</span></p>
<h3 name="Notes">Notes</h3>
<p>{{ languages( { "fr": "fr/CSS/:last-child", "pl": "pl/CSS/:last-child" } ) }}</p>
Revert to this revision