Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь

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

Дата:8.12.15 в 11:52
Справочник: 

Характеристики свойства

В каких браузерах работает?

9.0+ 1.0+ 9.6+ 3.0+ 1.0+ 1.0 1.0

В каких версиях CSS используется?

CSS 1 CSS 2 CSS 2.1 CSS 3
- - - +

Для чего используется?

Принцип действия этого псевдокласса абсолютно идентичен :nth-child, однако его следует применять только в тех случаях, когда рассматриваемый элемент является единственным дочерним тегом у определенного родителя. Таким образом можно констатировать, что это частный случай для псевдоклассов группы child. Стоит отметить, что указание :only-child приравнивается к :nth-child(1), :nth-last-child(1), а также :first-child и :last-child.

Как правильно задавать?

селектор:only-child  { ... }

Какие могут быть значения?

Нет.

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>only-child</title>
  <style>
   ul{
	display:block;
	margin:30px auto;
	width:300px;
   }
   li{
	display:inline-block;
	vertical-align:top;
	width:300px;
	height:180px;
	text-align:center;
	padding-top:120px;
	color:#fff;
	font-size:60px;
   }
   li:only-child{
	border-radius:50%;
	background:#4757c8;
   }
 
  </style>
 </head>
 <body>
  <ul>
	<li>only-child</li>
  </ul>
 </body>
</html>

По итогу получаем

only-child

Оценка: 
Оценок: 2 (средняя 5 из 5)
Тип CSS свойства: 
Понравилась статья? Расскажите о ней друзьям: