how to choose the first child element from list-CodePudding

How to choose the first child element <a href="/delivery">Доставка и оплата</a> without using [href="/delivery"]

 <ul >
    <li><a  href="/delivery">Доставка и оплата</a></li>
    <li><a  href="/reviews">Отзывы</a></li>
    <li><a  href="/cook">Рецепты</a></li>

I already tried ul:nth-child(1) .header-nav__list:nth-child(1)

CodePudding user response：

using :first-child selector. pay attention this relates to first immediate child, so that's why it goes with the li.

var elem = document.querySelector(".header-nav__list li:first-child a");
elem.style.background = "red"

<ul >
  <li><a  href="/delivery">Доставка и оплата</a></li>
  <li><a  href="/reviews">Отзывы</a></li>
  <li><a  href="/cook">Рецепты</a></li>
</ul>