applying CSS styling between selected headers - html

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.

Answer 2

h1#bap + p{color:red}​
This works for the first p tag. Need to find the way to apply for all the tags. This is what I got for now

Answer 3

I was going to suggest to add some <div>s around each section, until I read the bit where you said no other tags should be added.
You can't do it with css alone, but you could use some JavaScript to implement this algorithm:
Loop through all the elements of the page.
When you see a <h1>, remember it's id.
For every <p>, give it a class that corresponds to the last <h1>'s id.
You should end up with something like this, which you should be able to style easily with css.
<h1 id="bap">bap</h1>
<p class="bap">foo bap</p>
<p class="bap">foo bap 1</p>
<p class="bap">foo bap 2</p>
<p class="bap">foo bap 3</p>
<p class="bap">foo bap 4</p>
<div>defoo bap</div>
<h1 id="random-bor">random bor</h1>
<p class="random-bor">balibom</>p
Then you can style things like this:
p.bap {}
p.random-bor {}

Answer 4

Can only be done with javascript, if you're using jquery it would look like
$('h1#bap').nextUntil("h1#random-bor",'p').css('background','red');
Edit:
How to select all content between two tags in jQuery
this explains exactly what you would like to have done
Edit2:
there is also a jquery function
http://api.jquery.com/nextUntil/