Псевдоклассы -of-type позволяют выбирать из группы элементы одного уровня вложенности на основании их порядка:
:first-of-type — первый;
:nth-of-type(n-число) — каждый n-й элемент;
:last-of-type — последний;
:nth-last-of-type(n-число) — каждый n-й элемент с отсчётом «с конца».
Допустим, мы имеем такую HTML-разметку:
<ol class="list">
<li>Default означает «по умолчанию», цвет этого пункта без изменений.</li>
<li class="list__item">Амбары красят в красный цвет, потому что красная краска...</li>
<li>Говорят, в СССР красили подъезды в зелёный цвет, потому что осталось...</li>
<li class="list__item">В Катаре красят асфальт в синий цвет, чтобы он не перегревался.</li>
</ol>
И, допустим, нам нужно задать цвет текста каждого из пунктов, основываясь на их порядке.
Этот пункт не имеет класса, всё, что мы о нём знаем что он третий li по порядку:
li:nth-of-type(3) {
color: #49A16C;
}