nthchild nested problem property that just apply on the firt element - html

Question

I have a problem with the nth-child proprety.
The problem is on #subnav element. I don't understand why nth-child doesn't work (suppose to change border color and width).
Here my problem and code :
<div class="container">
<!-- subnav -->
<ul id="subnav">
<li><span>Philosophie</span></li>
<li><span>Musiciens</span></li>
<li><span>Programmes</span></li>
<li><span>Médias</span></li>
<li><span>Agenda</span></li>
</ul>
and the sass
.container {
#subnav {
margin-top: 2rem;
display: flex;
justify-content: space-evenly;
li {
padding-bottom: 0.5rem;
border-bottom: 4px 0.5rem;
border-color: solid #f36e52;
}
a {
color: #fff;
text-decoration: none;
span:nth-child(1):after, span:nth-child(2):after{
content: '';
height: 4px;
text-align: right;
float:right;
margin-top: 0.3rem;
}
span:nth-child(1):after {
width: 30%;
background-color: #f36e52;
}
span:nth-child(2):after {
content: '';
width: 100%!important;
background-color: #fff555;
}
}
}
}
I would like to change the width and also the color of each links, but it only take the attributes of span:nth-child(1).
Any idea ? thanks for your help

Answer 1

They all spans are first-child (or nth-child(1)), you should use nth-child on li to select correctly.
And to change the color of links you should write color attribute directly on span not :after.
The final code should be like below:
#subnav {
li {
&:nth-child(1) {
span {
color: red;
&:after {
content: '';
/*some code*/
}
}
}
&:nth-child(2) {
span {
color: green;
&:after {
content: '';
/*some code*/
}
}
}
}
}