Senior Frontend - javascript, html, css(@seniorFront). Псевдоклассы группы child При помощи этих псевдоклассов можно удобно выбирать элементы по их поряд

Псевдоклассы группы child При помощи этих псевдоклассов можно удобно выбирать элементы по их порядковому номеру внутри родительского элемента. Пример: Раскрасим в разные цвета фон у пунктов списка. Обратите внимание, что у всех пунктов списка одинаковые классы, а значит, мы не сможем обратиться к отдельным пунктам при помощи селектора по классу.

 <ul class="list">
   <li class="list-item">Тёмный синевато-зелёный</li>
   <li class="list-item">Блестящий зелёный</li>
   <li class="list-item">Блестящий зеленовато-желтый</li>
   <li class="list-item">Блестящий зеленовато-желтый</li>
   <li class="list-item">Блестящий зеленовато-желтый</li>
   <li class="list-item">Розовый щербет</li>
   <li class="list-item">Умеренный оранжевый</li>
 </ul>

У всех пунктов списка будет жёлтый фон:

 .list-item {
   background-color: #FFD829;
 }

У первого пункта списка будет тёмно-зелёный фон:

 .list-item:first-child {
   background-color: #064236;
 }

У последнего пункта списка будет оранжевый фон:

 .list-item:last-child {
   background-color: #ED6742;
 }

У второго пункта списка будет зелёный фон:

 .list-item:nth-child(2) {
   background-color: #49A16C;
 }

У предпоследнего пункта списка будет розовый фон:

 .list-item:nth-last-child(2) {
   background-color: #F498AD;
 }

👉 @seniorFront