diff options
Diffstat (limited to 'files/bg/web/css/_colon_nth-child/index.html')
| -rw-r--r-- | files/bg/web/css/_colon_nth-child/index.html | 193 |
1 files changed, 0 insertions, 193 deletions
diff --git a/files/bg/web/css/_colon_nth-child/index.html b/files/bg/web/css/_colon_nth-child/index.html deleted file mode 100644 index f453b1ff6b..0000000000 --- a/files/bg/web/css/_colon_nth-child/index.html +++ /dev/null @@ -1,193 +0,0 @@ ---- -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> - -{{csssyntax}} - -<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> |