Indent content based on headings - css

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>

Answer 3

Instead of using margin, we can achieve this style easily by using Un-Ordered list.
ul {
list-style-type: none;
}
h1,h2,h3,h4,h5,h4 {
margin: 0px;
}
<ul>
<li>
<h1>H1</h1>
<p>Content here</p>
<ul>
<li>
<h2>H2</h2>
<p>Any content after the H2, paragraphs, images, etc</p>
<ul>
<li>
<h3>H3</h3>
<p>Any content after the H2, paragraphs, images, etcContent here</p>
</li>
</ul>
</li>
<li>
<h2>H2</h2>
<p>Any content after the H2, paragraphs, images, etc</p>
</li>
</ul>
</li>
<li>
<h1>H1</h1>
<p>Content here</p>
<ul>
<li>
<h2>H2</h2>
<p>Any content after the H2, paragraphs, images, etc</p>
<ul>
<li>
<h3>H3</h3>
<p>Any content after the H2, paragraphs, images, etcContent here</p>
</li>
</ul>
</li>
<li>
<h2>H2</h2>
<p>Any content after the H2, paragraphs, images, etc</p>
</li>
</ul>
</li>
</ul>
Here I have attached my codepen link.

Answer 4

No need for extra classes. For any correctly structured HTML document following CSS is enough:
ul, ol {
list-style-position: inside;
} // This is necessary if you use lists. Otherwise just delete this rule.
h1 ~ *:not(h1) {
margin-left: 1.2rem;
}
h2 ~ *:not(h1, h2) {
margin-left: 2.4rem;
}
h3 ~ *:not(h1, h2, h3) {
margin-left: 3.6rem;
}