Псеўдаклас nth-of-type
Псеўдаклас nth-of-type выбірае элемент,
які з'яўляецца n-ным нашчадкам зададзенага тыпу.
Гэта значыць, калі я напішу h2:nth-of-type(4)
- знойдзецца 4-ты h2 у бацьку (у
адрозненне ад nth-child,
які знойдзе толькі той h2, які з'яўляецца
4-тым элементам у бацьку).
Сінтаксіс
cssселектар:nth-of-type(лік | odd | even | выраз){
}
Значэнні
| Значэнне | Апісанне |
|---|---|
| лік |
Дадатны лік пачынаючы з 1. Задае нумар элемента,
да якога мы хочам звярнуцца.
Нумарацыя элементаў пачынаецца з 1.
|
odd |
Няцотныя элементы. |
even |
Цотныя элементы. |
| выраз |
Можна складаць спецыяльныя выразы з літарай n,
якая абазначае ўсе цэлыя лікі ад нуля (не ад адзінкі)
да бясконцасці. Так, 2n - значыць усе цотныя
лікі (пачынаючы з другога).
Як гэта зразумець? Падстаўляем у n паслядоўна
лікі ад 0 і так далей: калі n = 0, то 2n дасць 0 -
такого элемента няма (нумарацыя элементаў з 1),
калі n = 1, то 2n дасць 2 - другі элемент, калі n = 2,
2n дае 4 - чацвёрты элемент. Калі напісаць 3n - гэта
будзе кожны трэці элемент (пачынаючы з трэцяга), і так далей.
|
Прыклад
Знойдзем h2, які з'яўляецца 2-ім h2
у бацьку:
html<div>
<h2>загаловак</h2>
<p>абзац</p>
<h2>загаловак</h2>
<p>абзац</p>
<h2>загаловак</h2>
<p>абзац</p>
</div>cssh2:nth-of-type(2) {
color: red;
}
Результат:
Прыклад
Знойдзем усе цотныя h2:
html<div>
<h2>загаловак</h2>
<p>абзац</p>
<h2>загаловак</h2>
<p>абзац</p>
<h2>загаловак</h2>
<p>абзац</p>
<h2>загаловак</h2>
<p>абзац</p>
<h2>загаловак</h2>
<p>абзац</p>
</div>cssh2:nth-of-type(even) {
color: red;
}
Результат:
Прыклад
Знойдзем усе няцотныя h2:
html<div>
<h2>загаловак</h2>
<p>абзац</p>
<h2>загаловак</h2>
<p>абзац</p>
<h2>загаловак</h2>
<p>абзац</p>
<h2>загаловак</h2>
<p>абзац</p>
<h2>загаловак</h2>
<p>абзац</p>
</div>cssh2:nth-of-type(odd) {
color: red;
}
Результат: