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

Solution 1:

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: '| ';
}

Solution 2:

Every things seems correct. You might want to use the following css selector instead of what you used.

ul > li:not(:last-child):after

Solution 3:

For me it work fine

&:not(:last-child){
            text-transform: uppercase;
        }

Solution 4:

Your example as written works perfectly in Chrome 11 for me. Perhaps your browser just doesn't support the :not() selector?

You may need to use JavaScript or similar to accomplish this cross-browser. jQuery implements :not() in its selector API.

Solution 5:

An example using CSS

  ul li:not(:last-child){
        border-right: 1px solid rgba(153, 151, 151, 0.75);
    }