Псевдокласът в 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 трябва да са от вида <integer>s.

Правопис

:nth-child( <nth> [ of <selector># ]? )

where
<nth> = <an-plus-b> | even | odd

Примери

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

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>  в множество от съседи. Това е същото като :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;
}

Изход

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

Specification Status Comment
Selectors Level 4
The definition of ':nth-child' in that specification.
Working Draft Добавя правопис за of <selector>  и уточнява, че за съвпадащите елементи не е задължително да имат родители.
Selectors Level 3
The definition of ':nth-child' in that specification.
Recommendation Първоначално определение.

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support YesFirefox Full support 3.5IE Full support 9Opera Full support 9.5
Notes
Full support 9.5
Notes
Notes Before Opera 15, Opera does not handle dynamically inserted elements for :nth-child().
Safari Full support 3.1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support 9.5
Notes
Full support 9.5
Notes
Notes Before Opera 15, Opera does not handle dynamically inserted elements for :nth-child().
Safari iOS Full support 3.1Samsung Internet Android Full support Yes
of <selector> syntaxChrome No support NoEdge ? Firefox No support No
Notes
No support No
Notes
Notes See bug 854148.
IE ? Opera ? Safari Full support 9WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android No support No
Notes
No support No
Notes
Notes See bug 854148.
Opera Android ? Safari iOS Full support 9Samsung Internet Android No support No
Matches elements with no parentChrome Full support 57Edge ? Firefox Full support 52IE ? Opera Full support 44Safari ? WebView Android Full support 57Chrome Android Full support 57Edge Mobile ? Firefox Android Full support 52Opera Android Full support 44Safari iOS ? Samsung Internet Android Full support 7.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

Вижте също

Етикети за документа и сътрудници

Допринесли за тази страница: mduchev, kberov
Последно обновяване от: mduchev,