Самоучитель CSS Справочник CSS Селекторы Стили по умолчанию Цвета CSS Единицы измерения
Селекторы CSS

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

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

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

Наличие дочерних элементов других типов (ссылки, картинки, списки и так далее) не мешают сопоставлению.

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

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

то он соответствует всем элементам, которые являются последними элементами своего типа внутри родительского элемента.

Пример

article :last-of-type { 
  color: #4d4dff;
  background: #e6e6ff;
}
<article>

  <h2>Заголовок (единственный элемент своего типа)</h2>
  
  <p>Первый абзац с <em>двумя</em> элементами <em>EM</em>
  и одним <b>элементом B</b>. (В этом абзаце будет
  выделен второй элемент EM, как последний элемент своего
  типа, и элемент B, как единственный элемент
  своего типа.)</p>
  
  <p>Второй абзац (последний элемент своего типа внутри
  элемента ARTICLE).</p>

</article>

Результат

Заголовок (единственный элемент своего типа)

Первый абзац с двумя элементами EM и одним элементом B. (В этом абзаце будет выделен второй элемент EM, как последний элемент своего типа, и элемент B, как единственный элемент своего типа.)

Второй абзац (последний элемент своего типа внутри элемента ARTICLE).

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2025 © puzzleweb.ru | razumnikum.ru

Реклама на сайте | puzinfo@puzzleweb.ru