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

Справочник:

Псевдокласс

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

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


9.0+	1.0+	9.6+	3.1+	3.5+	2.1	2.0

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

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

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

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

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

селектор:only-of-type { … }

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

Нет.

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>only-of-type</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:50px;
   }
   li:only-of-type{
	border-radius:50%;
	background:#4757c8;
   }
 
  </style>
 </head>
 <body>
  <ul>
	<li>only-of-type</li>
  </ul>
 </body>
</html>

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

Тип CSS свойства:

Псевдоклассы