JSFiddle - React, Tailwind, and code Playground

HTML

<section>
    <summary>#firstPanel :nth-child(n+2)</summary>
    <div id="firstPanel">
        <a>First</a>
        <a>Second</a>
        <a>Third</a>
        <a>Fourth</a>
    </div>
</section>
        
<section>
    <summary>#secondPanel > a + a</summary>
    <div id="secondPanel">
        <a>First</a>
        <a>Second</a>
        <a>Third</a>
        <a>Fourth</a>
    </div>
</section>
        
<section>
    <summary>#thirdPanel :not(:first-child)</summary>
    <div id="thirdPanel">
        <a>First</a>
        <a>Second</a>
        <a>Third</a>
        <a>Fourth</a>
    </div>
</section>

<section>
    <summary>(#fourthPanel > a) and (#fourthPanel > a:first-child)</summary>
    <div id="fourthPanel">
        <a>First</a>
        <a>Second</a>
        <a>Third</a>
        <a>Fourth</a>
    </div>
</section>

CSS

/* CSS Selectors to hide all but first child element */
#firstPanel :nth-child(n+2) {
    color: #BBB;
}
#secondPanel > a + a {
    color: #BBB;
}
#thirdPanel :not(:first-child) {
    color: #BBB;
}
#fourthPanel > a {
    color: #BBB;
}
#fourthPanel > a:first-child {
    color: #000;
}


/* Page styles */
body {
    font-size: 14px;
    font-family: Consolas, Menlo, Monaco, 'Courier New', monospace, serif;
}
summary {
    font-weight: bold;
}
a {
    font-color: #AAA;
}
section {
    padding: 5px;
    margin: 10px 0;
}
section > div {
    margin: 5px 0;
}