JSFiddle - React, Tailwind, and code Playground

HTML

<p>The oranges elements are the previous sibling li selected using li:nth-child(-n+4)</p>
<div id="list">
    <span>1</span>
    <p>2</p>
    <p>3</p>
    <div>4</div>
    <div>5</div>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
</div>

CSS

#list > * {
    display: inline-block;
    padding: 20px 28px;
    margin-right: 5px;
    border: 1px solid #bbb;
    background: #ddd;
    color: #444;
    margin: 0.4em 0;
}

#list :nth-child(-n+4) {
    color: #600b90;
    border: 1px dashed red;
    background: orange;
}