Попытка выбрать конкретную ссылку, которая не имеет своего собственного класса

Question

Я новичок в этом продвинутом CSS-материале и пытаюсь выяснить, есть ли способ выбрать только первый тег в приведенном ниже коде.Каждая ссылка находится внутри элемента div, и все они имеют один и тот же класс, поэтому, если я использую CSS для .jetpack-social-widget-item a, он применяется ко всем из них.Я просто хочу сделать первый.Возможно ли это без редактирования кода и добавления в него класса вручную?Это тема, поэтому я бы предпочел не редактировать код.

<ul class="jetpack-social-widget-list size-large">
<li class="jetpack-social-widget-item"><a href="#" target="_blank">Facebook</a>
                        </li>
<li class="jetpack-social-widget-item"><a href="#" target="_blank">Twitter</a>
                        </li>
<li class="jetpack-social-widget-item"><a href="http://instagram.com" target="_blank">Instagram</a>
                        </li>
</ul>

Answer 1

Вы можете сделать это различными способами.Вот пара:

.jetpack-social-widget-item:first-child a {
    color: red;
}

.jetpack-social-widget-item:nth-child(1) a {
    color: red;
}

Answer 2

.jetpack-social-widget-item:first-of-type a {
  color: red;
}

Более подробные примеры см. Здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type