Add `.has-children` class to navigation folders and list items

Feature requests
1

Use case or problem

Currently, when working with css to make something like relationship lines, there is no way of making relationship lines that aren’t a bit buggy. If a list item has more than 1 line, for example, it shows a relationship line (which isn’t supposed to do).
Adding a .has-children class to navigation folders and list-items would open up space for more css customization, making it easier to implement relationship lines, custom colours/behaviours based on folder/list content hierarchy, etc.

Proposed solution

In File Explorer folders, it would simply be enough to add a class to .nav-folder, resulting perhaps in something like .nav-folder.has-children. I believe it makes sense since there’s already a class for .nav-folder-children to be able to edit the children, but not for targetting the parent folder.
For lists, adding a .list-item.has-children class would result in the same thing. Since CSS has no :has pseudo-class, it’s impossible to target things based on their content. Having something like this class would be very useful.

Current workaround (optional)

No workaround AFAIK

Related feature requests (optional)

None that I’ve seen

16 Likes
2

For folder, I don’t see the use case. With data-path you can choose only the children of specific folder.
Also, you can do something with .nav-folder[data-path=...] >.nav-folder.... for example.

3

That only works if you want to target a specific folder, but not every folder which has content inside. With a .has-children class, you can target empty folders too with a :not() pseudo-element, for example. And you don’t need to edit snippets for it, it can just be inside a theme’s css, or available as a snippet which you just toggle and forget about.

4

Oh yeah, now I understand the idea. It can be pretty cool for theme, yes !

1 Like