Indent All Tags Following H2 Until Next H2 Is Hit Using Css

In our project I'd like to style our doxygen output differently. Currently the generated html looks like the following:

Heading 1

Solution 1:

It sounds like you want to indent all siblings after the first h2 except other h2s, in which case this should do the job:

h2 ~ *:not(h2) {
    margin-left: 10px;
}

See the general sibling combinator and the negation pseudo-class as well as a live demo on jsbin.

Solution 2:

There's a couple of options of varying complexity, the first is:

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

JS Fiddle demo.

This approach selects all following-sibling elements of an h2 that is not itself an h2.

The second is slightly simpler:

body {
    padding-left: 1em;
}

bodyh2 {
    margin-left: -1em;
}

JS Fiddle demo.

This approach does, essentially, mean that all content except the h2 will be indented; so it's not quite perfect for your use-case, but may be adaptable to your specific requirements).

Share