JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="alist">
       <li class="list-item">
            <div class="some-class">stuff</div>
            <div class="another-class">apple</div>
            <div class="another-class">banana</div>
            <div class="another-class">cake</div>
       </li>
       <li class="list-item">
            <div class="some-class">stuff</div>
            <div class="another-class">airport</div>
            <div class="another-class">bus stop</div>
       </li>
       <li class="list-item">
            <div class="some-class">stuff</div>
       </li>
    </ul>

CSS

.list-item {
    width: 250px;
    background: red;
    margin: 20px;
}

.list-item > div.another-class {
    background: green;
}

.list-item > div.another-class:first-child {
    background: blue;
}