How to Select All Child Elements Except the Last One

Sometimes, you may need to select all the child elements except the last element. It’s quite easy to do this using the :not and :last-child pseudo-classes.

The :not pseudo-class specifies elements that do not match a list of selectors and the :last-child selects the element if it is the last child among the other elements.

In our examples, we’ll use the following syntax:

:not(:last-child) {
  /* styles */
}

Create HTML

Use a <nav> element to define a block of navigation links.
Use the <a> tag inside <nav> and add links to the elements of the navigation menu with the href attribute.

<nav> 
  <a href="https://www.w3docs.com/learn-html.html">Learn HTML</a> 
  <a href="https://www.w3docs.com/learn-css.html">Learn CSS</a> 
  <a href="https://www.w3docs.com/learn-git.html">Learn Git</a> 
  <a href="https://www.w3docs.com/learn-javascript.html">Learn Javascript</a> 
  <a href="https://www.w3docs.com/learn-php.html">Learn PHP</a>
  <a href="https://www.w3docs.com/snippets">Snippets</a> 
</nav>

Add CSS

Specify the margin property for the <nav> element.
Style and position <a> elements inside <nav> using the text-transform, text-decoration, color, font-family, text-align, display and other properties.
Use the :not and :last-child pseudo-classes for the <a> elements inside <nav> and mention the style that should not be applied to the last child element.

nav {
  margin: 30px;
}

nav a {
  text-transform: capitalize;
  text-decoration: none;
  color: rgba(60, 60, 60);
  font-family: sans-serif;
  padding: 5px 5px;
  margin-top: 20px;
  width: 140px;
  text-align: center;
  display: inline-block;
}

nav a:not(:last-child) {
  border-right: 5px solid #193fe6;
}

Let’s see the full code.

Example of selecting all child elements except the last one:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      nav {
        margin: 30px;
      }
      nav a {
        text-transform: capitalize;
        text-decoration: none;
        color: rgba(60, 60, 60);
        font-family: sans-serif;
        padding: 5px 5px;
        margin-top: 20px;
        width: 140px;
        text-align: center;
        display: inline-block;
      }
      nav a:not(:last-child) {
        border-right: 5px solid #193fe6;
      }
    </style>
  </head>
  <body>
    <nav>
      <a href="https://www.w3docs.com/learn-html.html">Learn HTML</a>
      <a href="https://www.w3docs.com/learn-css.html">Learn CSS</a>
      <a href="https://www.w3docs.com/learn-git.html">Learn Git</a>
      <a href="https://www.w3docs.com/learn-javascript.html">Learn Javascript</a>
      <a href="https://www.w3docs.com/learn-php.html">Learn PHP</a>
      <a href="https://www.w3docs.com/snippets">Snippets</a>
    </nav>
  </body>
</html>

Try it Yourself »

Result

So, we have created a navigation menu with elements separated by the right border except for the last element.

Let’s see another navigation menu, where we use some CSS properties on all child elements except the last one.

Example of using CSS properties on all child elements except the last one:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      nav {
        margin: 30px;
      }
      nav a {
        text-transform: capitalize;
        text-decoration: none;
        color: rgba(60, 60, 60);
        font-family: sans-serif;
        padding: 5px 5px;
        margin-top: 20px;
        width: 140px;
        text-align: center;
        display: inline-block;
        border: 1px solid #000000;
        border-radius: 10px;
      }
      nav a:not(:last-child) {
        background-color: #a2d4eb;
      }
    </style>
  </head>
  <body>
    <nav>
      <a href="https://www.w3docs.com/learn-html.html">Learn HTML</a>
      <a href="https://www.w3docs.com/learn-css.html">Learn CSS</a>
      <a href="https://www.w3docs.com/learn-git.html">Learn Git</a>
      <a href="https://www.w3docs.com/learn-javascript.html">Learn Javascript</a>
      <a href="https://www.w3docs.com/learn-php.html">Learn PHP</a>
      <a href="https://www.w3docs.com/snippets">Snippets</a>
    </nav>
  </body>
</html>