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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
|
---
title: ':nth-child'
slug: 'Web/CSS/:nth-child'
tags:
- CSS
- Diseño
- Pseudo-clase
- Referencia
- Web
translation_of: 'Web/CSS/:nth-child'
---
<div>{{CSSRef}}</div>
<p>La <a href="/es/docs/Web/CSS">pseudo-clase</a> <strong><code>:nth-child()</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> coincide con uno o más elementos en función de su posición entre un grupo de hermanos.</p>
<pre class="brush: css no-line-numbers">/* Selecciona cada cuarto elemento entre
cualquier grupo de hermanos */
:nth-child(4n) {
color: lime;
}
</pre>
<h2 id="Syntax" name="Syntax">Sintaxis</h2>
<p>La pseudo-clase <code>nth-child</code> se especifica con un único argumento, que representa el patrón para los elementos coincidentes.</p>
<h3 id="Valores_de_palabras_clave">Valores de palabras clave</h3>
<dl>
<dt><code>odd</code></dt>
<dd>Representa elementos cuya posición numérica en una serie de hermanos es impar: 1, 3, 5, etc.</dd>
<dt><code>even</code></dt>
<dd>Representa elementos cuya posición numérica en una serie de hermanos es par: 2, 4, 6, etc.</dd>
</dl>
<h3 id="Notación_funcional">Notación funcional</h3>
<dl>
<dt><code><An+B></code></dt>
<dd>Representa elementos cuya posición numérica en una serie de hermanos coincide con el patrón <code>An+B</code>, para cada entero positivo o valor cero de <code>n</code>. El índice del primer elemento es <code>1</code>. Los valores <code>A</code> y <code>B</code> deben ser ambos {{cssxref("<integer>")}}.</dd>
</dl>
<h3 id="Sintaxis_formal">Sintaxis formal</h3>
{{csssyntax}}
<h2 id="Examples" name="Examples">Ejemplos</h2>
<h3 id="Example_selectors" name="Example_selectors">Selectores de ejemplo</h3>
<dl>
<dt><code>tr:nth-child(odd)</code> o <code>tr:nth-child(2n+1)</code></dt>
<dd>Representa las filas impares de una tabla HTML: 1, 3, 5, etc.</dd>
<dt><code>tr:nth-child(even)</code> o <code>tr:nth-child(2n)</code></dt>
<dd>Representa las filas pares de una tabla HTML: 2, 4, 6, etc.</dd>
<dt><code>:nth-child(7)</code></dt>
<dd>Representa el séptimo elemento.</dd>
<dt><code>:nth-child(5n)</code></dt>
<dd>Representa los elementos 5, 10, 15, etc.</dd>
<dt><code>:nth-child(3n+4)</code></dt>
<dd>Representa los elementos 4, 7, 10, 13, etc.</dd>
<dt><code>:nth-child(-n+3)</code></dt>
<dd>Representa los primeros tres elementos entre un grupo de hermanos.</dd>
<dt><code>p:nth-child(n)</code></dt>
<dd>Representa cada elemento <code><p></code> entre un grupo de hermanos. Esto es lo mismo que un simple selector <code>p</code>.</dd>
<dt><code>p:nth-child(1)</code> o <code>p:nth-child(0n+1)</code></dt>
<dd>Representa cada <code><p></code> que es el primer elemento entre un grupo de hermanos. Esto es lo mismo que el selector {{cssxref(":first-child")}}.</dd>
</dl>
<h3 id="Ejemplo_detallado">Ejemplo detallado</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush:html"><h3><code>span:nth-child(2n+1)</code>, SIN un
<code>&lt;em&gt;</code> entre los hijos.</h3>
<p>Los hijos 1, 3, 5 y 7 son seleccionados.</p>
<div class="first">
<span>Span 1!</span>
<span>Span 2</span>
<span>Span 3!</span>
<span>Span 4</span>
<span>Span 5!</span>
<span>Span 6</span>
<span>Span 7!</span>
</div>
<br>
<h3><code>span:nth-child(2n+1)</code>, CON un
<code>&lt;em&gt;</code> entre los hijos.</h3>
<p>Los hijos 1, 5 y 7 son seleccionados.<br>
3 se usa en el conteo porque es un hijo, pero
no se selecciona porque no es un <code>&lt;span&gt;</code>.</p>
<div class="second">
<span>Span!</span>
<span>Span</span>
<em>Este es un `em`.</em>
<span>Span</span>
<span>Span!</span>
<span>Span</span>
<span>Span!</span>
<span>Span</span>
</div>
<br>
<h3><code>span:nth-of-type(2n+1)</code>, CON un
<code>&lt;em&gt;</code> entre los hijos.</h3>
<p>Los hijos 1, 4, 6 y 8 son seleccionados.<br>
3 no se usa en el conteo ni se selecciona porque es un <code>&lt;em&gt;</code>,
no un <code>&lt;span&gt;</code>, y <code>nth-of-type</code> solo selecciona
hijos de ese tipo. El <code>&lt;em&gt;</code> se omite por completo y se ignora.</p>
<div class="third">
<span>Span!</span>
<span>Span</span>
<em>Este es un `em`.</em>
<span>Span!</span>
<span>Span</span>
<span>Span!</span>
<span>Span</span>
<span>Span!</span>
</div>
</pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">html {
font-family: sans-serif;
}
span,
div em {
padding: 5px;
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>
<h4 id="Resultado">Resultado</h4>
<p>{{EmbedLiveSample('Ejemplo_detallado', 550, 550)}}</p>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentarios</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>
<p>Agrega la sintaxis <code>of <selector></code> y especifica que no se requiere que los elementos coincidentes tengan un padre.</p>
</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
<td>{{Spec2('CSS3 Selectors')}}</td>
<td>Definición Inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
<div>
<p>{{Compat("css.selectors.nth-child")}}</p>
</div>
<h2 id="See_also" name="See_also">Ver también</h2>
<ul>
<li>{{ Cssxref(":nth-of-type") }}, {{ Cssxref(":nth-last-child") }}</li>
</ul>
|
