Псевдокласс :first-of-type | Справочник CSS
http://belarusweb.net
Основы создания сайтов

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

Описание

Псевдокласс :first-of-type (от англ. first of typeпервый указанного типа) позволяет выбрать первые дочерние элементы требуемого типа (порядковый номер n=1) относительно своего родительского элемента, но без учета (подсчета) любых других видов дочерних элементов. Например, если задано правило span:first-of-type {блок объявлений}, то в документе будут выбраны все первые дочерние элементы 'span' относительно своих родительских элементов, но с учетом того, что другие дочерние элементы как бы отсутствуют и в расчет не берутся.

Селектор псевдоклассов напоминает селектор классов, но в отличие от классов, псевдоклассы в разметке html-документа не указываются и отделяются от указанного в селекторе элемента двоеточием ':'. При этом выбираются элементы необходимого типа, которые соответствуют требованиям указанного в селекторе псевдокласса.

Синтаксис

<селектор>:first-of-type {блок объявлений}

Ссылки

Примеры

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>
	
	<style>
		
		/* Выбираем первые дочерние элементы 'span'. */ 
		/* При этом не считаем остальные дочерние элементы. */
		span:first-of-type{
		color: red;			 
		}
		
	</style>
	
</head>
<body>

	<p>
		<!-- !!! Элементы 'br' и 'b' не считаем !!! -->
		<span>1 дочерний элемент 'span'.</span><br>
		<b>Меня не считаем, т.к. я не 'span'!</b><br>
		<span>2 дочерний элемент 'span'.</span><br>	
		<span>3 дочерний элемент 'span'.</span>
	</p>
	
</body>
</html>

Пример №1