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

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

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

Синтаксис

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

Ссылки

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

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

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>
		
	<style>
	
		span:first-child{
		color: orange;			 
		}
		
		span:last-child{
		color: blue;			 
		}
		
		span:only-child{
		color: red;			 
		}
		
	</style>
	
</head>
<body>

	<p>
		<span>Первый дочерний элемент.</span><br>
		<span>3 дочерний элемент.</span><br>	
		<span>Последний дочерний элемент.</span>
	</p>
	
	<p>
		<span>Единственный дочерний элемент.</span>
	</p>
	
</body>
</html>

Пример №1