Псевдоклассы группы type

1 мин
Автор PINTA IT
Псевдоклассы группы type
Псевдоклассы группы type

Псевдоклассы -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;
 }

Похожие публикации