:nth-child

  • Raccourci de la révision : CSS/:nth-child
  • Titre de la révision : :nth-child
  • ID de la révision : 448369
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

Résumé

La pseudo-classe CSS :nth-child permet de cibler des éléments suivant la position qu'ils occupent dans la liste des enfants de l'élément parent.

Syntaxe

*:nth-child(an + b) { propriétés CSS }

/* les valeurs de a et b doivent être des entiers */

Exemple

tr:nth-child(2n+1)
Représente les lignes impaires d'un tableau HTML.
tr:nth-child(odd)
Représente les lignes impaires d'un tableau HTML.
tr:nth-child(2n)
Représente les lignes paires d'un tableau HTML.
tr:nth-child(even)
Représente les lignes paires d'un tableau HTML.
span:nth-child(0n+1)
Représente un élément span qui est le premier enfant de son l'élément parent, c'est comme le sélecteur {{ Cssxref(":first-child") }}.
span:nth-child(1)
Équivalent de ce qu'il y a au-dessus.
span:nth-child(-n+3)
Les trois premiers élément span.

Exemple d'utilisation :

Le CSS ...

span:nth-child(2n+1)
{
    background-color: green;
}

... avec les balises HTML suivantes ...

<div>
   <span>Ce span est vert!</span>
   <span>Ce span ne l'est pas. :(</span>
   <span>Mais celui-ci oui!</span>
   <span>Malheureusement celui-là ne l'est pas...</span>
</div>

... doit donner ça :

   Ce span est vert!
   Ce span ne l'est pas. :(
   Mais celui-ci oui!
   Malheureusement celui-là ne l'est pas...

Compatibilité des navigateurs

Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
4.0 3.5 (1.9.1) 9.0 9.5 3.2

Spécifications

Source de la révision

<p>{{ CSSRef() }}</p>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La <a href="/fr/docs/CSS/Pseudo-classes" title="/fr/docs/CSS/Pseudo-classes">pseudo-classe</a> <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <code>:nth-child</code> permet de cibler des éléments suivant la position qu'ils occupent dans la liste des enfants de l'élément parent.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre>
*:nth-child(an + b) { propriétés CSS }

/* les valeurs de a et b doivent être des entiers */
</pre>
<h2 id="Exemple">Exemple</h2>
<dl>
  <dt>
    <code>tr:nth-child(2n+1)</code></dt>
  <dd>
    Représente les lignes impaires d'un tableau HTML.</dd>
  <dt>
    <code>tr:nth-child(odd)</code></dt>
  <dd>
    Représente les lignes impaires d'un tableau HTML.</dd>
  <dt>
    <code>tr:nth-child(2n)</code></dt>
  <dd>
    Représente les lignes paires d'un tableau HTML.</dd>
  <dt>
    <code>tr:nth-child(even)</code></dt>
  <dd>
    Représente les lignes paires d'un tableau HTML.</dd>
  <dt>
    <code>span:nth-child(0n+1)</code></dt>
  <dd>
    Représente un élément span qui est le premier enfant de son l'élément parent, c'est comme le sélecteur {{ Cssxref(":first-child") }}.</dd>
  <dt>
    <code>span:nth-child(1)</code></dt>
  <dd>
    Équivalent de ce qu'il y a au-dessus.</dd>
  <dt>
    <code>span:nth-child(-n+3)</code></dt>
  <dd>
    Les trois premiers élément span.</dd>
</dl>
<p><u>Exemple d'utilisation :</u></p>
<p>Le CSS ...</p>
<pre class="brush: css">
span:nth-child(2n+1)
{
    background-color: green;
}
</pre>
<p>... avec les balises HTML suivantes ...</p>
<pre class="brush: html">
&lt;div&gt;
   &lt;span&gt;Ce span est vert!&lt;/span&gt;
   &lt;span&gt;Ce span ne l'est pas.&nbsp;:(&lt;/span&gt;
   &lt;span&gt;Mais celui-ci oui!&lt;/span&gt;
   &lt;span&gt;Malheureusement celui-là ne l'est pas...&lt;/span&gt;
&lt;/div&gt;
</pre>
<p>... doit donner ça :</p>
<div>
  <pre class="eval">
   <span style="background-color: green;">Ce span est vert!</span>
   <span>Ce span ne l'est pas.&nbsp;:(</span>
   <span style="background-color: green;">Mais celui-ci oui!</span>
   <span>Malheureusement celui-là ne l'est pas...</span>
</pre>
</div>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>4.0</td>
        <td>3.5 (1.9.1)</td>
        <td>9.0</td>
        <td>9.5</td>
        <td>3.2</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Sp.C3.A9cifications">Spécifications</h2>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#nth-child-pseudo" title="http://www.w3.org/TR/css3-selectors/#nth-child-pseudo">CSS 3 Selectors :nth-child</a></li>
</ul>
Revenir à cette révision