From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/bg/web/css/_colon_nth-child/index.html | 194 +++++++++++++++++++++++++++ 1 file changed, 194 insertions(+) create mode 100644 files/bg/web/css/_colon_nth-child/index.html (limited to 'files/bg/web/css/_colon_nth-child') diff --git a/files/bg/web/css/_colon_nth-child/index.html b/files/bg/web/css/_colon_nth-child/index.html new file mode 100644 index 0000000000..c3f80a2fd1 --- /dev/null +++ b/files/bg/web/css/_colon_nth-child/index.html @@ -0,0 +1,194 @@ +--- +title: ':nth-child()' +slug: 'Web/CSS/:nth-child' +tags: + - CSS + - Изложение + - мрежа + - псведоклас + - справочник +translation_of: 'Web/CSS/:nth-child' +--- +
{{CSSRef}}
+ +

Псевдокласът в CSS :nth-child() намира съвпадения според тяхното място в множество от съседни елементи.

+ +
/* Избира всеки четвърти елемент
+   сред всяко множество от съседи */
+:nth-child(4n) {
+  color: lime;
+}
+
+ +

Правопис

+ +

Псевдокласът nth-child  се указва с един аргумент, който представлява образец за намиране на съвпадения със съответстващи елементи. Изборът се отнася до съседни елементи, които са на едно и също ниво в йерархията на документа.

+ +

Стойности за ключови думи

+ +
+
odd
+
Избира елементи, чието местоположение в поредица от съседни елементи е нечетно: 1, 3, 5 и т.н.
+
even
+
Избира елементи, чието местоположение в поредица от съседни елементи е нечетно: 2, 4, 6 и т.н.
+
+ +

Функционално записване

+ +
+
<An+B>
+
Избира елементи, чието местоположение в поредица от съседи съответства на образеца An+B за всяко положително число или нулева стойност на n. указателят за първия елемент е 1. Стойностите A и B трябва да са от вида {{cssxref("<integer>")}}s.
+
+ +

Правопис

+ +
{{csssyntax}}
+
+ +

Примери

+ +

Примерни образци за избор

+ +
+
tr:nth-child(odd) or tr:nth-child(2n+1)
+
Избира нечетните редове в таблица в HTML: 1, 3, 5 и т.н.
+
tr:nth-child(even) or tr:nth-child(2n)
+
Избира четните редове  в таблица в HTML: 2, 4, 6 и т.н.
+
:nth-child(7)
+
Избира седмия елемент.
+
:nth-child(5n)
+
Избира всеки пети елемент: 5 [=5x1], 10 [=5x2], 15 [=5x3], и т.н. 
+
:nth-child(3n+4)
+
Избира четвъртия елемент след всеки трети. Поредицата започва от нула: 4 [= (3x0)+4], 7 [= (3x1)+4], 10 [= (3x2)+4], 13 [= (3x3)+4], etc.
+
:nth-child(-n+3)
+
Избира първите три елемента в множество от съседи. [=-0+3, -1+3, -2+3]
+
p:nth-child(n)
+
Избира всеки елемент <p> в множество от съседи. Избират се същите елементи както при обикновен избор p, но се прилагат по-точни указания.
+
p:nth-child(1) or p:nth-child(0n+1)
+
Избира всеки първи елемент <p>  в множество от съседи. Това е същото като {{cssxref(":first-child")}} и има същата точност.
+
+ +
+
p:nth-child(n+8):nth-child(-n+15)
+
Избира от осмия до петнадесетия елемент <p> включително в множество от съседи. 
+
+ +

 

+ +

Подробен пример

+ +

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>
+
+ +

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;
+}
+ +

Изход

+ +

{{EmbedLiveSample('Detailed_example', 550, 550)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS4 Selectors')}}Добавя правопис за of <selector>  и уточнява, че за съвпадащите елементи не е задължително да имат родители.
{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS3 Selectors')}}Първоначално определение.
+ +

Съвместимост

+ +
+ + +

{{Compat("css.selectors.nth-child")}}

+
+ +

Вижте също

+ + -- cgit v1.2.3-54-g00ecf