Problems with indenting tags that follow headers-CodePudding

I am dealing with web pages that I cannot edit. I am trying to indent all tags under nested headers to a level of indent equal to the header. H1 = indent 0px, H2 indent = 20px, H3 indent = 30px, etc. Tags under each header can include img, table, div, p, etc. Each H1 may have one or more H2, each h2 may have one or h3, etc. I have had partial success.

Using the following css:

h1,
h1~p,
h1~table {
  margin-left: 0px!important;
}

h2,
h2~p,
h2~table {
  margin-left: 20px!important;
}

h3,
h3~p,
h3~table {
  margin-left: 40px!important;
}

h4,
h4~p,
h4~table {
  margin-left: 60px!important;
}

h5,
h5~p,
h5~table {
  margin-left: 80px!important;
}

h6,
h6~p,
h6~table {
  margin-left: 120px!important;
}

<h1>header</h1>
<p>text</p>
<div>div text</div>
<h2>header 2</h2>
<p>text</p>
<table>
  <tr>
    <td>text</td>
  </tr>
</table>

results in

Header 1
text
div text
   Header 2
   text
   table

however if I add another H1 tag, the H1 header text resets to an indent of zero but the tags under the H1 such as p, table, div, etc, retains the indent of the last indent as shown in this example:

Expected result

Header 1
text
   header 2
   div
Header 1
table - <- table should be aligned left with an indent of zero.

Actual result

Header 1
text
   header 2
   div
Header 1
   table - <- this should now have an indent of zero, instead indent is equal to H2 indent.

CodePudding user response：

h2, h2 ~ p, h2 ~ table has been overriding h1, h1 ~ p, h1 ~ table. Because h2 and h1 have the same level as table but h2 ~ table has come after h1 ~ table.

If you want to have h1 style application. You should put h1, h1 ~ p, h1 ~ table, after h2, h2 ~ p, h2 ~ table like below

h2, h2 ~ p, h2 ~ table {
  margin-left: 20px!important;
}
/*Moved `h1` to the 2nd place after `h2`*/
h1, h1 ~ p, h1 ~ table {
  margin-left: 0px!important;
}
h3, h3 ~ p, h3 ~ table {
  margin-left: 40px!important;
}
h4, h4 ~ p, h4 ~ table {
  margin-left: 60px!important;
}
h5, h5 ~ p, h5 ~ table {
  margin-left: 80px!important;
}
h6, h6 ~ p, h6 ~ table {
  margin-left: 120px!important;
}

<h1>header</h1>
<p>text</p>
<div>div text</div>
<h2>header 2</h2>
<p>text</p>
<h1>header 1</h1>
<table>
  <tr>
    <td>text</td>
  </tr>
</table>

CodePudding user response：

Add this selector to your css

body h1 table {
  margin-left: 0px!important;
}

The result should be:

h1,
h1~p,
h1~table,
body h1 table {
  margin-left: 0px!important;
}

h2,
h2~p,
h2~table {
  margin-left: 20px!important;
}

h3,
h3~p,
h3~table {
  margin-left: 40px!important;
}

h4,
h4~p,
h4~table {
  margin-left: 60px!important;
}

h5,
h5~p,
h5~table {
  margin-left: 80px!important;
}

h6,
h6~p,
h6~table {
  margin-left: 120px!important;
}

<h1>header</h1>
<p>text</p>
<div>div text</div>
<h2>header 2</h2>
<p>text</p>
<h1>Another header 1</h1>
<table>
  <tr>
    <td>text</td>
  </tr>
</table>