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

CSS селекторы

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

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

Отличие псевдокласса :first-of-typecss3 от :first-child заключается в том, что он выбирает первый дочерний элемент определенного типа, а не первый дочерний элемент этого типа.

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

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

CSS синтаксис:

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

Версия CSS

CSS3

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

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

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

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

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

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

Кажется, вы используете блокировщик рекламы :(

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.