Question

I would like to select elements between h1 tags. For example, I would like to apply a style to all p between the h1#bap and the next h1, while not changing the style at any other places.

No other tags should be added (otherwise, it’d be too easy 🙂 ).

Can’t use any nth-sibiling as elements between headers can be trillions.

Obviously, I may want to apply style between other headers as well (between specific h2,…).

<h1 id="bap">bap</h1>
  <p>foo bap</p>
  <p>foo bap 1</p>
  <p>foo bap 2</p>
  <p>foo bap 3</p>
  <p>foo bap 4</p>
  <div>defoo bap</div>
<h1 id="random-bor">random bor</h1>
  <p>balibom</>p

Answer 1

You can use a lesser know selector formally called the Sibling combinator (well, I think that’s it’s name anyway!)

Using this syntax, you can select all p elements after <h1 id="bap">bap</h1>:

#bap ~ p { color: red; }

Unfortunately, this selects all paragraph elements after <h1 id="random-bor">random bor</h1>
too, but this can be overcome by resetting the styles of those paragraph elements like such:

#random-bor ~ p { color: black; }

See this fiddle

This works in every modern browser, unfortunately it doesn’t work in IE6, if that’s an issue then a jQuery solution would probably be best.