How to select the first
in an unordered list?

Question

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?

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

I know you said you're a beginner but you need to learn to use this site properly. Including checking for existing answers. — Serg Chernata, Sep 13 '18 at 14:31

score 7 · Accepted Answer · answered Sep 13 '18 at 14:32

7

Keep in mind that to recolor the link, you want to not only select the first <li> element, but also the <a> inside it (as links don't automatically inherit the color of their parent element).

li:first-child a {
  color: red;
}

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

answered Sep 13 '18 at 14:32

Jon Uleis

17,693
2
33
42

they automatically inherit the color BUT they may have a default color defined by another style or by the browser .. and selecting the `a` will not change the color in all the cases, it will do only if there is no more specific rule that this – Temani Afif Sep 13 '18 at 14:48
@TemaniAfif The [W3C spec for HTML5 default styles](https://www.w3.org/TR/html5/rendering.html#non-replaced-elements-phrasing-content) has link colors specified, therefore there aren't any modern browsers where `a` links will automatically inherit the color of their parent without an additional rule (like `a { color: inherit }`). – Jon Uleis Sep 13 '18 at 14:54
1

they will always inherit but that rule will override .. it's false to say they will not inherit. They will BUT we need to consider the default rule applied ... if you check the computed tab in the dev tools you will see that the color is inherited then overrided but the default style. color are always inherited but of course we need to check other rules to decide the color to use – Temani Afif Sep 13 '18 at 15:02
@TemaniAfif I don't see how it's false to say that links don't automatically inherit the color of their parent. There are no modern browsers where you can alter a link's color by only targeting its parent, due to the default browser styles in the W3C spec. I'm talking in practical terms that are helpful to writing working CSS, and you're arguing semantics and making a moot point. – Jon Uleis Sep 13 '18 at 15:07

Electron · Answer 2 · 2018-09-13T14:43:09.813

CSS :first-of-type Selector

The :first-of-type selector matches every element that is the first child, of a particular type, of its parent.

Example:

.myNav {
  width: 200px;
}
ul {
  list-style: none;
}
li {
  padding: 5px;
  border-radius: 6px;
  margin-top: 4px;
}
li:hover {
  background: red;
  color: #fff;
  cursor: pointer;
}
li:first-of-type {
  background: red;
  color: #fff;
}

<div class="myNav">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
</div>

How to select the first in an unordered list?

2 Answers2

CSS :first-of-type Selector

How to select the first
in an unordered list?