TiddlyWiki documentation mentions @@
construction here.
It says you can do
@@background-color:red;
Your text
@@
How can I use this construction to apply style to a particular element? Like,
li {list-style-type: decimal; }
I tried
@@li {list-style-type: decimal; }
But it does not work.
Document mentions
@@background-color:red;
Your text
@@
But this also works
@@background-color:red;
@@
Your text
More text
Notice that there is no next between @@
, but the rule gets applied to the whole tiddler.
Is this syntax correct to use? Or is it a bug in TW code?
Thank you Brian. I was trying to achieve something like this
li {list-style-type: decimal; }
li li {list-style-type: lower-alpha; }
But it seems nesting rules using @@
is not possible.
@@.myclass
*foo
**bar
@@
<style>
.myclass li {list-style-type: decimal; }
.myclass li li {list-style-type: lower-alpha; }
</style>
Thank you Mat. I ended up using your solution.
Thank you Brian. This is exactly what I was looking for. Much appreciated!
Some behavior of the @@
is undocumented. I enabled "tiddlywiki/internals",
plugin to see the raw HTML.
I noticed, if @@background-color: red;
is not immediately followed a by newline after the semicolon, then the rule is applied to span
element, instead of div
.
In your solution I noticed if the enclosing <div>
is not followed by a newline then the nested rules do not work.
I guess @@
parser is particular about newlines and spaces.
Thank you Brian. This is exactly what I was looking for. Much appreciated! Some behavior of the
@@
is undocumented. I enabled"tiddlywiki/internals",
plugin to see the raw HTML. I noticed, if@@background-color: red;
is not immediately followed a by newline after the semicolon, then the rule is applied tospan
element, instead ofdiv
. In your solution I noticed if the enclosing<div>
is not followed by a newline then the nested rules do not work. I guess@@
parser is particular about newlines and spaces.
<div style="..."> content </div> or <span style="..."> content </span>.
<div style="list-style-type:decimal;">
# line
# line <div style="list-style-type:lower-alpha;">
# line
# line
</div>
</div>
Your `div` trick solve the issue.
# Step 1
# Step 2
# Step 3<gronk>
|Cell1 |Cell2 |Cell3 |Cell4 ||Cell5 |Cell6 |Cell7 |<||Cell5 |~|Cell7 |Cell8 ||>|Cell9 |Cell10 |Cell11 |
</gronk>
# Step 4
# Step 5
# Step 6