The selectors don't work properly

I have :

  • snippet css
  • NO legacy editor
  • Default theme
  • Obsidian version v0.13.33

this code don’t move left the text after h2:

h2 ~ p {
	padding-left: 3.5em !important;
	text-indent: 3.5em !important;

moved to help

The “~” selector will only stay within the same parent.
h2 and p never share the same parent.

What you need to do instead is use the class of the parents’ div like this:

.el-h2 ~ .el-p {
    padding-left: 3.5em !important;
	text-indent: 3.5em !important;

Btw if you’re trying to indent the headings, I’m trying to make something work but got stuck myself here:

The real siblings are div.h2 and div.p . i try :
div h2 ~ div p { padding-left: 3.5em; }
div h2 + div p { padding-left: 3.5em; }
div > h2 ~ div > p { padding-left: 3.5em; }
div > h2 + div > p { padding-left: 3.5em; }

but they didn’t work. Any idea?

In my screenshot example you can see that the parent of h1 is .el-h1
The parent of p is .el-p

This means they do not share the same parent and therefore “~” does not work since it is looking for a p tag after h1 within that same parent being .el-h1, p is not in .el-h1

Hopefully this explains it better

I’m going to rephrase my comment above.
.el-h1’s parent is .markdown-preview-sizer.markdown-preview-section and so is .el-p
This counts for h2, h3, … as well since they’re all in the same format

You can add padding to the .el-p using this selector:

.el-h2 ~ .el-p {
    padding-left: 3.5em !important;
	text-indent: 3.5em !important;

The code above will select every .el-p that is behind the .el-h2 div within the same parent, being .markdown-preview-sizer.markdown-preview-section

my code is different:

In this case?

Hmm weird…

Anyway I tried out some things and because the div’s have no class it seems quite impossible to do this.
I found a solution that would work with “:has()”, but that isn’t supported by many browsers, nor Obsidian.

I’m either not good enough with css or this isn’t possible.

Perhaps you’re on a lower version of Obsidian? Try to update and check if your html changes?

I’m using the v0.13.33

Same here, not sure why then…

I believe u use contextual typography plugin? It gives classes to top level divs

1 Like

I see, I use that one indeed.
Thanks :slight_smile:

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