CSS based on previous header

Custom CSS & Theme Design
1

What I’m trying to do

I am trying to create custom css based on the header and following item. In this specific example, I am trying to edit the padding between the start of a list, ul, and a header, h6.

Things I have tried

I already have the following css to tighten up the spacing between normal lines and a proceeding list. These lines are currently commented out in my css snippet to ensure they were not conflicting.

/* set the upper margin for the list */
ul {
margin-block-start: -1em;
}

/* reset the upper margin for nested lists */
ul ul {
margin-block-start: inherit;
}

This works great and as intended. However, this doesn’t work well when using headings as then there isn’t enough space… picky, i know.

I tried following the suggestions from Format text based on header or tag, but this css code didn’t seem to work at all. I also tried modifying it to test different iterations such as just “h6 ul” with no data-heading and tried the other 3 css combinators, + > ~. I have been unsuccessful with everything.

Ultimately, I want the same spacing between a header and list as there is between a header and a regular line while also maintaining the reduced spacing between a regular line and a list.

2

I tested some additional css on just a heading and paragraph. Effectively testing the same thing, but on what I think is simpler when viewing the html. It seems the issue here is the css combinators. I guess I am not understanding how it works.

html inspection

image

working css but applies to all paragraphs

p {
margin-block-start: -1em;
}

non-working css to apply only to the paragraph after h4

h4 p {
margin-block-start: -1em;
}

As in my original post, I tried all selectors. h4 p, h4 + p, h4 > p, h4 ~ p.

3

Good morning, that’s a nice TNETENNBA.

I so wish I could answer your question just because of your username alone, but I can’t. :frowning:

Have you tried turning it off and on again?

1 Like
4

If you knew the email address associated with this username, you would infact know I had tried turning it off and on again :grin:.

1 Like
5

I had a similar desire a while back, here’s the thread where I got my solution

Spoiler alert: you need to Contextual Typography plugin

6

assuming you have installer updated to at least v1.1.9 (meaning u download the installer from the website anytime after 23dec2022), you can avoid using/installing the plugin and use this css snippet instead. i did for (i) p after h3 and (ii) p after h4. you can repeat for the header you want

.markdown-rendered div:has(> h3) + div:has(p) > :is(p) {
    margin-block-start: 0.6em;
}
.markdown-rendered div:has(> h4) + div:has(p) > :is(p)
    { margin-block-start: 0.6em; }

note for deeper understanding

obsidian structures the html differently than how most website does. such that, headers like h2, h3, h4 are housed inside a standalone div (which u can see in MauriceMossIT screenshot. normal website, you can simply target with h4 + p but for obsidian you have to rely on :has() and do the following div:has(h4) + div:has(p) > p

:has() support only come with obsidian v1.1.9 (released 23dec2022) with electron v21

1 Like
7

Thank you for that and the explanation. I’m fairly new to CSS and HTML, so the extra complications from Obsidian are not fun, but I am slowly learning.

8

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