Attribute: data-tiddler-title

The TiddlyWiki core adds several attributes to the rendered content. With those attributes it's possible to apply custom styles to the tiddler content.

For example this tiddler is named: "Custom styles by data-tiddler-title" so the attribute looks like this:

data-tiddler-title="Custom styles by data-tiddler-title"

Examples

The following CSS is defined in Custom data-styles and creates a blue border for exactly this tiddler.

[data-tiddler-title="Custom styles by data-tiddler-title"] {
  border: 1px solid blue;
}

To create a green border for every tiddler that starts with $:/ aka system tiddlers, you'd need to use CSS like so: (not applied here but you can experiment with it! )

[data-tiddler-title^="$:/"] {
  border: 1px solid green;
}

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