Not matter how I try, I can’t get this to work:
[data-tiddler-title$="$(t)$"]
[data-tiddler-title$=<<t>>]
This, however, is fine (of course):
[data-tiddler-title*=<<t>>]
So how to escape the “$”?
Tested on tiddlywiki.com right now, this one works (variable t being \defined in a tiddler tagged $:/tags/Macro).
CSS-end-selector.json (563 Bytes)
Fred
Thanks for trying this, @tw-FRed
Here is the entire selector:
\define pos-draft-tiddler() .tc-tiddler-frame.tc-tagged-bk-edit-positioned.tc-tagged-bk-edit-positioned[data-tiddler-title$=<<t>>][data-tiddler-title*="Draft of"]
When I use that here…
<<pos-draft-tiddler>> {
currentTiddler:<<currentTiddler>>;
constant:<<EDIT-POSITIONED-DRAFT-Z-INDEX>>;
z-was:{{!!z}};
<% if [{!!z}match<EDIT-POSITIONED-DRAFT-Z-INDEX>] %>
z-index:<<EDIT-POSITIONED-DRAFT-Z-INDEX>>;
<% else %>
z-index:calc(<<EDIT-POSITIONED-DRAFT-Z-INDEX>> - 5);
<% endif %>
}
The entire rule is missing in the DevTools inspector. If I replace the $= with *=, it appears fine:
I’m baffled.
I tried it but it doesn’t work in this case, presumably because we’re not defining an attribute value, here the operator is $=, not =…
Fred
Did you try to replace the macro with a procedure?
Also, does your selector get expanded correctly when you look at the WidgetTree preview mode of your stylesheet, using “Inspector” official TW plugin?
And last, what’s your t variable definition?
(going to bed now, I hope you’ll find a solution)
Fred
No. The \define was just one attempt to fix it. The problem started with…
.tc-tiddler-frame.tc-tagged-bk-edit-positioned.tc-tagged-bk-edit-positioned[data-tiddler-title*="Draft of"][data-tiddler-title$=<<t>>] { ...
And it’s not “something in my wiki” messing things up – your code works fine.
It’s not a stylesheet tiddler – it’s in a style element… but thanks, that’s got me thinking it might need to be in a CSS tiddler (but then I’ll lose the dynamics – catch 22).
<$transclude $tiddler=do-t $type="text/css"/>
FAIL.
I think this is likely the issue. IIRC I’ve found in the past that dynamic CSS doesn’t tend to work well in <style> elements. Moving it into a separate tiddler with the $:/tags/Stylesheet tag typically fixes it for me — and you should be able to keep your dynamic elements as long as your stylesheet tiddler doesn’t have type: text/css. (Though if <<t>> was locally defined, you may have another issue.)
1 Like
I am not certain that you can use TWO [...] selector attribute qualifiers in the same rule.
Try splitting them up like this (note the comma between them):
.tc-tiddler-frame.tc-tagged-bk-edit-positioned.tc-tagged-bk-edit-positioned[data-tiddler-title*="Draft of"],
.tc-tiddler-frame.tc-tagged-bk-edit-positioned.tc-tagged-bk-edit-positioned[data-tiddler-title$=<<t>>]
{ ... }
you might also be able to use nested CSS like this:
.tc-tiddler-frame.tc-tagged-bk-edit-positioned.tc-tagged-bk-edit-positioned {
&*[data-tiddler-title*="Draft of"],
&*[data-tiddler-title$=<<t>>]
{ ... }
}
-e
'Fraid not. See the literal transclude where the $type is specified AND the tiddler is tagged as a stylesheet AND the type set to text/css.
Interesting. I do it all the time all over my wikis.
Hmm. I’ll be back…
If I move the CSS into a stylesheet tiddler, I’ll lose the context for currentTiddler:
<$let t={{{ [<currentTiddler>search-replace[Draft of '$:],[]trim[']addprefix["]addsuffix["]] }}}
>
.tc-tiddler-frame.tc-tagged-bk-edit-positioned.tc-tagged-bk-edit-positioned[data-tiddler-title*="Draft of"][data-tiddler-title$=<<t>>] {
currentTiddler:<<currentTiddler>>;
constant:<<EDIT-POSITIONED-DRAFT-Z-INDEX>>;
z-was:{{!!z}};
<% if [{!!z}match<EDIT-POSITIONED-DRAFT-Z-INDEX>] %>
z-index:<<EDIT-POSITIONED-DRAFT-Z-INDEX>>;
<% else %>
z-index:calc(<<EDIT-POSITIONED-DRAFT-Z-INDEX>> - 5);
<% endif %>
}
You certainly can, Eric. Understand, if I change the $= to *=, the rule works fine.
And reminder: the thing that really baffles me is the the entire rule disappears. So when I say $= doesn’t work, it’s completely missing from the sheet. Replace with *= and it reappears.
.tc-tiddler-frame.tc-tagged-bk-edit-positioned.tc-tagged-bk-edit-positioned {
&*[data-tiddler-title*="Draft of"],
&*[data-tiddler-title$=<<t>>]
{ ... }
}
A step forward, at least. Now the sheet appears. Problem, it’s not being applied:
Clicking on “inline:6” reveals…
hmmm… the rule displayed in the debugger has & *[...] but it should be &*[...] (no space). The difference is that the first syntax indicates a CHILD element of the containing class, while the second should apply the selector conditional directly to the containing class.
Maybe try removing the *'s, like this:
.tc-tiddler-frame.tc-tagged-bk-edit-positioned.tc-tagged-bk-edit-positioned {
&[data-tiddler-title*="Draft of"],
&[data-tiddler-title$=<<t>>]
{ ... }
}
-e
That was me just trying ANYTHING to make something change. That didn’t work, either.
The need for $=, if you haven’t gleaned it already… I had *= for the longest time, everything worked fine… until I split a large tiddler in two, keeping the first part of the name in both and adding extra chars at the end of the new tiddler-2:
$:/.rgt/bk/macro/macro-doc
$:/.rgt/bk/macro/macro-doc-get-variable-definition
As you can see, *="$:/.rgt/bk/macro/macro-doc" will always succeed, always ignoring “$:/.rgt/bk/macro/macro-doc-get-variable-definition”. $= would solve that easily. But … well, you know the rest.
So, go back to *= and…
$:/.rgt/bk/macro/macro-doc-ui
$:/.rgt/bk/macro/macro-doc-get-variable-definition
Pragmatic. Though not ideal.
Thanks for looking into this @EricShulman @etardiff @tw-FRed
1 Like
I did a little experiment, and removing the “*” seems to make a difference.
Also, why is .tc-tagged-bk-edit-positioned repeated twice in the selector:
.tc-tiddler-frame.tc-tagged-bk-edit-positioned.tc-tagged-bk-edit-positioned
Try this:
.tc-tiddler-frame.tc-tagged-bk-edit-positioned {
&[data-tiddler-title*="Draft of"],
&[data-tiddler-title$=<<t>>]
{ ... }
}
To raise the specificity. I needed it way back though I should retest again.
.tc-tiddler-frame.tc-tagged-bk-edit-positioned {
&[data-tiddler-title*="Draft of"],
&[data-tiddler-title$=<<t>>]
{ ... }
}
Nope.
I’m not sure splitting the selector like that captures the element correctly. Either way, it doesn’t work.