Auto-Format to set styles for each level valid for the whole list

What I want is to get a list that looks like that…
withhout the need to format each line individually.

For a first step I thought about something simple as ->

  • every line that has subitems gets the MH header format
  • every line that has no subitem gets no MH format (stays a normal entry)

This way “leaves” can be easily distinguished from “parents”.

Maybe there is a css-hack that can do this? I have looked at the tipps here:

But I am not good at css and didn’t see a way to format parents and leaves differently.

Ist this already possible or a feature request?
Could someone give me a hint/example if this is possible with a CSS hack?


I just realized, that this probably will be a feature request because in most of the cases you don’t want this behaviour for ALL of your lists. I assume that you can’t activate some style only for specific lists via css at the moment - or can you?

But I am still interested in an excample to do this with css if you habe one.


Hello Chris,

Thanks for your comments!

Talking about heading customizations you’re asking about, i.e. styling top-level headings and subheadings differently - it is quite possible. We are considering to add a separate ‘document’ mode for lists at some time in the future, as well as more advanced customizations, templates and alike.

Recently we’ve implemented a possibility to style lists depending on tags specified in the lists. The corresponding discussion is here: Using tags to activate/deactivate CSS customizations on whole lists

Let’s say you have a list tagged #document. Then you can use CSS rules like below:

.list_tag_document ul.topLevel li.task {
  font-size: 26px;

.list_tag_document ul.topLevel ul li.task {
  font-size: 20px;

.list_tag_document ul.topLevel ul ul li.task {
  font-size: 14px;

Until we’ve implemented better customization approach, this may be a way to go :slight_smile:
Please let me know if it works for you.

All the best,

and thanks for your reply :slight_smile:

It’s great, that we can change CSS depending on the list tags.

I only need one thing to make this work…
Your example formats the list entries in regards to their indentation. Level 1 is very big, Level 2 is only big and Level 3 is “not so big”.
I want to format the “leaves” different to the “parents”. If an item has sub-items it should look different to items that havn’t.

What I want to achieve is similar to folders and files. Folders contain other folders or files. Folders are “containers”, the files are “the information”. I hope this pictures explains it better (parents are yellow, leaves are white):

Is it possible to distinguish between “parents” and “leaves”?


Hi Chris,

Understood. There is an additional leafItem CSS class for nodes which are final, regardless on their level.

So probably a rule like this should work for you:

.list_tag_document ul.topLevel  li.task.leafItem {
  font-size: 14px;

Please check it out :slight_smile:

1 Like

Great, I am now playing with the possibilities :+1:

At the moment I tried a combination like this …

.list_tag_outline ul.topLevel li.task {
  font-size: 20px;
  color: dimgrey;

.list_tag_outline ul.topLevel ul li.task {
  font-size: 20px;
  color: grey

.list_tag_outline ul.topLevel  li.task.leafItem {
  font-size: 14px;
  color: white;

So far, I am happy with the result.
Thanks for your help.