CSS :: Псевдокласс :nth-child
Псевдокласс :nth-child (от англ. nth child – n-й дочерний) позволяет выбрать все дочерние элементы требуемого типа, у которых порядковый номер следования внутри родительского элемента соответствует значению, указанному в селекторе. В скобках могут быть указаны значения:
-
odd – выбираются дочерние элементы требуемого типа с нечетными порядковыми номерами
относительно своего родителя. Например, если задано правило
span:nth-child(odd) {блок объявлений}
, то в документе будут выбраны все дочерние элементы «span», которые имеют нечетные порядковые номера (1, 3, 5 и т.д.) относительно своего родительского элемента. -
even – выбираются дочерние элементы требуемого типа с четными порядковыми номерами
относительно своего родителя. Например, если задано правило
span:nth-child(even) {блок объявлений}
, то в документе будут выбраны все дочерние элементы «span», которые имеют четные порядковые номера (2, 4, 6 и т.д.) относительно своего родительского элемента. -
n – выбираются дочерние элементы требуемого типа с указанным порядковым
номером n относительно своего родителя, при чем нумерация начинается с единицы. Например, если
задано правило
span:nth-child(3) {блок объявлений}
, то в документе будут выбраны все дочерние элементы «span», которые имеют порядковый номер 3 относительно своего родительского элемента. -
an+b – выбираются дочерние элементы требуемого типа, порядковый номер которых
относительно своего родителя вычисляется по формуле an+b, где a
и b – целые числа, задаваемые в качестве значений,
а n – счетчик, который автоматически принимает значения 0,
1, 2 и т.д. Например, если задано правило
span:nth-child(3n+4) {блок объявлений}
, то в документе будут выбраны все дочерние элементы «span», которые имеют порядковые номера 4, 7, 10 и т.д. относительно своего родительского элемента.
Селектор псевдоклассов напоминает селектор классов, но в отличие от классов, псевдоклассы в разметке html-документа не указываются и отделяются от указанного в селекторе элемента двоеточием «:». При этом выбираются элементы необходимого типа, которые соответствуют требованиям указанного в селекторе псевдокласса.
Синтаксис
<селектор>:nth-child(<значение>) {блок объявлений}
Ссылки
Официальный сайт W3C: https://www.w3.org/TR/selectors-4/#the-nth-child-pseudo
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/:nth-child
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> /* Выбираем дочерние по отношению к своему родителю (в данном */ /* случае к элементу «p») элементы «span» с нечетными */ /* порядковыми номерами: 1, 3, 5 и т.д. */ span:nth-child(odd){ color: red; } /* А здесь с четными порядковыми номерами: 2, 4, 6 и т.д. */ span:nth-child(even){ color: blue; } </style> </head> <body> <p> <!-- Не забываем, что «br» тоже является элементом --> <span>1 дочерний элемент.</span> <span>2 дочерний элемент.</span><br> <span>4 дочерний элемент.</span> <span>5 дочерний элемент.</span><br> <span>7 дочерний элемент. </span> <span>8 дочерний элемент.</span><br> <span>10 дочерний элемент.</span> </p> </body> </html>
Пример №1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №2</title> <style> /* Выбираем дочерние по отношению к своему родителю (в данном */ /* случае к элементу «body») элементы «span» с порядковыми */ /* номерами 3*0+1=1, 3*1+1=4, 3*2+1=7 и т.д. */ span:nth-child(3n+1){ color: red; } /* Стиль применяется к 3-му дочернему элементу «span» */ span:nth-child(3){ color: blue; } </style> </head> <body> <!-- Не забываем, что «br» тоже является элементом --> <span>1 дочерний элемент.</span><br> <span>3 дочерний элемент.</span><br> <span>5 дочерний элемент.</span><br> <span>7 дочерний элемент.</span><br> <span>9 дочерний элемент.</span><br> <span>11 дочерний элемент.</span><br> <span>13 дочерний элемент.</span><br> </body> </html>
Пример №2