CSS :: Псевдокласс :nth-last-child

Псевдокласс :nth-last-child (от англ. nth last child – n-й дочерний с конца) позволяет выбрать все дочерние элементы требуемого типа, у которых порядковый номер следования внутри родительского элемента отсчитывается от конца родительского элемента (от закрывающего тега) и соответствует значению, указанному в селекторе. В скобках могут быть указаны значения:

odd – выбираются дочерние элементы требуемого типа с нечетными порядковыми номерами, отсчитываемыми относительно конца своего родительского элемента. Например, если задано правило span:nth-last-child(odd) {блок объявлений}, то в документе будут выбраны все дочерние элементы «span», которые имеют нечетные порядковые номера (1, 3, 5 и т.д.) относительно конца своего родительского элемента.
even – выбираются дочерние элементы требуемого типа с четными порядковыми номерами, отсчитываемыми относительно конца своего родительского элемента. Например, если задано правило span:nth-last-child(even) {блок объявлений}, то в документе будут выбраны все дочерние элементы «span», которые имеют четные порядковые номера (2, 4, 6 и т.д.) относительно конца своего родительского элемента.
n – выбираются дочерние элементы требуемого типа с указанным порядковым номером n, отсчитываемым относительно конца своего родительского элемента, при чем нумерация должна начинаться с единицы. Например, если задано правило span:nth-last-child(3) {блок объявлений}, то в документе будут выбраны все дочерние элементы «span», которые имеют порядковый номер 3 относительно конца своего родительского элемента.
an+b – выбираются дочерние элементы требуемого типа, порядковый номер которых относительно конца своего родителя вычисляется по формуле an+b, где a и b – целые числа, задаваемые в качестве значений, а n – счетчик, который автоматически принимает значения 0, 1, 2 и т.д. Например, если задано правило span:nth-last-child(3n+4) {блок объявлений}, то в документе будут выбраны все дочерние элементы «span», которые имеют порядковые номера 4, 7, 10 и т.д. относительно конца своего родительского элемента.

Селектор псевдоклассов напоминает селектор классов, но в отличие от классов, псевдоклассы в разметке html-документа не указываются и отделяются от указанного в селекторе элемента двоеточием «:». При этом выбираются элементы необходимого типа, которые соответствуют требованиям указанного в селекторе псевдокласса.

Синтаксис

<селектор>:nth-last-child(<значение>) {блок объявлений}

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/selectors-4/#the-nth-last-child-pseudo

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/:nth-last-child

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>
	
	<style>
	
		/* Выбираем дочерние по отношению к своему родителю (в данном */ 
		/* случае к элементу «p») элементы «span» с нечетными */
		/* порядковыми номерами, отсчитываемыми с конца: 1, 3, 5 и т.д. */	
		span:nth-last-child(odd){
		color: red;			 
		}

		/* А здесь с четными порядковыми номерами, отсчитываемыми */
		/* с конца элемента: 2, 4, 6 и т.д. */
		span:nth-last-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

HTML Результат

htmlCodes

<!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 и т.д., */	
		/* что соответствует номерам 10, 7, 4, 1 начиная с начала */
		span:nth-last-child(3n+1){
		color: red;			 
		}
		
		/* Стиль применяется к 3-му дочернему элементу «span» */ 
		/* с конца, т.е. к 8-му с начала */
		span:nth-last-child(3){
		color: blue;			 
		}
		
	</style>
	
</head>
<body>

	<!--  Не забываем, что «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>
		
</body>
</html>

Пример №2