Псевдокласс :nth-last-of-type | Справочник CSS
http://belarusweb.net
Основы создания сайтов

Псевдокласс :nth-last-of-type

Описание

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

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

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

Синтаксис

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

Ссылки

Примеры

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>
	
	<style>
	
		/* Применяем к первому дочернему 'em' с конца */
		/* !!! не считаем остальные дочерние элементы !!! */
		em:nth-last-of-type(1){
		color: blue;			 
		}
		
	</style>
	
</head>
<body>

	<p>
		<!-- !!! Элементы 'br' и 'b' не считаем !!! -->
		<em>1 дочерний элемент 'em'.</em><br>
		<em>2 дочерний элемент 'em'.</em><br>
		<b>Я &ndash; элемент 'b'.</b><br>
	</p>
	
</body>
</html>

Пример №1