---
title: ':nth-child'
slug: 'Web/CSS/:nth-child'
tags:
  - CSS
  - CSS Pseudoklasse
  - Layout
  - Referenz
  - Web
translation_of: 'Web/CSS/:nth-child'
---
<div>{{CSSRef}}</div>

<h2 id="Übersicht">Übersicht</h2>

<p>Die <code>:nth-child(an+b)</code> <a href="/en-US/docs/CSS" title="CSS">CSS</a> <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">Pseudo-Klasse</a> passt auf ein Element, das im Dokumentbaum <code><em>a</em>n+<em>b</em>-1</code> Geschwisterknoten vor sich hat, wobei <strong>n</strong> einen gegebenen positiven Wert oder den Wert 0 hat. Zudem muss das Element einen Elternknoten haben. Einfacher ausgedrückt: Beginnend bei einem Startindex b trifft der Selector auf jedes n-te folgende Element zu.</p>

<p>Einige Beispiele:</p>

<ul>
 <li><code>1n+0</code>, oder einfach <code>n</code>, trifft auf jedes Kindelement zu.</li>
 <li><code>2n+0</code>, oder einfach 2n, würde auf die Kindelemente 2, 4, 6, 8, etc. zutreffen. Hier kann auch einfach das Schlüsselwort <code>even</code> verwendet werden.</li>
 <li><code>2n+1</code> würde auf die Elemente 1, 3, 5, 7, etc. zutreffen. Hier gibt es auch eine Kurzform: Das Schlüsselwort <code>odd</code>.</li>
 <li><code>3n+4</code> würde auf die folgenden Elemente zutreffen: 4, 7, 10, 13, etc.</li>
</ul>

<p>Die Werte <code><em>a</em></code> und <code><em>b</em></code> müssen beide Integer sein, und der Index des ersten Kindelements eines Knotens ist 1. In anderen Worten, diese Klasse trifft auf alle Kindelemente zu, deren Index Teil der Menge { an + b; n = 0, 1, 2, ... } ist.</p>

<p>Ein beliebter Anwendungsfall ist das Auswählen jeder zweiten Reihe in einer Tabelle.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">element:nth-child(<em>a</em>n + <em>b</em>) { <em>style properties</em> }
</pre>

<h2 id="Beispiele">Beispiele</h2>

<h3 id="Beispielselektoren">Beispielselektoren</h3>

<dl>
 <dt><code>tr:nth-child(2n+1)</code></dt>
 <dd>Wählt die ungeraden Reihen einer HTML-Tabelle aus.</dd>
 <dt><code>tr:nth-child(odd)</code></dt>
 <dd>Wählt die ungeraden Reihen einer HTML-Tabelle aus.</dd>
 <dt><code>tr:nth-child(2n)</code></dt>
 <dd>Wählt die geraden Reihen einer HTML-Tabelle aus.</dd>
 <dt><code>tr:nth-child(even)</code></dt>
 <dd>Wählt die geraden Reihen einer HTML-Tabelle aus.</dd>
 <dt><code>span:nth-child(0n+1)</code></dt>
 <dd>Selektiert ein span Element, welches das erste Kind seines Elternknotens ist. Dies entspricht dem {{Cssxref(':first-child')}} Selector.</dd>
 <dt><code>span:nth-child(1)</code></dt>
 <dd>Entspricht dem vorherigen Beispiel.</dd>
 <dt><code>span:nth-child(-n+3)</code></dt>
 <dd>Erzielt einen Treffer, wenn das Element vom Typ span ist und zudem eines der ersten drei Kinder seines Elternknotens ist.</dd>
</dl>

<h3 id="Gesamtbeispiel">Gesamtbeispiel</h3>

<p id="The_following_HTML...">Im folgenden ein HTML-Beispiel:</p>

<pre class="brush:html">&lt;p&gt;&lt;code&gt;span:nth-child(2n+1)&lt;/code&gt;, &lt;em&gt;ohne&lt;/em&gt; ein &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;
 unter den Kindelementen. Element 1, 3, 5, und 7 sind ausgewählt, wie erwartet.&lt;/p&gt;

&lt;div class="first"&gt;
      &lt;span&gt;Dieses span ist ausgewählt&lt;/span&gt;
      &lt;span&gt;Dieses span is nicht. :(&lt;/span&gt;
      &lt;span&gt;Wie sieht's mit diesem aus?&lt;/span&gt;
      &lt;span&gt;Und dieses?&lt;/span&gt;
      &lt;span&gt;Noch ein Beispiel&lt;/span&gt;
      &lt;span&gt;Und noch eins&lt;/span&gt;
      &lt;span&gt;Zu guter Letzt&lt;/span&gt;
&lt;/div&gt;

&lt;p&gt;&lt;code&gt;span:nth-child(2n+1)&lt;/code&gt;, &lt;em&gt;mit&lt;/em&gt; einem &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;
 unter den Kindelementen. Element 1, 5, und 7 sind ausgewählt. 3 wird beim Zählen berücksichtigt
 weil es ein Kind ist, aber es ist nicht ausgewählt, weil es kein
&lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt; ist.&lt;/p&gt;

&lt;div class="second"&gt;
      &lt;span&gt;Dieses span ist ausgewählt!&lt;/span&gt;
      &lt;span&gt;Dieses span nicht. :(&lt;/span&gt;
      &lt;em&gt;Dieses ist ein em.&lt;/em&gt;
      &lt;span&gt;Wie sieht's mit diesem aus?&lt;/span&gt;
      &lt;span&gt;Und dieses?&lt;/span&gt;
      &lt;span&gt;Noch ein Beispiel&lt;/span&gt;
      &lt;span&gt;Und noch eins&lt;/span&gt;
      &lt;span&gt;Zu guter Letzt&lt;/span&gt;
&lt;/div&gt;

&lt;p&gt;&lt;code&gt;span:nth-of-type(2n+1)&lt;/code&gt;, &lt;em&gt;mit&lt;/em&gt; einem &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;
 unter den Kindern. Element 1, 4, 6, und 8 sind ausgewählt. 3 ist
 nicht bei der Zählung berücksichtigt oder ausgewählt, weil es ein &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; ist,
und kein &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;, und &lt;code&gt;nth-of-type&lt;/code&gt; selektiert nur
 Kinder dieses Typs. Das &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; wird übersprungen und ignoriert.
&lt;/p&gt;

&lt;div class="third"&gt;
      &lt;span&gt;Dieses span ist ausgewählt!&lt;/span&gt;
      &lt;span&gt;Dieses span nicht. :(&lt;/span&gt;
      &lt;em&gt;Dieses ist ein em.&lt;/em&gt;
      &lt;span&gt;Wie sieht's mit diesem aus?&lt;/span&gt;
      &lt;span&gt;Und dieses?&lt;/span&gt;
      &lt;span&gt;Noch ein Beispiel&lt;/span&gt;
      &lt;span&gt;Und noch eins&lt;/span&gt;
      &lt;span&gt;Zu guter Letzt&lt;/span&gt;
&lt;/div&gt;</pre>

<p id="...using_this_CSS...">...dieses CSS wird verwendet...</p>

<pre class="brush: css">html {
  font-family: sans-serif;
}

span, div em {
  padding: 10px;
  border: 1px solid green;
  display: inline-block;
  margin-bottom: 3px;
}

.first span:nth-child(2n+1),
.second span:nth-child(2n+1),
.third span:nth-of-type(2n+1) {
  background-color: lime;
}</pre>

<p id="...will_result_in.3A">...und erzeugt folgendes Resultat:</p>

<div>{{EmbedLiveSample('Gesamtbeispiel','100%', '550')}}</div>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
   <td>{{Spec2('CSS4 Selectors')}}</td>
   <td>Keine Änderung</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
   <td>{{Spec2('CSS3 Selectors')}}</td>
   <td>Ursprüngliche Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

<p>{{Compat("css.selectors.nth-child")}}</p>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>{{cssxref(":nth-of-type")}}</li>
</ul>