:nth-child

  • Raccourci de la révision : CSS/:nth-child
  • Titre de la révision : :nth-child
  • ID de la révision : 69475
  • Créé :
  • Créateur : the prisoner
  • Version actuelle ? Non
  • Commentaire 1 words added, 1 words removed

Contenu de la révision

{{ CSSRef() }}

Résumé

La pseudo-classe :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)
Equivalent 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

{{ languages( { "en": "en/CSS/%3Anth-child" } ) }}

Source de la révision

<p>{{ CSSRef() }}</p>
<h3>Résumé</h3>
<p>La pseudo-classe <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>
<h3>Syntaxe</h3>
<pre>*:nth-child(an + b) { propriétés CSS }

/* les valeurs de a et b doivent être des entiers */
</pre>
<h3>Exemple</h3>
<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>Equivalent 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. :(&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. :(</span>
   <span style="background-color: green;">Mais celui-ci oui!</span>
   <span>Malheureusement celui-là ne l'est pas...</span>
</pre>
</div>
<h3>Compatibilité des navigateurs</h3>
<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>
<h3>Spécifications</h3>
<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>
<p>{{ languages( { "en": "en/CSS/%3Anth-child" } ) }}</p>
Revenir à cette révision