Last of type: CSS :last-of-type Selector

Содержание

:nth-last-of-type() — Веб-технологии для разработчиков

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

/* Выбирает каждый четвёртый элемент <p>
   среди любой группы соседних элементов,
   отсчёт начинается с последнего элемента */
p:nth-last-of-type(4n) {
  color: lime;
}

Примечание: Этот псевдокласс практически такой же как :nth-of-type, за исключением того, что счёт элементов производится в обратном порядке начиная с конца, а не в обычном порядке с начала.

Синтаксис

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

Более детальное описание синтаксиса может быть найдено на странице псевдокласса :nth-last-child.

Формальный синтаксис

:nth-last-of-type( <nth> )где 
<nth> = <an-plus-b> | even | odd

Пример

HTML

<div>
  <span>Это span.</span>
  <span>Это другой span.</span>
  <em>Это текст будет подчёркнут.</em>
  <span>Круто, этот span лаймовый!!!</span>
  <strike>Это вообще не span.</strike>
  <span>Это ещё один последний span.</span>
</div>

CSS

span:nth-last-of-type(2) {
  background-color: lime;
}

Результат

Спецификации

Поддержка браузерами

Update compatibility data on GitHub

	Компьютеры						Мобильные
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome для Android	Firefox для Android	Opera для Android	Safari on iOS	Samsung Internet
`:nth-last-of-type()`	Chrome Полная поддержка 4	Edge Полная поддержка 12 Полная поддержка 12 Замечания Before Edge 16, Microsoft Edge treats all unknown elements (such as custom elements) as the same element type.	Firefox Полная поддержка 3.5	IE Полная поддержка 9 Полная поддержка 9 Замечания Internet Explorer treats all unknown elements (such as custom elements) as the same element type.	Opera Полная поддержка 9.5	Safari Полная поддержка 3.2	WebView Android Полная поддержка 2	Chrome Android Полная поддержка 18	Firefox Android Полная поддержка 4	Opera Android Полная поддержка 10.1	Safari iOS Полная поддержка 3.2	Samsung Internet Android Полная поддержка 1.0

Легенда

Полная поддержка: Полная поддержка
Смотрите замечания реализации.: Смотрите замечания реализации.

См. также

Псевдокласс :last-of-type | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	9.6+	3.1+	3.5+	2.1+	2.0+

Краткая информация

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Псевдокласс :last-of-type задает правила стилей для последнего элемента в списке дочерних элементов своего родителя. К примеру, добавление :last-of-type к селектору li устанавливает стиль только для последнего пункта списка, при этом не распространяется на остальные пункты.

Синтаксис

элемент:last-of-type { … }

Значения

Нет.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>last-of-type</title>
  <style>
   p:last-of-type:after {
    content: " ◄"; /* Добавляем символ в конце текста */
    color: #c00000; /* Цвет символа */
   }
  </style>
 </head>
 <body>
  <p>Этот старинный скандинавский напиток пришел к нам из древних времен и 
  воспет во многих песнях. Теперь вы самостоятельно можете приготовить 
  его и насладиться чудесным вкусом и ароматом легендарного нектара.</p>
  <p>...</p>
  <p>Осталось добавить хлива и хрольва, чтобы напиток был готов. 
  Подавать горячим.</p>
 </body>
</html>

В данном примере в последнем абзаце текста добавляется специальный символ красного оттенка. Результат примера показан на рис. 1.

Рис. 1. Результат использования псевдокласса :last-of-type

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Псевдокласс :last-of-type | CSS | WebReference

Псевдокласс :last-of-type задаёт стиль последнего элемента определённого типа в группе братских элементов (имеющих одного родителя).

В качестве примера рассмотрим следующий код HTML:

<article>
  <h2>Роль цитокинов при дорсалгии</h2>
  <p>Автор: Гордон Фримен, канд. физ.-мат. наук</p>
  <p>Содержание статьи</p>
  <address>Почта: [email protected]</address>
  <p>Опубликовано: <time datetime="2018-11-27">27 ноября 2018</time></p>
</article>

Псевдокласс :last-of-type без указания селектора выберет последние элементы каждого типа (<h2>, <p>, <address>, <time>) и установит для них красный цвет текста.

article :last-of-type { color: red; }

При добавлении селектора к :last-of-type сперва выбираются указанные элементы, затем из них берётся последний элемент. Наличие других элементов (<h2> и <address>) и их порядок не учитываются.

article p:last-of-type { color: red; }

Здесь будет выбран последний абзац внутри <article> и выделен красным цветом.

Вместо :last-of-type допустимо использовать :nth-last-of-type(1).

Синтаксис

Селектор:last-of-type { ... }

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>last-of-type</title> <style> p:last-of-type::after { content: ‘ ◄’; /* Добавляем символ в конце текста */ color: #c00000; /* Цвет символа */ } </style> </head> <body> <p>Этот старинный скандинавский напиток пришёл к нам из древних времен и воспет во многих песнях. Теперь вы самостоятельно можете приготовить его и насладиться чудесным вкусом и ароматом легендарного нектара.</p> <p>…</p> <p>Осталось добавить хлива и хрольва, чтобы напиток был готов. Подавать горячим.</p> </body> </html>
В данном примере в последнем абзаце текста добавляется специальный символ красного оттенка. Результат примера показан на рис. 1.
Рис. 1. Результат использования псевдокласса :last-of-type
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
— свойство полностью поддерживается браузером со всеми допустимыми значениями;
— свойство браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 02.03.2020
Редакторы: Влад Мержевич
Псевдокласс :nth-last-of-type | CSS | WebReference
Псевдокласс :nth-last-of-type используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-of-type отсчёт ведётся не от первого элемента, а от последнего.
Синтаксис
Селектор:nth-last-of-type(odd | even | <число> | <выражение>) {...}
Обозначения
Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#
Значения
odd
Все нечётные номера элементов, начиная с конца.
even
Все чётные номера элементов, начиная с конца.
<число>
Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это соответствует последнему элементу в списке.
<выражение>
Задаётся в виде an±b, где a и b целые числа, а n — счётчик, который автоматически принимает значение 0, 1, 2,…
Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.
За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.
В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы. Отсчёт ведётся от последнего элемента.
Табл. 1. Результат для различных значений псевдокласса
Значение Номера элементов Описание
1 1 Последний элемент, является синонимом псевдокласса :last-of-type.
5 5 Пятый элемент с конца.
2n 2, 4, 6, 8, 10,… Все чётные элементы, начиная с конца; аналог значения even.
2n+1 1, 3, 5, 7, 9,… Все нечётные элементы, начиная с конца; аналог значения odd.
3n 3, 6, 9, 12,… Каждый третий элемент, начиная с конца.
3n+2 2, 5, 8, 11, 14,… Каждый третий элемент, начиная с предпоследнего.
n+4 4, 5, 6, 7, 8,… Все элементы, кроме последних трёх.
-n+3 3, 2, 1 Последние три элемента.
5n-2 3, 8, 13, 18, 23,… —
even 2, 4, 6, 8, 10,… Все чётные элементы, начиная с конца.
odd 1, 3, 5, 7, 9,… Все нечётные элементы, начиная с конца.
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>nth-last-of-type</title> <style> table { width: 100%; /* Ширина таблицы */ border-collapse: collapse; /* Убираем двойные границы */ border-spacing: 0; /* Расстояние между ячейками */ } td { border: 1px solid #333; /* Параметры рамки */ padding: 3px; /* Поля в ячейках */ } td:not(:first-of-type) { border-left: 3px double #333; /* Граница слева */ } td:first-of-type { background: #eb9; /* Цвет фона */ } td:nth-last-of-type(2n+1) { background: #f0f0f0; /* Цвет фона */ } </style> </head> <body> <table> <tr> <td> </td><td>2134</td><td>2135</td> <td>2136</td><td>2137</td><td>2138</td> </tr> <tr> <td>Нефть</td><td>16</td><td>34</td> <td>62</td><td>74</td><td>57</td> </tr> <tr> <td>Золото</td><td>4</td><td>69</td> <td>72</td><td>56</td><td>47</td> </tr> <tr> <td>Дерево</td><td>7</td><td>73</td> <td>79</td><td>34</td><td>86</td> </tr> <tr> <td>Камни</td><td>23</td><td>34</td> <td>88</td><td>53</td><td>103</td> </tr> </table> </body> </html>
В данном примере псевдокласс :nth-last-of-type используется для выделения цветом всех нечётных колонок, начиная с последней (рис. 1).
Рис. 1. Применение псевдокласса :nth-last-of-type к колонкам таблицы
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
— свойство полностью поддерживается браузером со всеми допустимыми значениями;
— свойство браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 06.08.2018
Редакторы: Влад Мержевич
Псевдокласс :nth-last-of-type | htmlbook.ru
Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 9.6+ 3.1+ 3.6+ 2.1+ 2.0+
Краткая информация
Версии CSS
CSS 1 CSS 2 CSS 2.1 CSS 3
Описание
Псевдокласс :nth-last-of-type используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-of-type отсчет ведется не от первого элемента, а от последнего.
Синтаксис
элемент:nth-last-of-type(odd | even | <число> | <выражение>) {…}
Значения
odd
Все нечетные номера элементов.
even
Все четные номера элементов.
число
Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это соответствует последнему элементу в списке.
выражение
Задается в виде an+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2…
Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.
За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.
В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.
Табл. 1. Результат для различных значений псевдокласса
Значение Номера элементов Описание
1 1 Последний элемент.
5 5 Пятый элемент с конца.
2n 2, 4, 6, 8, 10 Все четные элементы, аналог значения even.
2n+1 1, 3, 5, 7, 9 Все нечетные элементы, аналог значения odd.
3n+2 2, 5, 8, 11, 14 —
-n+3 3, 2, 1 —
5n-2 3, 8, 13, 18, 23 —
even 2, 4, 6, 8, 10 Все четные элементы.
odd 1, 3, 5, 7, 9 Все нечетные элементы.
Пример
HTML5CSS3IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>nth-last-of-type</title> <style> table { width: 100%; /* Ширина таблицы */ border-collapse: collapse; /* Убираем двойные границы */ border-spacing: 0; /* Расстояние между ячейками */ } td { border: 1px solid #333; /* Параметры рамки */ padding: 3px; /* Поля в ячейках */ } td:not(:first-of-type) { border-left: 3px double #333; /* Граница слева */ } td:first-of-type { background: #eb9; /* Цвет фона */ } td:nth-last-of-type(2n+1) { background: #f0f0f0; /* Цвет фона */ } </style> </head> <body> <table> <tr> <td> </td><td>2134</td><td>2135</td> <td>2136</td><td>2137</td><td>2138</td> </tr> <tr> <td>Нефть</td><td>16</td><td>34</td> <td>62</td><td>74</td><td>57</td> </tr> <tr> <td>Золото</td><td>4</td><td>69</td> <td>72</td><td>56</td><td>47</td> </tr> <tr> <td>Дерево</td><td>7</td><td>73</td> <td>79</td><td>34</td><td>86</td> </tr> <tr> <td>Камни</td><td>23</td><td>34</td> <td>88</td><td>53</td><td>103</td> </tr> </table> </body> </html>
В данном примере псевдокласс :nth-last-of-type используется для выделения цветом всех нечётных колонок, начиная с последней (рис. 1).
Рис. 1. Применение псевдокласса :nth-last-of-type к колонкам таблицы
Псевдокласс: последний в классе | htmlbook.ru
Взаимодействие с другими людьми
Internet Explorer Хром Opera Safari Firefox Android iOS
9.0+ 1.0+ 9.6+ 3.1+ 3.5+ 2.1+ 2.0+
Краткая информация
Версии CSS
CSS 1 CSS 2 CSS 2.1 CSS 3
Описание
Псевдокласс: последний тип задает правила стилей для последнего элемента в списке дочерних элементов своего родителя. К примеру, добавление: последний в своем роде к селектору li устанавливает стиль только для последнего списка, при этом не распространяется на остальные области.
Синтаксис
элемент: последний по типу {…}
Значения
Нет.
Пример
HTML5CSS3IECrOpSaFx
последний тип <стиль> p: last-of-type: after { содержание: «◄»; / * Добавляем символ в конце текста * / цвет: # c00000; / * Цвет символа * / } Этот старинный скандинавский напиток пришел к нам из древних времен и воспет во многих песнях.Теперь вы можете приготовить его и насладиться чудесным вкусом и ароматом легендарного нектара. ... Осталось добавить хлива и хрольва, чтобы напиток был готов. Подавать горячим.
В данном примере в последнем абзаце текста добавлен специальный символ красного оттенка. Результат показан на рис. 1.
Рис. 1. Результат использования псевдокласса: последник
Не выкладывайте свой код напрямую в комментарии, он отображается некорректно.Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
.
Псевдокласс: последний в классе | CSS | WebReference
Псевдокласс: последний в категории задаёт стиль последнего элемента определенного типа в группе братских элементов (имеющего одного родителя).
В качестве рассмотрим следующий код HTML:
Роль цитокинов при дорсалгии Автор: Гордон Фримен, канд. физ.-мат. наук Содержание статьи <адрес> Почта: [email protected] Опубликовано: 27 ноября 2018
Псевдокласс: последний тип без указаний селектора выберет последние элементы каждого типа (
,
,
, ) и установит для них красный цвет текста.
артикул: последний тип {цвет: красный; }
При добавлении селектора к: сперва выбираются элементы, затем из них берётся последний элемент. Наличие других элементов (
и <адрес>) и их порядок не учитываются.
артикул р: последний тип {цвет: красный; }
Здесь будет выбран последний абзац внутри
и выделен красным цветом.
Вместо: last-of-type допустимо использовать: nth-last-of-type (1).
Синтаксис
Селектор : последний тип {...}
Обозначения
Описание Пример
<тип> Указывает тип значения. <размер>
A&B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). нормальный | small-caps
A || B Каждое личное дело самостоятельно или с другими в произвольном порядке. ширина || count
[] Группирует значения. [урожай || крест]
* Повторять ноль или больше раз. [, <время>] *
+ Повторять один или больше раз. <число> +
? Указанный тип, слово или группа не является обязательным. вставка?
{A, B} Повторять не менее A, но не более B раз. <радиус> {1,4}
# Повторять один или больше раз через запятую. <время> #
Пример
последний тип <стиль> p: last-of-type :: after { содержание: ‘◄’; / * Добавляем символ в конце текста * / цвет: # c00000; / * Цвет символа * / }
Этот старинный скандинавский напиток пришёл к нам из древних времен и воспет во многих песнях.Теперь вы можете приготовить его и насладиться чудесным вкусом и ароматом легендарного нектара.
…
Осталось добавить хлива и хрольва, чтобы напиток был готов. Подавать горячим.
В данном примере абзаце текста добавлен специальный символ красного оттенка. Результат показан на рис. 1.
Рис. 1. Результат использования псевдокласса: последний тип
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
Рекомендация (Рекомендация) — спецификация W3C и одобана как стандарт.
Кандидат в рекомендации (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Предлагаемая рекомендация (Предлагаемая рекомендация) — на этом этапе представлен на рассмотрении Консультативного совета W3C для окончательного утверждения.
Рабочий проект (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Черновик редакции (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Проект (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров используются следующие обозначения.
— свойство полностью предоставленным браузером со всеми допустимыми значениями;
— свойство браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо свойство имеется лишь частично, например, не все допустимые значения имеют свойство не ко всем элементам, которые указаны в спецификации.
Число указывает версию, начиная с свойства, имеющего свойство.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 02.03.2020
Редакторы: Влад Мержевич
.
Псевдокласс: nth-last-of-type | CSS | WebReference
Псевдокласс: nth-last-of-type используется для добавления стиля к элементам типа на основе нумерации в дереве элементов. В отличие от псевдокласса: n-й отсчёт ведётся не от первого элемента, а от последнего.
Синтаксис
Селектор : nth-last-of-type (odd | even | <число> | <выражение>) {...}
Обозначения
Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). нормальный | капсюли
A || B Каждое Мессианство самостоятельно или с другими в произвольном порядке. ширина || count
[] Группирует значения. [урожай || крест]
* Повторять ноль или больше раз. [, <время>] *
+ Повторять один или больше раз. <число> +
? Указанный тип, слово или группа не является обязательным. вставка?
{A, B} Повторять не менее A, но не более B раз. <радиус> {1,4}
# Повторять один или больше раз через запятую. <время> #
Значения
нечет
Все нечётные номера элементов, начиная с конца.
четные
Все чётные номера элементов, начиная с конца.
<число>
Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это соответствует последнему элементу в списке.
<выражение>
Задаётся в виде an ± b, где a и b целые числа, а n — счётчик, который автоматически принимает значение 0, 1, 2,…
Если a равно нулю, то оно не пишется и запись сокращается до б.Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.
За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.
В табл. 1 представлены некоторые выражения и ключевые слова, а также указаны какие номера элементов будут задействованы.Отсчёт ведётся от последнего элемента.
Табл. 1. Результат для различных значений псевдокласса
Значение Номера элементов Описание
1 1 Последний элемент, является синонимом псевдокласса: последний по типу.
5 5 Пятый элемент с конца.
2n 2, 4, 6, 8, 10,… Все чётные элементы, начиная с конца; аналог значения даже.
2н + 1 1, 3, 5, 7, 9,… Все нечётные элементы, начиная с конца; аналог значения нечетный.
3n 3, 6, 9, 12,… Каждый третий элемент, начиная с конца.
3n + 2 2, 5, 8, 11, 14,… Каждый третий элемент, начиная с предпоследнего.
n + 4 4, 5, 6, 7, 8,… Все элементы, кроме последних трёх.
-n + 3 3, 2, 1 Последние три элемента.
5н-2 3, 8, 13, 18, 23,… —
даже 2, 4, 6, 8, 10,… Все чётные элементы, начиная с конца .
нечетные 1, 3, 5, 7, 9,… Все нечётные элементы, начиная с конца.
Пример
nth-last-of-type <стиль> Таблица { ширина: 100%; / * Ширина таблицы * / граница-коллапс: коллапс; / * Убираем двойные границы * / граница-интервал: 0; / * Расстояние между ячейками * / } td { граница: 1px solid # 333; / * Параметры рамки * / отступ: 3 пикселя; / * Поля в ячейках * / } td: not (: first-of-type) { граница слева: 3px двойной # 333; / * Граница слева * / } td: first-of-type { фон: # eb9; / * Цвет фона * / } td: nth-last-of-type (2n + 1) { фон: # f0f0f0; / * Цвет фона * / } <таблица> 2134 213521362137 2138Нефть16 346274 57Золото4 697256 47Дерево7 737934 86Камни23 348853 103
В данном примере псевдокласса: nth-last-of-type используется для выделения цветом всех нечётных колонок, начиная с последней (рис.1).
Рис. 1. Применение псевдокласса: nth-last-of-type к колонкам таблицы
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
Рекомендация (Рекомендация) — спецификация W3C и одобана как стандарт.
Кандидат в рекомендации (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Предлагаемая рекомендация (Предлагаемая рекомендация) — на этом этапе представлен на рассмотрении Консультативного совета W3C для окончательного утверждения.
Рабочий проект (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Черновик редакции (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Проект (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров используются следующие обозначения.
— свойство полностью предоставленным браузером со всеми допустимыми значениями;
— свойство браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо свойство имеется лишь частично, например, не все допустимые значения имеют свойство не ко всем элементам, которые указаны в спецификации.
Число указывает версию, начиная с свойства, имеющего свойство.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 06.08.2018
Редакторы: Влад Мержевич
.
Псевдокласс: nth-last-of-type | htmlbook.ru
Internet Explorer Хром Opera Safari Firefox Android iOS
9.0+ 1.0+ 9.6+ 3.1+ 3.6+ 2.1+ 2.0+
Краткая информация
Версии CSS
CSS 1 CSS 2 CSS 2.1 CSS 3
Описание
Псевдокласс: nth-last-of-type используется для добавления стиля к элементам типа на основе нумерации в дереве элементов. В отличие от псевдокласса: n-й отсчет ведется не от первого элемента, а от последнего.
Синтаксис
элемент: n-й-последний-типа (нечетное | четное | <число> | <выражение>) {…}
Значения
нечет
Все нечетные номера элементов.
даже
Все четные номера элементов.
число
Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это соответствует последнему элементу в списке.
выражение
Задается в виде an + b, где a и b целые числа, а n — счетчик, который автоматически принимает значения 0, 1, 2 …
Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an.a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.
За счет использования отрицательных результатов также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.
В табл. 1 представлены некоторые выражения и ключевые слова, а также указаны какие номера элементов будут задействованы.
Табл. 1. Результат для различных значений псевдокласса
Значение Номера элементов Описание
1 1 Последний элемент.
5 5 Пятый элемент с конца.
2н 2, 4, 6, 8, 10 Все четные элементы, даже аналог значения.
2н + 1 1, 3, 5, 7, 9 Все нечетные элементы, аналог значения нечетный.
3н + 2 2, 5, 8, 11, 14 –
-н + 3 3, 2, 1 –
5н-2 3, 8, 13, 18, 23 –
даже 2, 4, 6, 8, 10 Все четные элементы.
нечет 1, 3, 5, 7, 9 Все нечетные элементы.
Пример
HTML5CSS3IECrOpSaFx
nth-last-of-type <стиль> Таблица { ширина: 100%; / * Ширина таблицы * / граница-коллапс: коллапс; / * Убираем двойные границы * / граница-интервал: 0; / * Расстояние между ячейками * / } td { граница: 1px solid # 333; / * Параметры рамки * / отступ: 3 пикселя; / * Поля в ячейках * / } td: not (: first-of-type) { граница слева: 3px двойной # 333; / * Граница слева * / } td: first-of-type { фон: # eb9; / * Цвет фона * / } td: nth-last-of-type (2n + 1) { фон: # f0f0f0; / * Цвет фона * / } <таблица> 2134 2135 21362137 2138 Нефть16 34 6274 57 Золото4 69 7256 47 Дерево7 73 7934 86 Камни23 34 8853 103
В данном примере псевдокласса используется выделение цветом всех нечётных колонок, начиная с последней (рис.1).
Рис. 1. Применение псевдокласса: nth-last-of-type к колонкам таблицы
.
No related posts.

Табл. 1. Результат для различных значений псевдокласса
Значение	Номера элементов	Описание
1	1	Последний элемент, является синонимом псевдокласса :last-of-type.
5	5	Пятый элемент с конца.
2n	2, 4, 6, 8, 10,…	Все чётные элементы, начиная с конца; аналог значения even.
2n+1	1, 3, 5, 7, 9,…	Все нечётные элементы, начиная с конца; аналог значения odd.
3n	3, 6, 9, 12,…	Каждый третий элемент, начиная с конца.
3n+2	2, 5, 8, 11, 14,…	Каждый третий элемент, начиная с предпоследнего.
n+4	4, 5, 6, 7, 8,…	Все элементы, кроме последних трёх.
-n+3	3, 2, 1	Последние три элемента.
5n-2	3, 8, 13, 18, 23,…	—
even	2, 4, 6, 8, 10,…	Все чётные элементы, начиная с конца.
odd	1, 3, 5, 7, 9,…	Все нечётные элементы, начиная с конца.

Табл. 1. Результат для различных значений псевдокласса
Значение	Номера элементов	Описание
1	1	Последний элемент.
5	5	Пятый элемент с конца.
2n	2, 4, 6, 8, 10	Все четные элементы, аналог значения even.
2n+1	1, 3, 5, 7, 9	Все нечетные элементы, аналог значения odd.
3n+2	2, 5, 8, 11, 14	—
-n+3	3, 2, 1	—
5n-2	3, 8, 13, 18, 23	—
even	2, 4, 6, 8, 10	Все четные элементы.
odd	1, 3, 5, 7, 9	Все нечетные элементы.

Табл. 1. Результат для различных значений псевдокласса
Значение	Номера элементов	Описание
1	1	Последний элемент, является синонимом псевдокласса: последний по типу.
5	5	Пятый элемент с конца.
2n	2, 4, 6, 8, 10,…	Все чётные элементы, начиная с конца; аналог значения даже.
2н + 1	1, 3, 5, 7, 9,…	Все нечётные элементы, начиная с конца; аналог значения нечетный.
3n	3, 6, 9, 12,…	Каждый третий элемент, начиная с конца.
3n + 2	2, 5, 8, 11, 14,…	Каждый третий элемент, начиная с предпоследнего.
n + 4	4, 5, 6, 7, 8,…	Все элементы, кроме последних трёх.
-n + 3	3, 2, 1	Последние три элемента.
5н-2	3, 8, 13, 18, 23,…	—
даже	2, 4, 6, 8, 10,…	Все чётные элементы, начиная с конца .
нечетные	1, 3, 5, 7, 9,…	Все нечётные элементы, начиная с конца.

Табл. 1. Результат для различных значений псевдокласса
Значение	Номера элементов	Описание
1	1	Последний элемент.
5	5	Пятый элемент с конца.
2н	2, 4, 6, 8, 10	Все четные элементы, даже аналог значения.
2н + 1	1, 3, 5, 7, 9	Все нечетные элементы, аналог значения нечетный.
3н + 2	2, 5, 8, 11, 14	–
-н + 3	3, 2, 1	–
5н-2	3, 8, 13, 18, 23	–
даже	2, 4, 6, 8, 10	Все четные элементы.
нечет	1, 3, 5, 7, 9	Все нечетные элементы.