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

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

/* Выбирает <p>, являющийся последним элементом
   среди элементов своего типа среди своих соседей */
p:last-of-type {
  color: lime;
}

Примечание: В первоначальном определении выбранный элемент должен иметь родителя. Начиная с Selectors Level 4, это не является обязательным.

Синтаксис

:last-of-type

Пример

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

HTML

<h3>Заголовок</h3>
<p>Параграф 1</p>
<p>Параграф 2</p>

CSS

p:last-of-type {
  color: red;
  font-style: italic;
}

Результат

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

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

HTML

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

CSS

article :last-of-type {
  background-color: pink;
}

Результат

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

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

Легенда

Полная поддержка  

Полная поддержка

Смотрите замечания реализации.

Смотрите замечания реализации.

См. также

Псевдокласс :nth-last-of-type() | CSS справочник

• HTML
  • Учебник HTML
  • Справочник тегов
  • Атрибуты событий
  • Глобальные атрибуты
  • Коды языков
  • Мнемоники
  • Цвета
  • Тесты знаний
• CSS
  • Учебник CSS
  • Справочник свойств
  • Селекторы
  • Функции
  • Правила
  • Flexbox генератор
  • Grid генератор
  • Учебник LESS
• JavaScript
  • Интерфейсы веб API
  • Объект Array
  • Объект Date
  • Объект Function
  • Объект Global
  • Объект JSON
  • Объект Math
  • Объект Number
  • Объект Object
  • Объект RegExp
  • Объект Promise
  • Объект String
• jQuery
  • Селекторы
  • События
  • Методы DOM
  • Перемещения
  • Утилиты
  • Эффекты
  • AJAX
  • Объект Callbacks
  • Объект Deferred

HTML

• HTML учебник
• Справочник тегов
• Атрибуты событий
• Глобальные атрибуты
• Мнемоники
• Коды языков
• HTML цвета
• Тесты знаний

CSS

• CSS учебник
• Справочник свойств
• CSS селекторы
• CSS функции
• CSS правила
• Flexbox генератор
• Grid генератор
• LESS учебник

JavaScript

• Интерфейсы веб API
• Объект Array
• Объект Date
• Объект Function
• Объект Global
• Объект JSON
• Объект Math ^β
• Объект Number
• Объект Object
• Объект Promise
• Объект RegExp
• Объект String

jQuery

• jQuery селекторы
• jQuery события
• jQuery методы DOM
• jQuery перемещения
• jQuery утилиты

Псевдокласс :last-of-type | CSS справочник

• HTML
  • Учебник HTML
  • Справочник тегов
  • Атрибуты событий
  • Глобальные атрибуты
  • Коды языков
  • Мнемоники
  • Цвета
  • Тесты знаний
• CSS
  • Учебник CSS
  • Справочник свойств
  • Селекторы
  • Функции
  • Правила
  • Flexbox генератор
  • Grid генератор
  • Учебник LESS
• JavaScript
  • Интерфейсы веб API
  • Объект Array
  • Объект Date
  • Объект Function
  • Объект Global
  • Объект JSON
  • Объект Math
  • Объект Number
  • Объект Object
  • Объект RegExp
  • Объект Promise
  • Объект String
• jQuery
  • Селекторы
  • События
  • Методы DOM
  • Перемещения
  • Утилиты
  • Эффекты
  • AJAX
  • Объект Callbacks
  • Объект Deferred

HTML

• HTML учебник
• Справочник тегов
• Атрибуты событий
• Глобальные атрибуты
• Мнемоники
• Коды языков
• HTML цвета
• Тесты знаний

CSS

• CSS учебник
• Справочник свойств
• CSS селекторы
• CSS функции
• CSS правила
• Flexbox генератор
• Grid генератор
• LESS учебник

JavaScript

• Интерфейсы веб API
• Объект Array

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

Описание

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

/* Выбирает все <p>, которые являются */
/* единственным потомками типа <p> */
p:only-of-type {
  background-color: lime;
}

Синтаксис

:only-of-type

Пример

HTML

<main>
  <div>Я `div` №1.</div>
  <p>Я тут единственный `p` елемент.</p>
  <div>Я `div` №2.</div>
  <div>Я `div` №3.
    <i>Я единственный потомок типа `i`.</i>
    <em>Я `em` №1.</em>
    <em>Я `em` №2.</em>
  </div>
</main>

CSS

main :only-of-type { 
  color: red; 
}

Результат

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

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

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



• 
  Основное
• 
  HTML
• 
  CSS
• 
  Сайт

• Статьи
• Блог
• Практикум
• Форум

• Самоучитель HTML
• Справочник по HTML
• XHTML
• HTML5

• Самоучитель CSS
• Справочник по CSS
• Рецепты CSS
• CSS3

• Вёрстка веб-страниц
• Макеты
• Веб-сервер

Справочник CSS

• Как пользоваться справочником
• !important
• -moz-border-bottom-colors
• -moz-border-left-colors
• -moz-border-right-colors
• -moz-border-top-colors
• -moz-linear-gradient
• -moz-orient
• -moz-radial-gradient
• -moz-user-select
• -ms-interpolation-mode
• -ms-radial-gradient
• -o-linear-gradient
• -o-object-fit
• -o-radial-gradient
• -webkit-linear-gradient
• -webkit-radial-gradient
• -webkit-user-select
• ::-moz-placeholder
• ::-moz-selection
• ::-ms-browse
• ::-ms-check
• ::-ms-clear
• ::-ms-expand
• ::-ms-fill
• ::-ms-reveal
• ::-ms-value
• ::-webkit-input-placeholder
• ::after
• ::before
• ::first-letter
• ::first-line
• ::selection
• :active
• :after
• :before
• :checked
• :default
• :disabled
• :empty
• :enabled
• :first-child
• :first-letter
• :first-line
• :first-of-type
• :focus
• :hover
• :indeterminate
• :invalid
• :lang
• :last-child
• :last-of-type
• :link
• :not
• :nth-child
• :nth-last-child
• :nth-last-of-type
• :nth-of-type
• :only-child
• :only-of-type
• :optional
• :read-only
• :read-write
• :required
• :root
• :target
• :valid
• :visited
• @charset
• @font-face
• @import
• @media
• @page
• an

Псевдокласс: nth-last-of-type () | Справочник CSS

 : nth-last-of-type (число)  {
блок объявлений;
}
 

 1 
 2 
 3 
 4 


 1 
 2 
 3 
 4 
 

 

<статья>
 Первый параграф 
 Второй параграф