Indent all elements under headdings by different amounts - CSS - css

Question

I am trying to indent elements based on the heading tag they are under. I am doing this currently by using the sibling selector:
p{
padding-left: 0;
}
h1 + p, h1 + ul{
padding-left: 1em;
}
h2 + p{
padding-left: 2em;
}
However if have two or more paragraphs under a heading then the padding defaults back to zero.
Is there a way to set padding of all elements under h1 tag to the same value and all elements under the h1 tag to a different value (only using CSS)?
Thanks for the help!

Answer 1

You could do something like this:
h1+div {
padding-left: 1rem;
}
h2+div {
padding-left: 2rem;
}
<h1>My Title</h1>
<div>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
</div>
<h2>My Title</h2>
<div>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
</div>
There is also a way to achieve the same effect using only CSS, but I wont especially reccommend it:
h1 ~ p, h1 ~ ul {
padding-left: 1rem;
}
h2 ~ p, h2 ~ ul {
padding-left: 2rem;
}
<h1>My title</h1>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<h2>My title</h2>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>