Псевдоклас nth-child

Псевдокласът nth-child избира елемент, който е n-ти потомък на родителя.

Синтаксис

cssселектор:nth-child(число | odd | even | израз) {
  
}

Стойности

Стойност	Описание
число	Положително число започващо от `1`. Задава номера на елемента, към който искаме да се обърнем. Номерацията на елементите започва от `1`.
`odd`	Нечетни елементи.
`even`	Четни елементи.
израз	Могат да се съставят специални изрази с буквата n, която обозначава всички цели числа от нула (не от единица) до безкрайност. Така, `2n` - означава всички четни числа (започвайки от второто). Как да разберем това? Заместваме в `n` последователно числа от `0` и нататък: ако n = 0, то 2n ще даде 0 - такъв елемент няма (номерацията на елементите е от 1), ако n = 1, то 2n ще даде 2 - втори елемент, ако n = 2, 2n дава 4 - четвърти елемент. Ако се напише 3n - това ще бъде всеки трети елемент (започвайки от третия), и така нататък.

Пример

В този пример ще направим в червен цвят онзи li, който е 4-ти потомък на своя родител:

html<ul>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
</ul>

cssli:nth-child(4) {
  color: red;
}

Результат:

Пример

Сега ще направим в червено всички четни li:

html<ul>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
</ul>

cssli:nth-child(even) {
  color: red;
}

Результат:

Пример

Сега ще направим в червено всички нечетни li:

html<ul>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
</ul>

cssli:nth-child(odd) {
  color: red;
}

Результат:

Пример

Сега ще направим в червено всеки трети li (започвайки от третия):

html<ul>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
</ul>

cssli:nth-child(3n) {
  color: red;
}

Результат:

Пример

В селектора може да се посочи диапазон от елементи. Да речем, имате списък от 20 елемента и трябва да изберете елементи от 7 до 14 включително. Това може да се направи ето така:

html<ol>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
</ol>

cssli:nth-child(n+7):nth-child(-n+14) {
  color: red;
}

Результат: