1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
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"><p><code>span:nth-child(2n+1)</code>, <em>ohne</em> ein <code>&lt;em&gt;</code>
unter den Kindelementen. Element 1, 3, 5, und 7 sind ausgewählt, wie erwartet.</p>
<div class="first">
<span>Dieses span ist ausgewählt</span>
<span>Dieses span is nicht. :(</span>
<span>Wie sieht's mit diesem aus?</span>
<span>Und dieses?</span>
<span>Noch ein Beispiel</span>
<span>Und noch eins</span>
<span>Zu guter Letzt</span>
</div>
<p><code>span:nth-child(2n+1)</code>, <em>mit</em> einem <code>&lt;em&gt;</code>
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
<code>&lt;span&gt;</code> ist.</p>
<div class="second">
<span>Dieses span ist ausgewählt!</span>
<span>Dieses span nicht. :(</span>
<em>Dieses ist ein em.</em>
<span>Wie sieht's mit diesem aus?</span>
<span>Und dieses?</span>
<span>Noch ein Beispiel</span>
<span>Und noch eins</span>
<span>Zu guter Letzt</span>
</div>
<p><code>span:nth-of-type(2n+1)</code>, <em>mit</em> einem <code>&lt;em&gt;</code>
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 <code>&lt;em&gt;</code> ist,
und kein <code>&lt;span&gt;</code>, und <code>nth-of-type</code> selektiert nur
Kinder dieses Typs. Das <code>&lt;em&gt;</code> wird übersprungen und ignoriert.
</p>
<div class="third">
<span>Dieses span ist ausgewählt!</span>
<span>Dieses span nicht. :(</span>
<em>Dieses ist ein em.</em>
<span>Wie sieht's mit diesem aus?</span>
<span>Und dieses?</span>
<span>Noch ein Beispiel</span>
<span>Und noch eins</span>
<span>Zu guter Letzt</span>
</div></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>
|
