Matt Clarkson Matt Clarkson - 4 months ago 22
CSS Question

CSS :not(:last-child):after selector

I have a list of elements:

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>


And styled like this:

ul {
list-style-type: none;
text-align: center;
}

li {
display: inline;
}

li:not(:last-child):after {
content:' |';
}


Outputs
One | Two | Three | Four | Five |
instead of
One | Two | Three | Four | Five


Anyone know how to CSS select all but the last element?

You can see the definition of the
:not()
selector here

Answer

If it's a problem with the not selector, you can set all of them and override the last one

li:after
{
  content: ' |';
}
li:last-child:after
{
  content: '';
}

or if you can use before, no need for last-child

li+li:before
{
  content: '| ';
}