Possibly Unintended Behavior? Data-Tags

[Tiddly Novice]

1. Start an empty TW

2. Make a CSS stylesheet with the following:

[data-tags*="example-test"] { border: 2px solid blue; }

3. Make a 2nd CSS stylesheet with the following

[data-tags*="example-te"] { border: 2px solid pink; }

4. Make a Tiddler and tag it with example-test

Result: The tagged tiddler has a pink border instead of the blue some would expect.

I was using the Custom styles by tags examples when I noticed this by accident. Is this intended? I suppose it could be used for versatility or trickery, but the example doesn't mention that this would happen so it presents a bit of a gotcha for new  users. Also, how would it be dodged?

[Eric Shulman]

On Wednesday, November 11, 2020 at 12:27:03 PM UTC-8, Tiddly Novice wrote:

[data-tags*="example-test"] { border: 2px solid blue; }

[data-tags*="example-te"] { border: 2px solid pink; } 

https://www.w3schools.com/cssref/css_selectors.asp

Note these:

[attribute=value] [target=_blank] Selects all elements with target="_blank"
[attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word "flower"
[attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting with "en"
[attribute^=value] a[href^="https"] Selects every <a> element whose href attribute value begins with "https"
[attribute$=value] a[href$=".pdf"] Selects every <a> element whose href attribute value ends with ".pdf"
[attribute*=value] a[href*="w3schools"] Selects every <a> element whose href attribute value contains the substring "w3schools"

Thus, for an exact match, use [data-tags="example-te"] (i.e., omit the "*"

-e

[Tiddly Novice]

Thanks. I'm starting to realize that using TW requires more than understanding TW. It requires properly understanding CSS and HTML too.

[TW Tones]

Novice;

Thanks. I'm starting to realize that using TW requires more than understanding TW. It requires properly understanding CSS and HTML too.

The advantage here is rather than introducing bespoke technologies, to get results in TiddlyWiki, your journey into tiddlywiki takes you into the world of key and broadly adopted Internet Technologies. The result is not only something others can read and understand but builds reusable skills. To me tiddlywiki is about democratising software, and an essential part of this allowing you to extend what you learn even further than just tiddlywiki.  Just go as far as you need to get the job done at first but in time you will be further empowered.

Tones