initial commit

1 files changed, 184 insertions, 0 deletions

diff --git a/files/ru/web/css/_colon_nth-child/index.html b/files/ru/web/css/_colon_nth-child/index.html
new file mode 100644
index 0000000000..140087f56a
--- /dev/null
+++ b/files/ru/web/css/_colon_nth-child/index.html
@@ -0,0 +1,184 @@
+---
+title: ':nth-child'
+slug: 'Web/CSS/:nth-child'
+tags:
+  - CSS
+  - Layout
+  - Reference
+  - Web
+  - Псевдоклассы
+translation_of: 'Web/CSS/:nth-child'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/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>&lt;An+B&gt;</code></dt>
+ <dd>Описывает элементы среди группы соседних с номерами, соответствующими паттерну <code>An+B</code> (для каждого целого числа n &gt;= 0). Нумерация элементов начинается с единицы. Значения <code>A</code> и <code>B</code> должны быть {{cssxref("&lt;integer&gt;")}}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> или <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, 10, 15, и т. д.</dd>
+ <dt><code>:nth-child(3n+4)</code></dt>
+ <dd>Описывает элементы с номерами 4, 7, 10, 13, и т. д.</dd>
+ <dt><code>:nth-child(-n+3)</code></dt>
+ <dd>Описывает первые три элемента среди группы соседних элементов.</dd>
+ <dt><code>p:nth-child(n)</code></dt>
+ <dd>Описывает каждый элемент<code>&lt;p&gt;</code> среди группы соседних элементов. Эквивалентно простому селектору <code>p</code>.</dd>
+ <dt><code>p:nth-child(1)</code> или <code>p:nth-child(0n+1)</code></dt>
+ <dd>Описывает каждый элемент <code>&lt;p&gt;</code>, являющийся первым среди группы соседних элементов. Эквивалентно селектору {{cssxref(":first-child")}}.</dd>
+</dl>
+
+<h3 id="Подробный_пример">Подробный пример</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html">&lt;h3&gt;&lt;code&gt;span:nth-child(2n+1)&lt;/code&gt;, БЕЗ элемента
+   &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; в группе элементов-потомков.&lt;/h3&gt;
+&lt;p&gt;Элементы 1, 3, 5 и 7 будут выбраны.&lt;/p&gt;
+&lt;div class="first"&gt;
+  &lt;span&gt;Span 1!&lt;/span&gt;
+  &lt;span&gt;Span 2&lt;/span&gt;
+  &lt;span&gt;Span 3!&lt;/span&gt;
+  &lt;span&gt;Span 4&lt;/span&gt;
+  &lt;span&gt;Span 5!&lt;/span&gt;
+  &lt;span&gt;Span 6&lt;/span&gt;
+  &lt;span&gt;Span 7!&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;br&gt;
+
+&lt;h3&gt;&lt;code&gt;span:nth-child(2n+1)&lt;/code&gt;, С элементом
+   &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; в группе элементов-потомков.&lt;/h3&gt;
+&lt;p&gt;Элементы 1, 5 и 7 будут выбраны.&lt;br&gt;
+   3 используется в подсчёте потому что это элемент-потомок,
+   но он не выбран потому что он не &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;.&lt;/p&gt;
+&lt;div class="second"&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;em&gt;Это `em`.&lt;/em&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;br&gt;
+
+&lt;h3&gt;&lt;code&gt;span:nth-of-type(2n+1)&lt;/code&gt;, С элементом
+   &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; в группе элементов-потомков.&lt;/h3&gt;
+&lt;p&gt;Элементы 1, 4, 6 и 8 будут выбраны.&lt;br&gt;
+   3 не используется в подсчёте и не выбран, потому что это &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;,
+   но не &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;, а &lt;code&gt;nth-of-type&lt;/code&gt; выбирает только
+   потомков этого типа. Элемент &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; полностью пропускается и игнорируется.&lt;/p&gt;
+&lt;div class="third"&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;em&gt;Это `em`.&lt;/em&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+&lt;/div&gt;
+</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('Подробный_пример', 550, 550)}}</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-child-pseudo', ':nth-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Добавление синтаксиса <code>of &lt;selector&gt;</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>