How do I specify in CSS that I want all lines that do not have children OR have children that are marked complete, to have a specific text color?

I’m trying to use Checkvist as a “GTD” tool, and I want the ability to have my “next action” have a different color text. I’m currently using this CSS code to make it happen, which works beautifully:

.leafItem .userContent { color: BlueViolet; }

But here is the snag… if I have a child item underneath, which is then marked complete in Checkvist, then the line immediately above (which, to me, is now the next action) is still default (black) text, because that child item is still technically below it, even though it is marked complete.

Question: How do I specify in CSS that I want all lines that do not have children OR have children that are marked complete, to have the BlueViolet text color?

I’ll try to illustrate here:

I want this…

Black
    Black
        BlueViolet

To become this…

Black
    BlueViolet
        Black

Here is a link to a very short Loom video demonstrating what I’m trying to accomplish:

Hello @Morgan ,

Please try adding a rule

.noOpenChildren .userContent { color: BlueViolet; }

Would it work?

Best,
KIR

Thank you for your reply. Unfortunately that didn’t work :frowning:

Hmm. The basics worked for me. Here is a somewhat improved version, which includes your change:

.leafItem .userContent, 
.noOpenChildren .userContent { color: BlueViolet; }

.leafItem .task_closed .userContent, 
.noOpenChildren .task_closed .userContent { color: inherit; }

Please try it out. The last rule is to preserve the color of the completed item.
Best,

That appears to have done the job! Thank you so much for your help!

1 Like