All geek questions in one place

Create cascading headers with CSS selectors

I am trying to create a better stream of my headers by deferring their small amount depending on what the parent is. For example, H1 without indentation, if H2 follows H1, then indent 1, otherwise no ... if H3 follows H1 / H2, then indent, etc., Therefore, it cascades indents accordingly. Further, it would be great if I could indent the contents of / p after each header tag ... I tried the following CSS after several studies ...

h1 {margin-left:0em;}
h1 ~ *:not(h1) {margin-left: 1em;}
h2 ~ *:not(h2) {{margin-left: 2em;}

Unfortunately, this loses it when another H1 is added ... note the following

Heading 1
    Heading 2.1
        Paragraph 2.1.1
        Paragraph 2.1.2
        Paragraph 2.1.3
    Heading 2.2
        Paragraph 2.2.1
        Paragraph 2.2.2
        Paragraph 2.2.3
        Heading 1.2 <this is wrong???
    Heading 2.1
        Paragraph 2.1.1
        Paragraph 2.1.2
        Paragraph 2.1.3
    Heading 2.2
        Paragraph 2.2.1
        Paragraph 2.2.2
        Paragraph 2.2.3

I want to try to do this without JS and only CSS, is this possible?

+4
source share
1

, , . , h2. , . , h1 , , :

html body h1 {margin-left:0em;color: red;}
h1 ~ *:not(h1) {margin-left: 1em;color: blue;}
h2 ~ *:not(h2) {margin-left: 2em;color: green}

, h1 , , , .

http://jsfiddle.net/LUPD5/

+2

Source: https://habr.com/ru/post/1540992/

More articles:


All Articles