JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li> <span></span>

    </li>
    <li class="selected"> <span></span>

    </li>
    <li class="selected"> <span></span>

    </li>
    <li class="selected"> <span></span>

    </li>
    <li> <span></span>

    </li>
</ul>

CSS

li.selected span {
    border-radius: 30px;
}
/* middle children */
 li.selected + li.selected span {
    border-radius: 0px;
}
/* last child */
 li.selected ~ li.selected ~ li.selected span {
    border-radius: 30px;
}
li span {
    border: 1px solid black;
    display: block;
    width: 100px;
    height: 50px;
}
li.selected span {
    background-color: cornflowerblue;
}