Question

I’m looking for a way to adjust margins on header tags (<h1> , <h2>, <h3>, etc) only when they are adjacent to one another in the DOM.

So here’s what I’ve got:
http://jsfiddle.net/LtAHW/1/

Basically, what I’m trying to achieve is to tighten up the spacing between the <h2> and the <h3> but only when they appear one right after the other. So, in the example above, only the space between the first Sub Section and the first Sub-Sub Section.

I’d prefer a solution that would work with any combination of header tags, but any thoughts or suggestions would be appreciated!

Answer 1

Hey there,

Have you tried the adjacent selector?

h2 + h3 {
  margin-top: 10px;
}

It will select the second element only if it immediately follows the first. So in this case, every <h3> element that follows an <h2> will be targeted and given a margin-top of 10px.

If you want a solution that will work with any combination of header elements, you could create a couple classes to use whenever needed, like so:

.h-first + .h-adjacent {
  margin-top: 10px;
}

Not the best class names in the world, but you get the idea. You could use these with any combination of headings (or any element for that matter) and target things this way.

The adjacent selector is supported in IE7+, so you should be covered in most projects.

Hopefully this is what you were looking for!

EDIT:

Here’s your example updated.