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>