Quick $:/tags/Stylesheet question

[Ste Wilson]

I have the following tddler

$:/Floatleft which contains

img
{
float: left;
}

Tagged as in the title and set as text/css but this seems to apply to all img in the tiddlywiki, not just locally to tiddlers with @@.floatleft in them.

What am I missing?

Thanks.
Ste

[Mark S.]

Not sure what you mean by "tagged as in the title". The title of the stylesheet tiddler can be anything.

The styles created in the stylesheet  will apply everywhere. In order to make them work only where you want, to have to make the selectors more specific.

So if you've tagged things as "FloatLeft" then your style sheet might need to look like:

[data-tags *="FloatLeft"] img
{
    float: left;
}

The attribute selector used here is fairly new. There was another way to do this in the past. See https://tiddlywiki.com/#Custom%20styles%20by%20data-tags for more details.

I might add that "float: left" seems to be a default, but that's another issue.

Good luck!

-- Mark

[Ste Wilson]

That's hit the spot.
The title I was referring was the title of the post ;)

Cheers for that.

Ste

[Eric Shulman]

On Saturday, November 3, 2018 at 9:32:17 AM UTC-7, Ste Wilson wrote:

You need to define a custom CSS class named "floatleft" that has the rule for images within it... like this:

.floatleft img { float:left; }

Then, to apply the floatleft class to a tiddler containing an image, you can write

@@.floatleft [img[...]] @@

enjoy,

-e

Eric Shulman

TiddlyTools.com: "Small Tools for Big Ideas!" (tm)

InsideTiddlyWiki: The Missing Manuals

[Ste Wilson]

Cheers Eric!
I thought there was a way to set up css that only happens on an @@!

Solution implemented.