I need help selecting the element that comes before and after li.active.
Here is the HTML:
<ul class="inline avancement">
<li>Réception des réponses</li>
<li class="active">Achat</li>
<li>Evaluation</li>
</ul>
And the corresponding CSS:
ul.avancement li{
padding-right:20px;
padding-left:10px;
margin-left:-4px;
height:37px;
line-height:37px;
}
li.active ~ li{
background:url(../img/delimiter_step_left.png) right top no-repeat;
background-color:#ff0000;
}
li.active + li{
background:url(../img/delimiter_step_left.png) right top no-repeat;
background-color:#999999;
}
ul.avancement li{
background:url(../img/delimiter_step.png) right top no-repeat;
background-color:#999999;
color:white;
}
ul.avancement li.active{
background:url(../img/delimiter_step_actif.png) right top no-repeat;
background-color:#ff0000;
}
ul.avancement li:last-child{
background:none;
background-color:#999999;
}
However, it seems that the code is not working as expected!
After checking the result, I noticed that the red step is not appearing before the active step. Can someone please point out what's wrong? Thank you.