CSS псевдокласс :nth-of-type(n)
Псевдокласс :nth-of-type(n)
применяет заданный стиль к элементу, который является
дочерним элементом, заданного типа, идущим за аналогичным элементом(этого же типа), своего родителя (n-ым
n
— может быть числом, ключевым словом или формулой).
Пример формулы (an + b
):
p:nth-of-type(3n+0) { color:red; }
a
— представляет собой цикл, n
— счетчик (начинается с 0) и b
— это значение смещения, указывающее с какого элемента начнется цикл.
Ключевые слова odd
(нечётные) и even
(чётные), могут быть использованы в соответствии с дочерними элементами, индекс которых составляет чётное или нечётное значение (индекс первого дочернего элемента начинается с 1):
p:nth-of-type(odd) { color:#ff0000; }
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<style>
p:nth-of-type(2) {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<h1>Заголовок</h1>
<p>Первый абзац.</p>
<p>Второй абзац.</p>
<p>Третий абзац.</p>
<div><p>Первый абзац.</p><p>Второй абзац.</p></div>
</body>
</html>
Результат
Заголовок
Первый абзац.
Второй абзац.
Третий абзац.
Первый абзац.
Второй абзац.