Question

I want to put a space after all the headers using CSS. Like this:

if h1 = add a space after
else if h1 + h2 = add a space after also but no space in between

This is my HTML code

<article>
     <h1>Title 1</h1>
...
</article>
<article>
     <h1>Title 1</h1>
     <h2>Title 2</h2>
...
</article>

For the CSS

h1, h2 { padding-bottom: 20px; }

The problem is, there is a space also between h1 and h2. I tried this code below but only those articles with h1 and h2 have a space after.

h1 + h2 { padding-bottom: 20px;}

Is there a way to do this? Or I should just use the h1 + h2 in CSS and add < br > for h1 only?

Answer 1

There’s a few ways to do this, none pretty.

/* #1 */
h1 + *:not(h2),
h2 + *:not(h3) { /* etc */
    padding-top: 20px;
}

/* #2 */
h1, h2 {
    padding-bottom: 20px;
}
h1 + h2 {
    margin-top: -20px;
}

(and variations of these.)

The problem is there is currently no way to select “backward,” i.e. apply styles to an element based on what appears after it. There is only the ability to select “forward,” using the + or ~ sibling combinators. So you can’t override the style on an <h1> based on the existence of a subsequent <h2>.

---

In the CSS4 selectors draft, there is a method of specifying the subject of the selector, using the $ sign. In that case the code would look like:

h1, h2 {
    padding-bottom: 20px;
}
$h1 + h2 {
    padding-bottom: 0;
}

/* or even */
h1:not($h1 + h2), h2 {
    padding-bottom: 20px;
}

This isn’t currently available in any browsers, however.