CSS псевдокласс :only-childcss3

CSS селекторы

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

Псевдокласс :only-childcss3 выбирает каждый элемент, который является единственным дочерним элементом своего родительского элемента (нет других элементов).

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

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

CSS синтаксис:

:only-child {
блок объявлений;
}

Версия CSS

CSS3

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

<!DOCTYPE html>
<html>
<head>
	<title>Псевдокласс :only-child</title>
<style type = "text/css"> 
.img:only-child {
border: 3px solid orange; 
}
img {
width: 100px; 
height: 100px; 
}
</style>
</head>
	<body>
		<div>
			<img src = "nich.jpg" alt = "nich">
		</div>
		<hr>
		<div>
			<img src = "nich.jpg" alt = "nich">
			<img src = "nich.jpg" alt = "nich">
		</div>
	</body>
</html> 

В данном примере, только в первом блоке (родительский элемент <div>) содержится одно изображение (нет других элементов), которое и было стилизовано.

Главное отличие псевдокласса :only-childcss3 от псевдокласса :only-of-typecss3, заключается в том, что при использовании :only-of-typecss3 учитывается количество элементов одного типа, а при использовании :only-childcss3 количество элементов (независимо каких типов).

Если мы добавим в наш пример к первому блоку любой элемент, например, абзац (элемент - <p>), тогда ни одно изображение не будет стилизовано, так как не будет подходящих условий, в таком случае нам необходимо будет использовать псевдокласс :only-of-typecss3.

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

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