JSFiddle - React, Tailwind, and code Playground

by thirtydot

HTML

<div id="nav-primary" class="nav"><nav>
    <div class="menu">
        <ul>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
        </ul>
    </div>
</nav></div><!--#nav-primary-->

CSS

ul li { display: inline-block; margin-top: 10px; }

/* equivalent to li:nth-child(1) */
#nav-primary ul li:first-child a {
    border-top: 5px solid red;
}
/* equivalent to li:nth-child(2) */
#nav-primary ul li:first-child + li a {
    border-top: 5px solid blue;
}
/* equivalent to li:nth-child(3) */
#nav-primary ul li:first-child + li + li a {
    border-top: 5px solid green;
}