Why selecting the first child inside <ul> is not working while the text is inside the <a&gt-CodePudding

I'm wondering why I cannot select the first child of my ul. But It works when I move the text "my title" to the list and not the link. Instead it select all of them.

<div >
  <ul>
    <li> <a href="#"> myfirstlink</a> </li>
   <li> <a href="#"> mysecondlink</a> </li>
</ul>
</div>


.nav-bar-inner-items{
    ul{
        display: flex;
        align-items: center;
        text-transform: uppercase;
        margin:0;
        padding:0;
      
        :first-child{
               background:red;
           }
      li{
        margin: 0 13px;
      }

  }}

https://codepen.io/aina-raharison/pen/BamzJPE

Thanks

CodePudding user response：

Your scss is wrong - have a look below:

.nav-bar-inner-items {
  ul {
    display: flex;
    align-items: center;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    li {
      margin: 0 13px;
      &:first-child { // <--- first child is the <li> 
        background: red;
      }
    }
  }
}

CodePudding user response：

The selector should be in

and add an & before : (if using scss as i saw in codepen).

.nav-bar-inner-items{
    ul{
        display: flex;
        align-items: center;
        text-transform: uppercase;
        margin:0;
        padding:0;
      
        
      li{
        margin: 0 13px;
        
        &:first-child{
             background:red;
         }
      }

  }}