TaskPaper 3.5 - Styling child nodes/notes

TaskPaper
1

I frequently add notes to may tasks (numbers to call, etc) and I was wondering if there is a way to apply the style of the paint node to the child?

For example, I have a task with a note. When I mark it @done, the task gets the strikethrough, but the note does not. I’d like it if it did, but I can’t sort out the DOM tree. Descendant selectors don’t seem to work and sibling selectors didn’t seem to either (but I could be doing it wrong).

How do I target the children of a node?
(Particularly NOTE children)

2

Mmmm… Well, there is no conditional styling at the moment with TaskPaper. So, it is not possible to change the style of a note depending on a tag, because that would be conditional.

Now, if you are talking about using the search bar, the “descendant selectors” and “sibling selectors” do work and I use them continually throughout my day. Just know that you cannot use search queries or path queries to apply styles (like I said before).

Do you have something in particular you would like to select using the path? I can help. You should check the documentation on “queries” or I could just help you with something you have in mind.

3

Victor,

I guess I was hoping to just better understand the DOM model so I could target something with CSS. For example, I can grab different “elements” of a task (a tag, the text, etc.). I am a web developer by trade, so I know how to target elements with CSS, as long as I understand the structure (and what selectors work in this case)

For example, if the structure is (Sub Items are contained within their parent)

  • Level 1 Item
  • Level 2 Subitem

… I could use descendant selectors to target that with CSS

If, the structure is all attribute based…

  • Item with Level 1 Attribute
  • Item with a Level 2 Attribute

… I could use sibling selectors to target it.

So I guess my real question is, does anyone have a map of the DOM/document that describes how it is organized?

Also, descendant and sibling are technical CSS terms ( Child and Sibling Selectors | CSS-Tricks - CSS-Tricks ). There are child selectors (item > run), so I have been assuming that descendant (item run) and sibling (item + item) will work. So far, they have not.

4

I’m not sure I’m reading this right, but it is possible to style a note depending on a tag…

// Styles any item with @test tag red
item[data-test] {
  color: red;
}

// or

// Styles any note item with @test tag red
item[data-test]item[data-type=note] {
  color: red;
}

Generally the DOM model is much restricted and special cased compared to what you’d get from a modern web browser. And in particular the DOM has little to no structure (or support for structural selectors) when compared to a real DOM. The one case that it does support is targeting run elements as direct children of item elements.

If you haven’t yet make sure to check out these two links in the users guide:

https://guide.taskpaper.com/customizing-taskpaper/creating-stylesheets.html
https://guide.taskpaper.com/reference/stylesheets/

Ideally I would like full DOM behavior and structure for the item hierarchy, but implementing it, especially the invalidation is difficult to do in a performant manner.

5

I think you’ve answered my question.

I’ll try to explain what I am trying to accomplish one last time.

In my document, I have a task with a note indented below it

  • This is the task
  • This is the note

What I was hoping to accomplish was this: tag the note @done and apply a strikethrough to the nested note as well

  • This is the task (strikethrough) @done
  • This is the note (strikethrough, but no tag)

item[data-done] + item[data-type=note] { (strikethrough styling, which I've spaced out on) }

It looks like that isn’t an option.

My workaround will likely be a script that will tag these child notes with @done if the parent is tagged that way, too.

Thanks for the help, everyone!

6

Yeah that’s just not possible now.

7

this would be a nice touch