Attribute: data-tags

New in: 5.1.16

The TiddlyWiki core adds several attributes to the rendered content. These make it possible to apply custom styles to tiddlers.

For example this tiddler is tagged: How to apply custom styles and example-test so the attribute looks like this:

data-tags="[[How to apply custom styles]] example-test"

Important: Tiddler tags are not sorted so the order in the rendered output may be different!

Examples

The following CSS is defined in Custom data-styles and creates a pink border for all tiddlers (including this one) tagged with example-test.

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

Styling Stylesheets

So to display tiddlers tagged: data-tags-styles in a decent way we can use the following code. (I could have used: $:/tags/Stylesheet, but that would affect all stylesheets in this wiki, which is not intended. amt ;)

Important: Don't forget to also specify .tc-tiddler-body or the whole tiddler, including the title, will be changed! see: Custom data-styles

[data-tags*="data-tags-styles"] .tc-tiddler-body {
  display: block;
  padding: 14px;
  margin-top: 1em;
  margin-bottom: 1em;
  word-break: normal;
  word-wrap: break-word;
  white-space: pre-wrap;
  background-color: #f5f5f5;
  border: 1px solid #cccccc;
  padding: 0 3px 2px;
  border-radius: 3px;
  font-family: Monaco, Consolas, "Lucida Console", "DejaVu Sans Mono", monospace;
}

Hard Linebreaks

This mechanism may be handy for users who want to write prose text! See: Hard Linebreaks with CSS

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