: to all children except: first child

Question

I have horizontal navigation. I am trying to separate each nav element with "|" (pipe) using only css.

HTML

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
    <li>Fifth</li>
</ul

Now it looks like

First   Second   Third   Fourth   Fifth

I want it to look like

First | Second | Third | Fourth | Fifth

I can use css to put "|" before each<li>

li:before {
    content:"|";
}

As always, the result

|  First | Second | Third | Fourth | Fifth

How can I do this without adding "|" to the first element?

Answer 1

You can use the :notpseudo-class:

li:not(:first-child):before {
  content: "|";
}

ul {
  display: flex;
  list-style: none;
}
li:not(:first-child):before {
  content: "|";
  padding: 5px;
}

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
  <li>Fifth</li>
</ul>

Run codeHide result

Answer 2

You can use the nth-child selector to target all elements after the first

li:nth-child(n+2):before {
  /* ... */
}

Answer 3

.

li:before:first-child {
    content: none;
}

, .

Answer 4

:)

li {
  display: inline-block
}
li + li:before {
  content: '|';
}

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
  <li>Fifth</li>
</ul>

Hide result