Пример использования css псевдокласса :first-of-type

Рассмотрим пример использования универсального селектора по псевдоклассу :first-of-type

<style>
div :first-of-type{
  color:purple;
}
</style>

Верстка:

<div>
 <span>Это первый элемент</span>
 <span>Это вротой элемент такого же типа</span>
 <span>третий элемент такого типа на с <em>вложенным элементом</em></span>
 <strike>Это первый элемент другого типа</strike>
 <span>четвертый элемент типа Span в диве</span>
 </div>

Как это сработает:

Разбор:

Пример направленного использования селектора по псевлоклассу :first-of-type

 <style>
 span:first-of-type{
   background: purple;
   color: white;
 }
 </style>

<div>
 <span>Это первый элемент</span>
 <span>Это вротой элемент такого же типа</span>
 <span>третий элемент такого типа на с <em>вложенным элементом</em></span>
 <strike>Это первый элемент другого типа</strike>
 <span>четвертый элемент типа Span в диве</span>
</div>

Как это сработает: