Style only first task in type within group

[officialariacat]

I'd like my task view to show all my incomplete tasks (for today or earlier), plus any that were done today, and then in a separate block any future/scheduled tasks.
At the moment it just puts the done tasks at the bottom of the first list, which is okay, but I'd like to include a small spacer between the incomplete and done tasks (that isn't as big as the gap between the current tasks and future tasks headings).

I can accomplish this using a border-top, but I can't make it specific enough. I assume it uses a combination of :is(first-child) and [data-task-done="today"], but I'm not familiar with CSS, so I'm not sure how to combine these properly. I'd like it so the border only goes on the first done task, not all of them (and not above the very first task in the list either).

Would anyone be able to help out? I included an image of what it currently looks like if that helps. Right now there are too many lines, I only want one (above the first completed task, which in this example is "prep batch 5 list").

Thank you for any help!

[claremacrae]

Hi, please share your current query as text that I can copy. Thank you.

[officialariacat]

Of course, sorry!

The code I currently have to add the lines is:

.task-list-item:is(:first-child) {
border-top: 1px solid rgba(128, 128, 128, 0.25);
}

.task-list-item[data-task-done="today"] {
border-top: 1px solid rgba(128, 128, 128, 0.25);
}

How do I combine these so that only the first of the done tasks has the line above it? Something like .task-list-item:is(:first-child AND data-task-done="today") ??

[claremacrae]

Thanks, but that is the CSS snippet.

I meant the Tasks code block text... I wanted to see if you were using any group by instructions.

But in any case, I am not aware of a way to change the CSS based on the order of tasks in a results list.

I expect that your best bet is to find one or more group by instructions to divide up your tasks as you wish - and then you can style the group headings.

• https://publish.obsidian.md/tasks/Queries/Grouping
• https://publish.obsidian.md/tasks/Scripting/Custom+Grouping

[claremacrae]

Once you use groups, I expect you will be able to use first-child for the first task in each group.

[officialariacat]

OH I see what you mean now! Sorry!
Yes, at the moment I'm using a custom group, based on one of the examples on https://publish.obsidian.md/tasks/Queries/Grouping

path regex does not match /!Templates/
description regex matches /[a-z]/
((scheduled after today) AND (not done)) OR ((scheduled in or before today) AND (not done)) OR (done in or after today) 
show tree

hide id
hide created date
hide depends on
hide done date
hide scheduled date

sort by function !task.isDone
sort by priority
sort by function task.scheduled.format("%%L%% dddd Do MMMM") 

group by function \
    const date = task.scheduled.moment; \
    return \
        (!date)                           ? '%%3%% Undated' :      \
        !date.isValid()                   ? '%%4%% Invalid date' : \
        date.isAfter(moment(), 'day')    ? '%%2%% Future tasks' :      \
        '%%1%% Tasks';

I know it's really messy because i kept changing my mind on what I wanted to have visible, but I'll try using multiple group by to see if that helps for categories within each block.

Thank you so much for your patience and sorry for the trouble!!

[claremacrae]

OH I see what you mean now! Sorry! Yes, at the moment I'm using a custom group, based on one of the examples on https://publish.obsidian.md/tasks/Queries/Grouping

OK, that's good to know.

but I'll try using multiple group by to see if that helps for categories within each block.

Great

Thank you so much for your patience and sorry for the trouble!!

You're welcome...