Indent content based on headings

Question

I'm trying to get a style to indent like the following

H1
Content here
    H2
    Any content after the H2, paragraphs, images, etc
        H3
        Any content after the H2, paragraphs, images, etc
    H2
    content
H1 another top level heading
etc

Sample html:

<h1>heading 1</h1>
<p>content</p>
<h2>heading 2</h2>
<p>content</p>
<p>content</p>
<h3>heading 2</h3>
<p>content</p>
<img src="something.png" />
<p>content</p>
<h1>heading 1</h1>
<p>content</p>

I've tried the following

h2, h2 + * {
    margin-left: 30px;
}

h3, h3 + * {
    margin-left: 60px;
}

But this only sets a margin on the first element after the heading, I need all subsequent tags, until the next one.

Any questions please ask.

I'd like to point out that I can't rewrite the hml as I'm applying this to a website where many pages have already been created.

Some sample code https://codepen.io/User1972/pen/WZyKNR

Answer 1

I would do this something like this: https://codepen.io/andrasadam93/pen/dVKedR This way you can easily scale it for further indentations, modify each and every part by adding id's or further classes and get your desired result in later specific cases as well.

.first{
  margin-left:0;
}
.second{
  margin-left:30px;
}
.third{
  margin-left:60px;
}

<div class="first">
  <h1>Hello</h1>
  <p>Some content here</p>
  <div class="second">
    <h2>Hello second</h2>
    <p>Also some content here</p>
    <div class="third">
      <h3>Hello third</h3>
      <p>Also some content here</p>
    </div>
    <p>Some further content in the second indentation</p>
  </div>
  <p>This is also some content in the first indentation</p>
</div>

Answer 2

Why not just use a list <ul><li>...

ul, li { list-style: none; }

<ul>
  <li>
      <h1>hello h1</h1>
      <p>Lorem ipsum dolor sit amet</p>
      <ul>
        <li>
            <h2>hello h2</h2>
            <p>Lorem ipsum dolor sit amet</p>
            <ul>
              <li>
                  <h3>hello h3</h3>
                  <p>Lorem ipsum dolor sit amet</p>
              </li>
            </ul>
        </li>
      </ul>
  </li>
  <li>
      <h1>hello h1</h1>
      <p>Lorem ipsum dolor sit amet</p>
  </li>
</ul>

or if you do not want to use a list you can achieve the same with one single CSS rule and class like so:

.cheating-list .cheating-list {
    margin-left: 40px;
}

<div class="cheating-list">
  <h1>hello h1</h1>
  <p>Lorem ipsum dolor sit amet</p>
  <div class="cheating-list">
    <h2>hello h2</h2>
    <p>Lorem ipsum dolor sit amet</p>
      <div class="cheating-list">
        <h3>hello h3</h3>
        <p>Lorem ipsum dolor sit amet</p>
      </div>
  </div>
</div>
<div class="cheating-list">
  <h1>hello h1</h1>
  <p>Lorem ipsum dolor sit amet</p>
</div>

The trick is do add the wrap <div class="cheating-list"> inside itself.

---

UPDATED CODE

With your sample HTML (which was added much later) something like this will do the trick (but if possible I would change the markup to one of the above examples)

h1,
h1 ~ *,
h2 ~ h1,
h2 ~ h1 ~ *,
h3 ~ h1,
h3 ~ h1 ~ * {
    margin-left: 0px;
}


h2,
h2 ~ *,
h1 ~ h2,
h1 ~ h2 ~ *:not(h1):not(h3) {
    margin-left: 40px;
}

h3,
h3 ~ *,
h1 ~ h3,
h1 ~ h3 ~ *:not(h1):not(h2) {
    margin-left: 80px;
}

<h1>heading 1</h1>
<p>content</p>
<h2>heading 2</h2>
<p>content</p>
<p>content</p>
<h3>heading 3</h3>
<p>content</p>
<img src="something.png" />
<p>content</p>
<h1>heading 1</h1>
<p>content</p>


<h1 class="entry-title">Inputs</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor, lacus eget egestas pharetra.</p>

<h2><span id="Columns">Columns</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor, lacus eget egestas pharetra.</p>
<ul>
  <li>fghgfdh</li>
  </ul>
<img src="http://via.placeholder.com/350x50" />
<h3><span id="another">another heading</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor, lacus eget egestas pharetra.</p>
<h1 class="entry-title">2nd Heading One</h1>
<p>This should not have a margin</p>
<h2><span id="Columns">Columns XXXX</span></h2>
<p>This margin is too large. It has the h3 margin applied to it</p>
<h3><span id="another">another h3 heading</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor, lacus eget egestas pharetra.</p>