Attribute: data-tag-title

Introduced in v5.2.0 The attribute data-tag-title was added to tag pills visible in the tiddler view template.

New in v5.3.0 The attribute was added to every tag pill visible in the standard TiddlyWiki UI. Especially the edit template tag list, the tag-picker dropdown, the Right sidebar -> More -> Tags tab and the $:/TagManager

The data-tag-title HTML attribute only contains the tag-title visible in the tag pill. It can be used to style the tag-pill.

If you want to style the whole tiddler have a look at: Custom styles by data-tiddler-title

Examples

If you use the following CSS in a new tiddler tagged: $:/tags/Stylesheet every tag that starts with a # will have a new border radius. So those tags stand out in contrast to the default tags.

You have to define both CSS rules, due to the existing UI structure to catch all tag-pills in the existing TW UI.

[data-tag-title^="#"] .tc-tag-label,
[data-tag-title^="#"].tc-tag-label {
   border-radius: 3px;
}

More Possibilities

[attr]

Represents an element with an attribute name of attr.

[attr="value"]

Represents an element with an attribute name of attr and whose value is exactly "value".

[attr~="value"]

Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly "value".

[attr|="value"]

Represents an element with an attribute name of attr. Its value can be exactly “value” or can begin with “value” immediately followed by “-” (U+002D). It can be used for language subcode matches.

[attr^="value"]

Represents an element with an attribute name of attr and whose first value is prefixed by "value".

[attr$="value"]

Represents an element with an attribute name of attr and whose last value is suffixed by "value".

[attr*="value"]

Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring.

[attr "operator value" i]

Adding an i (or I) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).

Learn more at: Attribute selectors - CSS or CSS-Specification