Matt Clarkson Matt Clarkson - 1 year ago 227
CSS Question

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

I have a list of elements:


And styled like this:

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

li {
display: inline;

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

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
selector here

Answer Source

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

  content: ' |';
  content: '';

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

  content: '| ';
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download