Css last of type: :last-of-type — CSS: Cascading Style Sheets

Псевдокласс :last-of-type | 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}
#	Повторять один или больше раз через запятую.	<время>#

Пример

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

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

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

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

• — элемент полностью поддерживается браузером;
• — элемент браузером не воспринимается и игнорируется;
• — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Псевдоклассы

См. также

• :first-of-type и :last-of-type
• :nth-last-child() и :nth-last-of-type()
• Псевдокласс :first-of-type
• Псевдокласс :last-child

:nth-last-of-type() ⚡️ HTML и CSS с примерами кода

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

• :active
• :any-link
• :blank
• :checked
• :current()
• :default
• :defined
• :dir()
• :disabled
• :empty
• :enabled
• :first
• :first-child
• :first-of-type
• :focus
• :focus-visible
• :focus-within
• :fullscreen
• :future
• :has()
• :host
• :host()
• :host-context()
• :hover
• :indeterminate
• :in-range
• :invalid
• :is()
• :lang()
• :last-child
• :last-of-type
• :left
• :link
• :local-link
• :not()
• :nth-child()
• :nth-col()
• :nth-last-child()
• :nth-last-col()
• :nth-last-of-type()
• :nth-of-type()
• :only-child
• :only-of-type
• :optional
• :out-of-range
• :past
• :placeholder-shown
• :read-only
• :read-write
• :required
• :right
• :root
• :scope
• :target
• :target-within
• :user-invalid
• :valid
• :visited
• :where()

Синтаксис

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

Значения

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,…	Все нечётные элементы, начиная с конца.

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

• Selectors Level 4
• Selectors Level 3

Примеры

Пример 1

HTMLCSSРезультат

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

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

Пример 2

<!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>&nbsp;</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 используется для выделения цветом всех нечётных колонок, начиная с последней.

Результат:

См. также

• :nth-last-child
• :nth-of-type

Ссылки

• Псевдо-класс :nth-last-of-type() ^{MDN (рус.)}

:last-of-type — CSS: Каскадные таблицы стилей

Псевдокласс :last-of-type CSS представляет последний элемент своего типа среди группы родственных элементов.

 :последний тип {
  /* ... */
}
 

Стилизация последнего абзаца

HTML

 
Заголовок
 
Абзац 1
Абзац 2
 

CSS

 p:последний тип {
  красный цвет;
  стиль шрифта: курсив;
}
 

Результат

Вложенные элементы

В этом примере показано, как можно нацеливаться на вложенные элементы. Обратите внимание, что универсальный селектор ( * ) подразумевается, когда не записывается простой селектор.

HTML

 <статья>
  
Этот `div` стоит первым. 
  
Этот вложенный `span` последний!
  <дел>
    Этот вложенный `em` первый, но этот вложенный `em` последний!