CSS: How target inside the enforced paragraphs?

Developers
#1

Not per se a TW question, but it is TW causing this difficulty with the targeting here:

As you know, paragraphs in the tiddler body automatically get wrapped in <p>. Thus, in an arbitrary text I get an arbitrary number of p’s. In my case each paragraph can in turn contain an arbitrary number of <span>s.

Question: How do I target the nth span in this?

Here’s a copy-pasteable tiddler text for easy try out. As you see, it half-works so the variables etc do work but the problem is the selector:

Lorem ipsum dolor sit amet, <span>ONE</span> consectetur 
adipiscing elit, sed do eiusmod tempor incididunt ut labore et 
dolore magna aliqua.

Pragrafus sin dividum.

Ut enim ad  <span>TWO</span> minim veniam, quis nostrud 
exercitation ullamco <span>THREE</span> laboris nisi ut aliquip 
ex ea commodo consequat.

<style>
<$list filter="red blue green" counter=counter variable=color>
[data-tiddler-title="<<currentTiddler>>"] .tc-tiddler-body span:nth-of-type(<<counter>>) { background:<<color>>; }
</list>
</style>
#2

Here is some info at MDN :nth-of-type() - CSS: Cascading Style Sheets | MDN

1 Like
#3

Yeah, thanks, but this question is a bit “beyond” that. I know how to use :nth-of-type but my difficulty here is the preceding selector, i.e either of these:

... .tc-tiddler-body ??? span:nth-of-type(<<counter>>)

... .tc-tiddler-body ???:nth-of-type(<<counter>>)

(The included code in my previous post does work and shows the problem)

#4

Your list-widget-end token has a typo. If you put the following into a tiddler tagged: $:/tags/Stylesheet it works for me

<$list filter="red blue green" counter=counter variable=color>
[data-tiddler-title="New Tiddler"] .tc-tiddler-body span:nth-of-type(<<counter>>) { background:<<color>>; }
</$list>
#5

This works too. The first line has all linebreaks removed

<style><$list filter="red blue green" counter=counter variable=color>[data-tiddler-title=<<currentTiddler>>] .tc-tiddler-body span:nth-of-type(<<counter>>) { background:<<color>>; }</$list></style>

Lorem ipsum dolor sit amet, <span>ONE</span> consectetur 
adipiscing elit, sed do eiusmod tempor incididunt ut labore et 
dolore magna aliqua.

Pragrafus sin dividum.

Ut enim ad  <span>TWO</span> minim veniam, quis nostrud 
exercitation ullamco <span>THREE</span> laboris nisi ut aliquip 
ex ea commodo consequat.
#6

That’s closer but it still doesn’t target how I want. The idea is to apply different styles to all the spans, i.e the result should show all three colors not:

image
image895×226 21.7 KB

It may be because there is no such things as “parent selector” but I’m hoping there’s some other way.

1 Like
#7

You’ll probably read through: :has() - CSS: Cascading Style Sheets | MDN which isn’t supported by all browsers yet. But :has, :is and :where are very new pseudo selectors which may make that possible. … I don’t know

#8

Thanks for looking into it! I am actually just looking at :has but did not think of :is and :where. But, yeah, I’m not sure it is possible. I’ll fiddle on :slight_smile:

#9

Have you considered simply adding a named parent? eg wrap the whole text field <section class="sectionclass"> body </section> now you have a parent under which other html tags can either inherit or use the sectionclass to help with specificity.

  • I am most likely out of my depth here, but I have a suspicion I may be correct.
  • If this works it could be added into the view body template, and or use an existing class found in the view body template to get the specificity.
#10

Thanks but the whole text field is already wrapped with .tc-tiddler-body and that is indeed used.

#11

The nth-... selector doesn’t work because the elements (1st and 2nd) aren’t siblings, they are “cousins”.

I think you will need to identify/differenciate the span elements, it can be manually or by via automatizated.
You could automatizate it with a macro that creates your identified span elements, but then you will have to solve its related issues.

#12

That makes sense. Unfortunately it is not feasible to create extra wrapping elements for my use case.
Thank you!

#13

I see it, for this reason I talk about do it via:

  • Manual <span class="class_i"> where i =1 to n.
  • Semi automatic: basic macro
    <<span "text" class_i">> →
    <span class="class_i">text</span>
  • Automatic: A more complicated macro that used something as counter that would be used to change the class.
    <<span "Lorem">> ipsum <<span "2nd text">> →
    <span class="class_1">Lorem</span> ipsum <span class="class_2">2nd text</span>