6

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

8
  • any structure to share ? if nested, padding might do
    – G-Cyrillus
    Oct 11, 2017 at 14:20
  • please write your real html code
    – DaFois
    Oct 11, 2017 at 14:23
  • added some html Oct 11, 2017 at 14:54
  • 1
    Hi @Satheesh that is very close but it fails if you have some h2 tags, then another h1 further down the page as the h2 ~ *:not(h1):not(h2) selector is then applied to the tags after the h1 (as they are also after the h1) Very close though Oct 11, 2017 at 15:05
  • 1
    Please refer the answer by @caramba (stackoverflow.com/a/46690811/5746301) Oct 11, 2017 at 15:07
6

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>

8
  • 1
    Agreed...a proper HTML structure is the way to go here.
    – Paulie_D
    Oct 11, 2017 at 14:25
  • @Paulie_D does anything speaks against using <ul><li> where it scales to infinity without doing anything?
    – caramba
    Oct 11, 2017 at 14:33
  • @caramba This is only personal preference but when it comes to responsive design I rather not use nested lists if possible especially if I am not willing to display plenty of similar data. Technically I do not have anything against lists in this case I was just implying that for further scalability and specific cases this is what I would use especially if the content is not a monotone, large amount of items. Oct 11, 2017 at 14:40
  • 1
    @caramba if you want to use a list to use its natve padding and build a whole document around it, it is not accurate. dl/dt/dd list could be discussed even that would still be not a proper markup (unless it is is a real list ). HTML on one side - CSS on the other. these are 2 differents jobs ;)
    – G-Cyrillus
    Oct 11, 2017 at 14:43
  • @caramba Unless this actually is a list I'd shy away from non-sematic mark-up and, as @G-Cyr says A dl would have the same issues,
    – Paulie_D
    Oct 11, 2017 at 14:49
4

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>

6
  • 2
    you should remove the ul proposal from your answer , it will be easier to upvote for it ;)
    – G-Cyrillus
    Oct 11, 2017 at 15:12
  • @caramba I've updated my codepen with your suggested css. This works fine on the 2nd h1. But the h2 following the 2nd h1 is not indented. codepen.io/User1972/pen/WZyKNR Oct 11, 2017 at 15:30
  • @user2436996 update the answer again with code from the codepen
    – caramba
    Oct 11, 2017 at 16:28
  • @caramba thanks for your continued help. If you see the 2nd H1, the content after it still has a left margin applied Oct 11, 2017 at 16:31
  • 1
    @user2436996 you're welcome and right. but now I give up. It's less work (how much it ever will be) to change the markup. Adding CSS like so is bad practice so better stop it.
    – caramba
    Oct 11, 2017 at 16:37
0

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.

4
  • 1
    This is an amazing answer! Could be from me.
    – caramba
    Oct 11, 2017 at 14:49
  • I have worked in Codepen, That's why I have posted in some delay. After posting only I saw your answer. Upvoted it for your answer. Oct 11, 2017 at 14:51
  • 1
    It's pleasure to give honor to the answer which is correct and clean :). Oct 11, 2017 at 14:52
  • Thanks - this is a good way, but unfortunately I can't amend the markup. I've amended the question to make this clear. Oct 11, 2017 at 14:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.