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

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

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

Синтаксис

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

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/selectors-4/#the-only-of-type-pseudo

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/:only-of-type

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>
	
	<style>
		
		/* Применяем только, если «em» единственный дочерний */ 
		/* элемент данного типа. При этом могут присутствовать */ 
		/* дочерние элементы других видов. */
		em:only-of-type{
		color: orange;			 
		}
		
	</style>
	
</head>
<body>
	
	<p>
		<!-- !!! Элементы «br» и «b» не считаем !!! -->
		<em>Единственный дочерний элемент «em».</em><br>
		<b>Я &ndash; элемент «b».</b><br>
	</p>
	
</body>
</html>

Пример №1