How to get rid of right margin in last item of navigation bar using last child

user_11529968 0
Viewed 57

I have created a navigation bar and have added margin-right to all the items.

However, when I try to get rid of the margin right in the last child of the navigation item "contact", it won't disappear.

.navbar {
  text-decoration: none;
  margin-bottom: 150px;
}

.nav-item {
  display: inline-block;
  text-decoration: none;
}

.nav-list {
  text-align: center;
}

.nav-list li a {
  text-decoration: none;
  margin-right: 100px;
}

.nav-list ul li a:last-child {
  margin-right: 0;
}

.nav-list li a:active {
  color: #000;
}

.nav-list li a:visited {
  color: #000;
}
<div>
  <nav class="navbar">
    <ul class="nav-list">
      <li class="nav-item"><a href="#home">Home</li></a>
        <li class="nav-item"><a href="#about">About</li></a>
          <li class="nav-item"><a href="#work">Work</li></a>
            <li class="nav-item"><a href="#services">Services</li></a>
              <li class="nav-item"><a href="#contact">Contact</li></a>
    </ul>
  </nav>
</div>

Here is my code pen: https://codepen.io/derrickogole/pen/rNxbaaK

Is there a way to do this without adding an additional class to contact?

pseudo-class css html
1 Answers

Use the :last-child psuedo-class.

.nav-item:last-child a {
  margin: 0;
}

See it here:

.navbar {
  text-decoration: none;
  margin-bottom: 150px;
}

.nav-item {
  display: inline-block;
  text-decoration: none;
}

.nav-list {
  text-align: center;
}

.nav-list li a {
  text-decoration: none;
  margin-right: 100px;
}

.nav-list ul li a:last-child {
  margin-right: 0;
}

.nav-list li a:active {
  color: #000;
}

.nav-list li a:visited {
  color: #000;
}

.nav-item:last-child a {
  margin: 0;
}
<div>
  <nav class="navbar">
    <ul class="nav-list">
      <li class="nav-item"><a href="#home">Home</a></li>
      <li class="nav-item"><a href="#about">About</a></li>
      <li class="nav-item"><a href="#work">Work</a></li>
      <li class="nav-item"><a href="#services">Services</a></li>
      <li class="nav-item"><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</div>

Additionally, your markup was invalid due to closing </li> before </a>. a is nested in li so it needs to be closed first.

user_164963570
Related