Format text based on header or tag

Is it possible to change the text format (color and background) based on a preceding header or tag?

What I would like to achieve is something similar to what I had in Roam where text nested under a #Summary tag would have a different background and text color to make it stand out, as shown in the screenshot.

possible. but u would need to get hands on with css a bit. to achieve the effect below, i use the following snippet.

the snippet find header with attribute data-heading (this is obsidian standard tagging for headings) that starts (hence the ^=) with text “Journal”. the + then ul > li is css adjacent approach to specify only those list items immediately after the header i specify (in this case h2). more references here CSS Combinators (w3schools.com).

h2[data-heading^="Journal"] + ul > li {
	width: 100%;
	border-radius: 0.4rem;
	margin: 0.2rem 0;
	background-color: #345;
	padding: 0.2rem;
}

2 Likes

Exactly was I was looking for. Thank you!

I see that the formatting is not visible in Edit mode with Live Preview, but I guess there is no way around that?

yeah. in editing view (both source mode or live preview mode), the structure is not the typical html like in reading view (which have <div>, <h2> and <ul> tags). the editing view uses codemirror and the way obsidian tag the <div>'s right now is hard to distinguish bullets grouping.

as far i see, for those who do custom dashboard also cannot fully replicate reading view in the editing view.

btw, since i notice ur example using tag, i include below if that’s the case. example below i use tag #PersonalNote

a[href^="#PersonalNote"] + ul {
	width: 100%;
	border-radius: 0.4rem;
	background-color: #345;
}

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.