CSS псевдокласс :nth-last-of-type()

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

Значение :nth-last-of-type() может быть задано числом, ключевым словом или формулой.

Значение	Описание
`number`	Соответствует ровно n-му элементу с конца.
`odd` / `even`	Соответствует элементам на нечётных или чётных позициях с конца.
`an + b`	Соответствует элементам на позициях, вычисляемых по формуле `an + b`, где `a` и `b` — целые числа, а `n` — счётчик, начинающийся с 0.

Псевдокласс :nth-last-of-type() похож на :nth-of-type(), но есть отличие: он считает элементы с конца, тогда как :nth-of-type() считает их с начала.

Этот псевдокласс также похож на :nth-last-child, но они различаются тем, что выбирают: :nth-last-of-type() нацеливается на конкретный тип элемента среди его братьев и сестёр, тогда как :nth-last-child() выбирает любой тип элемента на заданной позиции. Оба имеют одинаковую специфичность.

Версия

Selectors Level 4

Selectors Level 3

Синтаксис

Синтаксис CSS :nth-last-of-type()

css

:nth-last-of-type( <nth> ) {
  css declarations;
}

Пример использования псевдокласса :nth-last-of-type():

Пример кода CSS :nth-last-of-type()

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-last-of-type(3) {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:nth-last-of-type() selector example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
    <p>Paragraph 6</p>
  </body>
</html>

Try it Yourself »

Пример использования псевдокласса :nth-last-of-type() с "odd" и "even":

Ещё один пример кода CSS :nth-last-of-type()

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-last-of-type(odd) {
        background: #1c87c9;
        color: #eeeeee;
      }
      p:nth-last-child(even) {
        background: #666666;
        color: #eeeeee;
      }
    </style>
  </head>
  <body>
    <h2>:nth-last-of-type selector example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
    <p>Paragraph 6</p>
  </body>
</html>

Try it Yourself »

Пример использования псевдокласса :nth-last-of-type() с формулой (an + b):

Пример HTML/CSS использования псевдокласса :nth-last-of-type() с формулой (an + b)

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-last-of-type(3n+0) {
        background: #767fea;
        padding: 10px;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <p>The first paragraph.</p>
    <p>The second paragraph.</p>
    <p>The third paragraph.</p>
    <p>The fourth paragraph.</p>
    <p>The fifth paragraph.</p>
    <p>The sixth paragraph.</p>
    <p>The seventh paragraph.</p>
    <p>The eight paragraph.</p>
    <p>The ninth paragraph.</p>
  </body>
</html>

Try it Yourself »

Практика

Какова функция псевдокласса CSS :nth-last-of-type()?

Он выбирает HTML-элемент, который является предпоследним ребёнком своего типа в группе братьев и сестёр.Он выбирает элементы в зависимости от их позиции среди группы братьев и сестёр, считая с конца.Он выборочно стилизует элементы, применяя стили к чередующимся элементам.Он выбирает только последние дочерние элементы каждого типа.Его можно использовать с ключевыми словами 'even' и 'odd' для выбора чётных и нечётных экземпляров элемента с конца.

CSS псевдокласс :nth-last-of-type() ​

Версия ​

Синтаксис ​

Пример использования псевдокласса :nth-last-of-type(): ​

Пример использования псевдокласса :nth-last-of-type() с "odd" и "even": ​

Пример использования псевдокласса :nth-last-of-type() с формулой (an + b): ​

Практика ​

CSS псевдокласс :nth-last-of-type()

Версия

Синтаксис

Пример использования псевдокласса :nth-last-of-type():

Пример использования псевдокласса :nth-last-of-type() с "odd" и "even":

Пример использования псевдокласса :nth-last-of-type() с формулой (an + b):

Практика