CSS, Заметки

Пример использования 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>

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

Это первый элемент
Это вротой элемент такого же типа
третий элемент такого типа на с вложенным элементом
Это первый элемент другого типа
четвертый элемент типа Span в диве

Разбор:

Свойство color:purple; применится к каждому первому элементу нового типа, в блоке div.
Цвет поменяли первые элементы <span> <em> <strile>

Пример направленного использования селектора по псевлоклассу :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>

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

 Это первый элемент
Это вротой элемент такого же типа
третий элемент такого типа на с вложенным элементом
Это первый элемент другого типа
четвертый элемент типа Span в диве