Highlight a specific item in a Query result

One of my personal use cases for Logseq Queries is to create a list of items or apps that I want to purchase or review (like keyboards, mouse, productivity tools, TFT tools…) and compare them in a single table.

In order to do that I add block properties to each of the items and create a query to create a table of comparison for them. Check out the below screenshot.

Now what I would like to do further is to highlight one or few of the results in a different color. For example in the screenshot below, I would like to highlight the “Todoist” item in the Query table, because I decided to try out Todoist right now based on a few pros and cons (which I might change later).

I would like to have this feature in Logseq.
Is this already possible?

It should be possible by adding some html somewhere in the rendered part of the block that needs to be highlighted, then use a css rule to apply the highlight based on the presence of that html.

Are you saying that I can add HTML into the query result
are you suggesting me to use HTML for the blocks that need highlighting?

  • I meant to use HTML directly in the content of the blocks that need highlighting (i.e. your second mention).
    • Then CSS could differentiate whether that content is rendered as part of a query or not.
  • Adding HTML into the query result dynamically (i.e. your first mention) could achieve the same thing, but is more demanding.

The query table I have attached in the screenshot displays block properties as columns - So,

  • If I use HTML directly in the content, then only one of the column would technically be highlighted right?
  • if I add HTML into the query, it would be more demanding like you mentioned.

Do you have any example for this? It would help me in visualizing what you mean.

Something like this:

…could be achieved by adding e.g. <span class="highlight-query-row" /> near the high value and a css rule like:

div.custom-query tr.cursor:has(.highlight-query-row) {
  background: orange;
1 Like

I have started implementing this and realized that I would ideally want to have the control to highlight rows per query.

For example, I have multiple queries that might refer to the “Todoist” block/page in the above screenshot. But I want the Todoist to be highlighted only in 1 query and not the others.

@mentaloid, any suggestions for this use-case?

  • For special cases, could be possible to add some extra html around the query (e.g. to a child block), to help the css rule differentiate.
  • For arbitrary customization, only the hard way:
1 Like