Format text based on header or tag

[mahso]

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.

[efemkay]

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;
}

[mahso]

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?

[efemkay]

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;
}