How to style a section

What I’m trying to do

I’m trying to style a section, and by section I mean a heading and all it’s children.
For example if I have 3x h2 headings on a page with contents beneath them, I’d like to draw a box around each h2 and their children components.

Things I have tried

I’ve had a look into the html structure of the notes and see that each element of a page is wrapped in it’s own div element and so there is no sense of hierarchy - so is what I’m wanting to do even possible?

I also had a look on stackoverflow and saw mention of a sibling css selector - but again this wouldn’t be possible to use in this case due to the page structure

Sadly, that’s not considered a section within Obsidian. That is, it’s not a logical entity within the DOM.

Not as of current, as far as I know.

We’re not looking at the siblings of elements, but the siblings of children elements to the containing divs, so you kind of have to traverse down the tree, and then up again to match something down into the next element. CSS can’t do that.

Whenever Obsidian upgrades to Chromium, version 105, we might be able to possibly do this, but not currently, as far as I know. (For more on the Chromium version, see here.

1 Like

Thanks for confirming this, I’m tiny that experienced in css so good to know that my gut Reling was right :slight_smile:

Doesn’t the latest release tick this box?

image

Nope…

I tried wrapping the contents that I wanted to style in a <div> but that only seemed to “group” a few items with the others not being part of the group … or am I missing something obvious?

At first I thought that it was the dataview plugin or the backticks, but neither make a difference. What is quite strange is that in the 2nd screenshot you can see the closing </div> tag that is seemingly ignored.

Alas, the div will only contain the immediately following html elements. The moment a markdown element wanders by the div ends.

This also then means that the ending div will be left alone on its own.

Currently, I don’t know of any way to tag markdown elements (or groups of elements) together for tagging with CSS (or similar) besides the cssClass for the entire file.

1 Like

ah I see - didn’t know that. Thanks!

1 Like

So for those who might be interested in the future - I solved this by creating a custom callout and using that as a section grouper which I could style :slight_smile:

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