JSFiddle - React, Tailwind, and code Playground

by neoswf

HTML

<div class="topNavigation">
<ul>
    <li class="first-child current">
        <a href="#">home</a>
    </li>
    <li>
        <a href="#">services</a>
    </li>
    <li class="last-child">
        <a href="#">blog</a>
    </li>
</ul>
</div>

CSS

/* weight: (1 class) + (3 elements) = 13 */
.topNavigation ul li a { 
color: #666;
text-decoration: none;
display: block;
font-size: 28px;
margin: 5px 20px;
}

/*for both rules: (1 class + [1 pseudo class or 1 class]) + (3 elements) = 23 */
.topNavigation ul li:first-child a, .topNavigation ul li.first-child a {
margin-left: 0;
}
.topNavigation ul li:last-child a, .topNavigation ul li.last-child a {
margin-right: 0;
}