Обложка канала

Senior Frontend - javascript, html, css

20191 @seniorFront

Senior Front - канал для front-end программистов, здесь есть много всего про CSS3, Javascript, Html5, Angular, React, видео / статьи / курсы

Senior Frontend - javascript, html, css

4 года назад
Открыть в
Псевдоклассы группы 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; } 👉 @seniorFront