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 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 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! )
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).