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

CSS селекторы

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

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

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

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

CSS синтаксис:

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

Версия CSS

CSS3

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

<!DOCTYPE html>
<html>
<head>
	<title>Псевдокласс :only-of-type</title>
<style type = "text/css"> 
.img:only-of-type {
border: 3px solid orange; 
}
img {
width: 100px; 
height: 100px; 
}
</style>
</head>
	<body>
		<div>
			<p>Блок, который подподает под условия селектора <b>:only-of-type</b></p>
			<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-of-typecss3 от :only-childcss3, заключается в том, что при использовании :only-of-typecss3 учитывается количество элементов одного типа, а при использовании :only-childcss3 количество элементов (независимо каких типов).

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

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

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