initial commit

1 files changed, 163 insertions, 0 deletions

diff --git a/files/de/web/css/_colon_nth-child/index.html b/files/de/web/css/_colon_nth-child/index.html
new file mode 100644
index 0000000000..17dc2c3387
--- /dev/null
+++ b/files/de/web/css/_colon_nth-child/index.html
@@ -0,0 +1,163 @@
+---
+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>