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
188
189
190
191
192
193
194
|
---
title: ':nth-child()'
slug: 'Web/CSS/:nth-child'
tags:
- CSS
- Изложение
- мрежа
- псведоклас
- справочник
translation_of: 'Web/CSS/:nth-child'
---
<div>{{CSSRef}}</div>
<p><a href="/bg/docs/Web/CSS/Pseudo-classes">Псевдокласът</a> в <a href="/bg/docs/Web/CSS">CSS</a> <strong><code>:nth-child()</code></strong> намира съвпадения според тяхното място в множество от съседни елементи.</p>
<pre class="brush: css no-line-numbers">/* Избира всеки четвърти елемент
сред всяко множество от съседи */
:nth-child(4n) {
color: lime;
}
</pre>
<h2 id="Syntax" name="Syntax">Правопис</h2>
<p>Псевдокласът <code>nth-child</code> се указва с един аргумент, който представлява образец за намиране на съвпадения със съответстващи елементи. Изборът се отнася до съседни елементи, които са на едно и също ниво в йерархията на документа.</p>
<h3 id="Стойности_за_ключови_думи">Стойности за ключови думи</h3>
<dl>
<dt><code>odd</code></dt>
<dd>Избира елементи, чието местоположение в поредица от съседни елементи е нечетно: 1, 3, 5 и т.н.</dd>
<dt><code>even</code></dt>
<dd>Избира елементи, чието местоположение в поредица от съседни елементи е нечетно: 2, 4, 6 и т.н.</dd>
</dl>
<h3 id="Функционално_записване">Функционално записване</h3>
<dl>
<dt><code><An+B></code></dt>
<dd>Избира елементи, чието местоположение в поредица от съседи съответства на образеца <code>An+B</code> за всяко положително число или нулева стойност на <code>n</code>. указателят за първия елемент е <code>1</code>. Стойностите <code>A</code> и <code>B</code> трябва да са от вида {{cssxref("<integer>")}}s.</dd>
</dl>
<h3 id="Правопис">Правопис</h3>
<pre class="syntaxbox">{{csssyntax}}
</pre>
<h2 id="Examples" name="Examples">Примери</h2>
<h3 id="Example_selectors" name="Example_selectors">Примерни образци за избор</h3>
<dl>
<dt><code>tr:nth-child(odd)</code> or <code>tr:nth-child(2n+1)</code></dt>
<dd>Избира нечетните редове в таблица в HTML: 1, 3, 5 и т.н.</dd>
<dt><code>tr:nth-child(even)</code> or <code>tr:nth-child(2n)</code></dt>
<dd>Избира четните редове в таблица в HTML: 2, 4, 6 и т.н.</dd>
<dt><code>:nth-child(7)</code></dt>
<dd>Избира седмия елемент.</dd>
<dt><code>:nth-child(5n)</code></dt>
<dd>Избира всеки пети елемент: 5 [=5x1], 10 [=5x2], 15 [=5x3], и т.н. </dd>
<dt><code>:nth-child(3n+4)</code></dt>
<dd>Избира четвъртия елемент след всеки трети. Поредицата започва от нула: 4 [= (3x0)+4], 7 [= (3x1)+4], 10 [= (3x2)+4], 13 [= (3x3)+4], etc.</dd>
<dt><code>:nth-child(-n+3)</code></dt>
<dd>Избира първите три елемента в множество от съседи. [=-0+3, -1+3, -2+3]</dd>
<dt><code>p:nth-child(n)</code></dt>
<dd>Избира всеки елемент <code><p></code> в множество от съседи. Избират се същите елементи както при обикновен избор <code>p</code>, но се прилагат по-точни указания.</dd>
<dt><code>p:nth-child(1)</code> or <code>p:nth-child(0n+1)</code></dt>
<dd>Избира всеки първи елемент <code><p></code> в множество от съседи. Това е същото като {{cssxref(":first-child")}} и има същата точност.</dd>
</dl>
<dl>
<dt><code>p:nth-child(n+8):nth-child(-n+15)</code></dt>
<dd>Избира от осмия до петнадесетия елемент <code><p></code> включително в множество от съседи. </dd>
</dl>
<p> </p>
<h3 id="Подробен_пример">Подробен пример</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush:html"><h3><code>span:nth-child(2n+1)</code>, WITHOUT an
<code>&lt;em&gt;</code> among the child elements.</h3>
<p>Children 1, 3, 5, and 7 are selected.</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>, WITH an
<code>&lt;em&gt;</code> among the child elements.</h3>
<p>Children 1, 5, and 7 are selected.<br>
3 is used in the counting because it is a child, but it isn't
selected because it isn't a <code>&lt;span&gt;</code>.</p>
<div class="second">
<span>Span!</span>
<span>Span</span>
<em>This is an `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>, WITH an
<code>&lt;em&gt;</code> among the child elements.</h3>
<p>Children 1, 4, 6, and 8 are selected.<br>
3 isn't used in the counting or selected because it is an <code>&lt;em&gt;</code>,
not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selects
children of that type. The <code>&lt;em&gt;</code> is completely skipped
over and ignored.</p>
<div class="third">
<span>Span!</span>
<span>Span</span>
<em>This is an `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="Изход">Изход</h4>
<p>{{EmbedLiveSample('Detailed_example', 550, 550)}}</p>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>Добавя правопис за <code>of <selector></code> и уточнява, че за съвпадащите елементи не е задължително да имат родители.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
<td>{{Spec2('CSS3 Selectors')}}</td>
<td>Първоначално определение.</td>
</tr>
</tbody>
</table>
<h2 id="Съвместимост">Съвместимост</h2>
<div>
<p>{{Compat("css.selectors.nth-child")}}</p>
</div>
<h2 id="See_also" name="See_also">Вижте също</h2>
<ul>
<li>{{ Cssxref(":nth-of-type") }}, {{ Cssxref(":nth-last-child") }}</li>
</ul>
|
