Question

I’m looking for a way to use CSS to style everything between the first two headers in a div. E.g.:

<div id="content">
  <h1>First</h1>
  <p>Big.</p>
  <p>Big.</p>
  <ul>
    <li>Big.</li>
    <li>Big.</li>
  </ul>
  <h2>Second</h2>
  <p>Normal.</p>
  <p>Normal.</p>
  <p>...</p>
  <h2>Third</h2>
  <p>Normal.</p>
  <p>Normal.</p>
  <p>...</p>
</div>

I cannot change the HTML, so can’t e.g. wrap the bigger stuff in another <div> or something like that. Best I can come up with so far is to enumerate the possibilities of elements following the first <h1> (for some number of elements) and make it bigger, e.g.:

#content h1:first-child + p,
#content h1:first-child + p + p,
#content h1:first-child + p + ul,
#content h1:first-child + p + p + ul,
...
{ font-size: larger; }

but this seems more tedious and fragile than it probably needs to be. What is a better way?

Answer 1

On Chromium (Ubuntu 11.04), the general sibling selector seems to achieve your aims:

h1 ~ * {
    font-size: 2em;
}

h2,
h2 ~ * {
    font-size: 1em;
}​

JS Fiddle demo.

This does, of course, still require knowledge of the underlying structure, but not quite so much, at least, as the adjacent sibling selectors you showed in your question.

---

As noted by @BoltClock, in comments, it might be wiser to avoid the * selector (for performance reasons) and instead use the :not() selector to identify the siblings:

h1 ~ :not(h2) {
    font-size: 2em;
}

h2 ~ :not(h2) {
    font-size: 1em;
}​

JS Fiddle demo.

References:

• CSS Selectors, at the W3.org.