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
|
---
title: ':nth-last-child'
slug: 'Web/CSS/:nth-last-child'
tags:
- Псевдоклассы
translation_of: 'Web/CSS/:nth-last-child'
---
<div>{{CSSRef}}</div>
<h2 id="Описание">Описание</h2>
<p><a href="/ru/docs/CSS" title="CSS">CSS</a> <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:nth-last-child(an+b)</code> находит элемент, имеющий <code><em>a</em>n+<em>b</em>-1</code> потомков после данной позиции в дереве документа, значение для <code>n </code>может быть положительным или нулевым, а также имеющий родительский элемент.</p>
<p>В результате, он функционирует так же, как и {{Cssxref(":nth-child")}}, кроме того, что выбирает элементы, считая в обратном порядке, с <strong>конца</strong> списка потомков, не с начала.</p>
<p>Смотрите {{Cssxref(":nth-child")}} для более тщательного описания синтаксиса его аргументов.</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="syntaxbox">element:nth-last-child(<em>a</em>n + <em>b</em>) {<em>стили</em> }
</pre>
<h2 id="Примеры">Примеры</h2>
<h3 id="Пример_селекторов">Пример селекторов</h3>
<dl>
<dt><code>tr:nth-last-child(-n+4)</code></dt>
<dd>Находит последние 4 строки HTML таблицы.</dd>
<dt><code>span:nth-last-child(even)</code></dt>
<dd>Ищет чётные элементы в родительском элементе, начиная с последнего элемента и работая задом наперёд.</dd>
</dl>
<h3 id="Использование">Использование</h3>
<p>Этот CSS ...</p>
<pre class="brush: css">table {
border: 1px solid blue;
}
tr:nth-last-child(-n+3) { /* последние 3 потомка */
background-color: lime;
}
</pre>
<p>... с этим HTML ...</p>
<pre class="brush: html"><table>
<tbody>
<tr>
<td>Первая</td>
</tr>
<tr>
<td>Вторая строка</td>
</tr>
<tr>
<td>Третья</td>
</tr>
<tr>
<td>Четвёртая</td>
</tr>
<tr>
<td>Пятая строчка</td>
</tr>
</tbody>
</table>
</pre>
<p>... будет выглядеть, как :</p>
<p>{{EmbedLiveSample('Примеры', '100%', 150)}}</p>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>Без изменений</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}</td>
<td>{{Spec2('CSS3 Selectors')}}</td>
<td>Изначальное определение</td>
</tr>
</tbody>
</table>
<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Возможность</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Базовая поддержка</td>
<td>4.0</td>
<td>{{CompatGeckoDesktop("1.9.1")}}</td>
<td>9.0</td>
<td>9.5</td>
<td>3.2</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Возможность</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Базовая поддержка</td>
<td>2.1</td>
<td>{{CompatGeckoMobile("1.9.1")}}</td>
<td>9.0</td>
<td>10.0</td>
<td>3.2</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>{{Cssxref(":nth-child")}}</li>
</ul>
|
