Выделить все, кроме последнего элемента списка

Question

У меня есть список tags Я хочу показывать по горизонтали. Теперь для каждого <li>, но последний, я хочу добавить , после пункта.

Теперь, я могу сделать это, конечно:

ul.tags { 
    list-style: none; 
} 

ul.tags > li { 
    display: inline; 
} 

ul.tags > li:after { 
    content: ", "; 
} 

ul.tags > li:last-of-type:after { 
    content: ""; 
} 

Теперь я думал об объединении двух последних правил, как:

ul.tags > li:not(ul.tags > li:last-of-type):after { 
    content: ", "; 
} 

Но это не работает. Как я могу выбрать все , но последние<li>?

Answer 1

Все, что вам нужно, это просто :last-of-type в пределах :not (как в приведенном ниже фрагменте). :not accepts only simple selectors как аргумент.

Ниже то, что specifications говорить о простых селекторов:

Простой селектор либо селектор типа, универсальный селектор, селектор атрибута, селектор класса, селектор ID, или псевдо-класса.

ul.tags > li:not(:last-of-type):after { 
 
    content: ", "; 
 
} 
 
ul.tags { 
 
    list-style: none; 
 
} 
 
ul.tags > li { 
 
    display: inline; 
 
}

<ul class='tags'> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
</ul>