CODEWITHSUNDEEP
css
Mikey Boldt
Mikey Boldt

Reputation: 170

How can I make the font bigger, just between the first and second headings?

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?

Upvotes: 2

Views: 1107

Answers (2)

Joe
Joe

Reputation: 124

Without seeing the rest my assumption is that you need to be super specific (as you wrote in your question). Otherwise you run the risk of these rules showing up elsewhere that it is not wanted.

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

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:

Upvotes: 2

Related Questions