How do I change tag colours if it contains date?

Questions & Help
1

I know how to change tag color if the tag contains specific keywords. However I wonder if there’s a way to change tags style when I link to a date? (basically using logseq-datetag-plugin, I don’t want the tag to be showed like normal tag)

a.tag[<if_tag_contains_date>] {   /* <- Is there a way to do this */
    align-items: center;
    background: var(--ls-color-clouds);
    border-radius: 1rem 0.4rem 0.4rem 1rem;
    color: var(--ls-primary-background-color);
    ...
}
2

Generating dates based on the date format is difficult outside of plugins, and date links themselves have no flags. However, if the date format you are using has certain characteristics, it may be possible. What format are you using?

3

It’s the default format of logseq-datetag-plugin
I assume it is, for example, #[[Oct 18th, 2023]]

4

That plugin uses the date format of the Logseq settings.
If you don’t use “,” in other page names or tags, you can use it as the flag.

a.tag[data-ref*=", "i] {
    align-items: center;
    background: var(--ls-color-clouds);
    border-radius: 1rem 0.4rem 0.4rem 1rem;
    color: var(--ls-primary-background-color);
    ...
}

Also, if there are not many items that contain ", ", you can exclude them using “:not()”. The * in CSS means contains.

a.tag[data-ref*=", "i]:not([data-ref*="Page Name, "i]) {
    align-items: center;
    background: var(--ls-color-clouds);
    border-radius: 1rem 0.4rem 0.4rem 1rem;
    color: var(--ls-primary-background-color);
    ...
}
1 Like