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

AMV спросил: 12 мая 2018 в 05:04 в: css

Я новичок в этом продвинутом материале 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>

css wordpress css-selectors

2 ответа

Есть решение

git-e-up ответил: 12 мая 2018 в 05:09

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

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

AMV ответил: 12 мая 2018 в 05:11

Ах хорошо! Я помещал: первый тип в неправильном месте. У меня был: .jetpack-social-widget-item a: first-of-type {Спасибо! :)

git-e-up ответил: 12 мая 2018 в 05:15

Да, вы хотите применить :first-of-type к родительскому, поскольку это первый <li>. То, как вы это сделали, применимо к первому тегу <a> в каждом <li>.

NAM KIM ответил: 12 мая 2018 в 07:52

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

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