Псеўдаклас 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>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
</ul>cssli:nth-child(4) {
color: red;
}
Результат:
Прыклад
Зараз чырвонымі зробім усе цотныя li:
html<ul>
<li>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
</ul>cssli:nth-child(even) {
color: red;
}
Результат:
Прыклад
Зараз чырвонымі зробім усе няцотныя li:
html<ul>
<li>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
</ul>cssli:nth-child(odd) {
color: red;
}
Результат:
Прыклад
Зараз чырвонымі зробім кожны трэці
li (пачынаючы з трэцяга):
html<ul>
<li>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
</ul>cssli:nth-child(3n) {
color: red;
}
Результат:
Прыклад
У селектары можна паказаць дыяпазон элементаў.
Дапусцім, у вас ёсць спіс з 20
элементаў і трэба выбраць элементы з 7
па 14 уключна. Гэта можна зрабіць
вось так:
html<ol>
<li>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
<li>element спісу</li>
</ol>cssli:nth-child(n+7):nth-child(-n+14) {
color: red;
}
Результат: