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

CSS селекторы

Значение и применение

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

Псевдокласс :last-of-typecss3 работает как и :last-childcss3, но применяется к дочернему элементу определенного типа, а не к элементу с любым типом.

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

СелекторChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
:last-of-typecss34.03.59.63.29.012.0

CSS синтаксис:

:last-of-type {
блок объявлений;
}

Версия CSS

CSS3

Пример использования

Рассмотрим пример, в котором главное содержимое страницы заключено в блоки <div>, которые имеют стилевой класс .test, и Вам необходимо придать определённый стиль последним абзацам (элементы <p>) в этих блоках:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс :last-of-type</title>
<style>
.test p:last-of-type { /* используем селектор потомков с псевдоклассом :last-of-type */
background-color: orange; /* устанавливаем цвет заднего фона */
font-weight: bold; /* устанавливаем жирное начертание текста */
}
</style>
</head>
	<body>
		<div class = "test">
			<p>Абзац один</p>
			<p>Абзац два</p>
			<p>Абзац три</p>
			<span>Текст, внутри элемента span</span>
		</div>
		<hr>
		<div class = "test"> 
			<p>Абзац один</p>
			<p>Абзац два</p>
			<p>Абзац три</p>
			<span>Текст, внутри элемента span</span>
		</div>
	</body>
</html>

В этом примере с использованием псевдокласса :last-of-typecss3 мы стилизовали последние абзацы внутри каждого блока.

Результат нашего примера:

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