The selectors don't work properly

[diobrando]

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

[WhiteNoise]

moved to help

[kenjibailly]

@diobrando

	padding-left: 3.5em !important;
	text-indent: 3.5em !important;

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:

How to indent the body text according to the header?

I’m having issues, been trying all afternoon and I keep getting bugs. The “~” selector takes every element after it, which causes issues. I can’t find a selector that selects from element to element. This is the best I could do, I think a js script would be needed to put all the divs after a heading until the next heading into a new div so the css could be resolved more easily… Unfortunately I haven’t made any plugins yet. I might give it another go some other day. headings-indent2.css (4.5…

[diobrando]

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?

[kenjibailly]

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

[diobrando]

my code is different:

In this case?

[kenjibailly]

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?

[diobrando]

I’m using the v0.13.33

[kenjibailly]

Same here, not sure why then…

[efemkay]

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

[kenjibailly]

I see, I use that one indeed.
Thanks