Псевдокласот nth-child
Псевдокласот nth-child избира елемент,
кој е n-ти потомок на родителот.
Синтакса
селектор: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-ти потомок
на својот родител:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-child(4) {
color: red;
}
:
Пример
Сега црвени ќе ги направиме сите парни li:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-child(even) {
color: red;
}
:
Пример
Сега црвени ќе ги направиме сите непарни li:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-child(odd) {
color: red;
}
:
Пример
Сега црвени ќе ја направиме секоја трета
li (почнувајќи од третата):
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-child(3n) {
color: red;
}
:
Пример
Во селекторот може да се наведе опсег на елементи.
Да речеме, имате список од 20
елементи и треба да се изберат елементите од 7
до 14 вклучително. Ова може да се направи
вака:
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
li:nth-child(n+7):nth-child(-n+14) {
color: red;
}
:
