[Help] Possible to apply padding to paragraph text, but not other elements inside of it?

#1

Branching off from my question about Using Macros inside of Macros, I’m having a bit of trouble with selecting specific <p> elements used within my <details> elements.

Here is a snippet of code, enough to show what I’m attempting to do (though unsucessfully.) Throwing it in a blank TiddlyWiki will give a good demo of what I’m aiming to do, sort of.

<style>
details.jmh-details {
	margin-bottom: 0px;
}
details.jmh-details > summary {
	background: <<color table-header-background>>;
	border: solid 1px <<color table-border>>;
	font-size: 1.25em;
	font-weight: 600;
	padding: 2px 0px 4px 4px;
	margin-bottom: -1px;
}
details.jmh-details p ~ p :not(details) > p {
	padding: 8px 10px;
}
details.jmh-details p {
	margin-top: 0px;
	margin-bottom: 0px;
}
.jmh-details p ol, .jmh-details p ul {
	padding-inline-start: 24px;
}
.jmh-details p table {
	width: 100%;
	padding-top: 50px;
	margin-top: 0px;
	margin-bottom: -2px;
}
</style>


<details class="jmh-details" open>
	<summary>
	1
	</summary>
	<p>

| Placeholder | Placeholder |
| Placeholder | Placeholder |


	</p>
</details>
<details class="jmh-details" open>
	<summary>
	2
	</summary>
	<p>

		Text That should be padded, but is not.

		<details class="jmh-details" open>
			<summary>
				2A
			</summary>
			<p>

				Text That should also be padded, and is padded?

			</p>
	</details>

Text that should be padded, but also is not.

</p>
</details>

My goal is to apply padding to the text inside of <p> elements, but to not apply that padding to other elements inside of it, such as <table>s or other <details> elements placed inside of it.

So far, I’ve only managed to select one <p> element nested inside other elements, but I’m unable to apply the padding to other <p> elements as well.

Any help is greatly appreciated, I think I’ve been messing with this for so long I’m missing something simple. :sweat:

#2

Try this;

<style>
details >  p {
  background-color: linen;
}
</style>

Text 

<details open>

Para inside

</details>
  • Reference used CSS Selectors Reference
  • Apply styles only to p with a details parent
  • Note how TiddlyWiki puts the paragraph tag during render

Install the internals plugin (already on tiddlywiki.com) so you get extra preview options when editing a tiddler, one is html which shows the above is rendered into html as;

<p><style>
details &gt;  p {
  background-color: linen;
}
</style></p><p>Text </p><details open="true"><p>Para inside</p></details>

Note <p>Para inside</p> you need the blank line above it. :nerd_face:

#3

Well, not quite what I was expecting- missing the summary element means that adding it causes some unusual behavior, but it’s given me an idea or two to try!

and yes, I will make sure to place a blank line above it :laughing:

EDIT: Nevermind, found out the &gt; meant greater than (>)

#4

I just showed you the css, not relative to your example,

Sorry, That is what the preview displayed it is the > symbol.