Revision 302315 of :first-child

  • Enlace amigable (slug) de la revisión: CSS/:first-child
  • Título de la revisión: :first-child
  • Id de la revisión: 302315
  • Creada:
  • Creador: percy@mozilla.pe
  • ¿Es la revisión actual? No
  • Comentario

Contenido de la revisión

{{ CSSRef() }}

Resumen

La pseudo-clase :first-child  representa cualquier elemento que sea el primer elemento hijo del elemento padre.

Sintaxis

elemento:first-child { propiedades de estilo }

Ejemplos

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

...donde...

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

... debería verse como ...
This span is limed! This span is not. :(

Especificaciones

Especificación Estado Comentario
{{ SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child') }} {{ Spec2('CSS4 Selectors') }} Sin cambios.
{{ SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child') }} {{ Spec2('CSS3 Selectors') }} Definición inicial.

Compatibilidad de navegadores

{{ CompatibilityTable() }}

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico 4.0 {{ CompatGeckoDesktop("1.9") }} 7 9.5 4
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico 1.0 {{ CompatGeckoMobile("1.9.1") }} 7 10.0 3.1

Notas para Internet Explorer

Internet Explorer 7 no actualiza los estilos cuando los elementos son añadidos dinámicamente. En Internet Explorer 8, si un elemento es insertado dinámicamente por hacer clic en un enlace, los estilos del primer elemento hijo no son aplicados hasta que el enlace pierde foco.

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

Fuente de la revisión

<p>{{ CSSRef() }}</p>
<h2 id="Summary" name="Summary">Resumen</h2>
<p>La pseudo-clase <code>:first-child</code>&nbsp;<a href="/en/CSS/Pseudo-classes" title="Pseudo-classes"> </a>representa cualquier elemento que sea el primer elemento hijo del elemento padre.</p>
<h2 id="Syntax" name="Syntax">Sintaxis</h2>
<pre class="eval">
elemento:first-child { <em>propiedades de estilo</em> }
</pre>
<h2 id="Examples" name="Examples">Ejemplos</h2>
<pre class="brush: css">
span:first-child {
    background-color: lime;
}
</pre>
<p>...donde...</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>... debería verse como ...<br />
  <span style="background-color: lime;">This span is limed!</span> <span>This span is not.&nbsp;:(</span></p>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Especificación</th>
      <th scope="col">Estado</th>
      <th scope="col">Comentario</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child') }}</td>
      <td>{{ Spec2('CSS4 Selectors') }}</td>
      <td>Sin cambios.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child') }}</td>
      <td>{{ Spec2('CSS3 Selectors') }}</td>
      <td>Definición inicial.</td>
    </tr>
  </tbody>
</table>
<h3 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Característica</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Soporte básico</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>Característica</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Soporte básico</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="Notas_para_Internet_Explorer">Notas para Internet Explorer</h3>
<p>Internet Explorer 7 no actualiza los estilos cuando los elementos son añadidos dinámicamente. En Internet Explorer 8, si un elemento es insertado dinámicamente por hacer clic en un enlace, los estilos del primer elemento hijo no son aplicados hasta que el enlace pierde foco.</p>
<p>{{ languages( { "fr": "fr/CSS/:first-child", "pl": "pl/CSS/:first-child" } ) }}</p>
Revertir a esta revisión