:first-child

  • Revision slug: CSS/:first-child
  • Revision title: :first-child
  • Revision id: 41225
  • Created:
  • Creator: Miken32
  • Is current revision? No
  • Comment no wording changes

Revision Content

{{ CSSRef() }}

Summary

The :first-child pseudo-class matches any element that is the first child element of its parent.

Syntax

element:first-child { style properties }

 

Examples

span:first-child
{
    background-color: lime;
}

...where...

  <div>
    <span>This span is limed!</span>
    <span>This span is not. :(</span>
  </div>

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

Notes

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

Revision Source

<p>{{ CSSRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>The <code>:first-child</code> pseudo-class matches any element that is the first child element of its parent.</p>
<h3 name="Syntax">Syntax</h3>
<pre class="eval">element:first-child { <em>style properties</em> }
</pre>
<p> </p>
<h3 name="Examples">Examples</h3>
<pre class="brush: css">span:first-child
{
    background-color: lime;
}
</pre>
<p>...where...</p>
<pre class="brush: html">  &lt;div&gt;
    &lt;span&gt;This span is limed!&lt;/span&gt;
    &lt;span&gt;This span is not. :(&lt;/span&gt;
  &lt;/div&gt;
</pre>
<p>... should look like ... <br>
<span style="background-color: lime;">This span is limed!</span> <span>This span is not. :(</span></p>
<h3 name="Notes">Notes</h3>

<p>{{ languages( { "fr": "fr/CSS/:first-child", "pl": "pl/CSS/:first-child" } ) }}</p>
Revert to this revision