Есть желание присоединиться к интересным IT проектам? Смотри открытые вакансии.

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 селекторы
×

Кажется, вы используете блокировщик рекламы :(

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.