How to select the first <li> in an unordered list? : <p>I,m a beginner in programming. I'm trying to build a portfolio from scratch. In my navbar I want to select the first link to color it differently. Can anyone tell me the best possible way to select the first link from the unordered list?</p>

<pre><code>&lt;ul id="main-nav"&gt;
    &lt;li&gt;
      &lt;a href="#" class="nav-links"&gt;
        &lt;i class="fas fa-home"&gt;&lt;/i&gt;Home&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#about" class="nav-links"&gt;&lt;i class="fas fa-info-circle"&gt;&lt;/i&gt;About Me&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#portfolio" class="nav-links"&gt;&lt;i class="fas fa-image"&gt;&lt;/i&gt;Portfolio&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#contact" class="nav-links"&gt;&lt;i class="fas fa-envelope"&gt;&lt;/i&gt;Contact&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
</code></pre>
