mozilla

Version 544799 von :first-child

  • Adressname der Version: Web/CSS/:first-child
  • Titel der Version: :first-child
  • ID der Version: 544799
  • Erstellt:
  • Autor: TylerH
  • Aktuelle Version? Nein
  • Kommentar Removed unnecessary ul from the code so the selector examples remained consistent in their implementation. They worked before, but led to confusion due to being diff. levels of specificity. Please don't add them back w/out explaining the differences

Inhalt der Version

{{ CSSRef() }}

Summary

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

Syntax

element:first-child { style properties }

Examples

Example 1

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

...where...

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

... looks like ...

{{EmbedLiveSample('Example_1',300,50)}}

Example 2 - Using UL

HTML Content

<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
</ul>

CSS Content

li{
  color:red;
}
li:first-child{
  color:green;
}

... looks like ...

{{EmbedLiveSample('Example_2_-_Using_UL',300,100)}}

Specifications

Specification Status Comment
{{ SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child') }} {{ Spec2('CSS4 Selectors') }} No change.
{{ SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child') }} {{ Spec2('CSS3 Selectors') }} Initial definition.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 4.0 {{ CompatGeckoDesktop("1.9") }} 7 9.5 4
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 {{ CompatGeckoMobile("1.9.1") }} 7 10.0 3.1

Internet Explorer notes

Internet Explorer 7 doesn't update the styles when elements are added dynamically. In Internet Explorer 8, if an element is inserted dynamically by clicking on a link the first-child style isn't applied until the link loses focus.

Quelltext der Version

<p>{{ CSSRef() }}</p>
<h2 id="Summary" name="Summary">Summary</h2>
<p>The <code>:first-child</code> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class </a>represents any element that is the first child element of its parent.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="eval">
element:first-child { <em>style properties</em> }
</pre>
<h2 id="Examples" name="Examples">Examples</h2>
<h3 id="Example_1">Example 1</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.&nbsp;:(&lt;/span&gt;
&lt;/div&gt;
</pre>
<p>... looks like ...</p>
<p><span>{{EmbedLiveSample('Example_1',300,50)}}</span></p>
<h3 id="Example_2_-_Using_UL" name="Example_2_-_Using_UL">Example 2 - Using UL</h3>
<h4 id="HTML_Content">HTML Content</h4>
<pre class="brush: html">
&lt;ul&gt;
  &lt;li&gt;List 1&lt;/li&gt;
  &lt;li&gt;List 2&lt;/li&gt;
  &lt;li&gt;List 3&lt;/li&gt;
&lt;/ul&gt;</pre>
<h4 id="CSS_Content">CSS Content</h4>
<pre class="brush: css">
li{
  color:red;
}
li:first-child{
  color:green;
}</pre>
<p>... looks like ...</p>
<p><span>{{EmbedLiveSample('Example_2_-_Using_UL',300,100)}}</span></p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child') }}</td>
   <td>{{ Spec2('CSS4 Selectors') }}</td>
   <td>No change.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child') }}</td>
   <td>{{ Spec2('CSS3 Selectors') }}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>
<h2 class="editable" id="Browser_compatibility"><span>Browser compatibility</span></h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>4.0</td>
    <td>{{ CompatGeckoDesktop("1.9") }}</td>
    <td>7</td>
    <td>9.5</td>
    <td>4</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Mobile</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>1.0</td>
    <td>{{ CompatGeckoMobile("1.9.1") }}</td>
    <td>7</td>
    <td>10.0</td>
    <td>3.1</td>
   </tr>
  </tbody>
 </table>
</div>
<h3 id="Internet_Explorer_notes">Internet Explorer notes</h3>
<p>Internet Explorer 7 doesn't update the styles when elements are added dynamically. In Internet Explorer 8, if an element is inserted dynamically by clicking on a link the first-child style isn't applied until the link loses focus.</p>
Zu dieser Version zurücksetzen