All selector classes are inserted as classes on the generated list item. For example, if the toc container looks like this:
<div class="toc" data-toc="h2, first-class, second class" data-toc-container=".main">
then the resulting list item will look like this:
<li class="toc-li-0 toc-h2 first-class second-class" data-scroll-init="true"><a href="#toc-1" data-smooth-active="true">Title for first list item</a></li>
This seems reasonable since there's a possibility that you might want to style list items differently based on their sources.
But if you use something like:
data-toc="h2:not(.excluded-class)"
then you'll get:
<li class="toc-li-0 toc-h2 excluded-class" data-scroll-init="true"><a href="#toc-1" data-smooth-active="true">Title for first list item</a></li>
That excluded-class reference shouldn't be carried over, since there shouldn't be any need to reference things that aren't there.
This PR excludes any :not() classes from the list item.
All selector classes are inserted as classes on the generated list item. For example, if the toc container looks like this:
<div class="toc" data-toc="h2, first-class, second class" data-toc-container=".main">
then the resulting list item will look like this:
<li class="toc-li-0 toc-h2 first-class second-class" data-scroll-init="true"><a href="#toc-1" data-smooth-active="true">Title for first list item</a></li>
This seems reasonable since there's a possibility that you might want to style list items differently based on their sources.
But if you use something like:
data-toc="h2:not(.excluded-class)"
then you'll get:
<li class="toc-li-0 toc-h2 excluded-class" data-scroll-init="true"><a href="#toc-1" data-smooth-active="true">Title for first list item</a></li>
That
excluded-class
reference shouldn't be carried over, since there shouldn't be any need to reference things that aren't there.This PR excludes any
:not()
classes from the list item.