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

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

Псевдокласс :last-of-type эквивалентен :nth-last-of-type(1) и выбирает тот же самый элемент.

Версия

Selectors Level 4

Selectors Level 3

Синтаксис

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

css

:last-of-type {
  css declarations;
}

Пример использования селектора `:last-of-type`:

Пример кода :last-of-type

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:last-of-type {
        background: #8ebf42;
        font-style: italic;
        color: #eeeeee;
      }
    </style>
  </head>
  <body>
    <h2>:last-of-type selector example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
  </body>
</html>

Try it Yourself »

Выбор родительских элементов

Селектор также может применяться к родительским элементам.

INFO

Селектор * подразумевается, когда не указан селектор типа (например, *:last-of-type эквивалентен :last-of-type).

Пример выбора родительского элемента:

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

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      article:last-of-type {
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <article>
      <div>This "div" is first.</div>
      <div>This <span>nested "span" is last</span>!</div>
      <div>This <em>nested "em" is first</em>, but this <em>nested "em" is last</em>!</div>
      <b>This "b" qualifies!</b>
      <div>This is the final "div"!</div>
    </article>
  </body>
</html>

Try it Yourself »

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

Пример использования селекторов CSS `:last-of-type` и `:last-child`:

Селекторы :last-of-type и :last-child

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:last-of-type {
        background: #8ebf42;
        font-style: italic;
        color: #eee;
      }
      span {
        display: block;
      }
      span:last-child {
        background: #8ebf42;
        font-style: italic;
        font-weight: bold;
        color: #eee;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>:last-of-type and :last-child selectors example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <span>Some text</span>
    <span>Some text</span>
    <span>Some text</span>
  </body>
</html>

Try it Yourself »

Практика

Что представляет собой псевдокласс CSS :last-of-type?

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

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

Версия ​

Синтаксис ​

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

Выбор родительских элементов ​

Пример выбора родительского элемента: ​

Пример использования селекторов CSS :last-of-type и :last-child: ​

Практика ​

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

Версия

Синтаксис

Пример использования селектора `:last-of-type`:

Выбор родительских элементов

Пример выбора родительского элемента:

Пример использования селекторов CSS `:last-of-type` и `:last-child`:

Практика