css - alternating section styling?

Question

I would like to alternate between white-on-black and black-on-white, switching whenever an <h3> is encountered. Is this possible? For example, in the following code,

<h3>Heading one</h3>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<h3>Heading two</h3>
<p>The fourth paragraph.</p>
<h3>Heading three</h3>
<p>The fifth paragraph.</p>
<p>The sixth paragraph.</p>
<h3>Heading four</h3>
<p>The seventh paragraph.</p>
<p>The eighth paragraph.</p>
<p>The ninth paragraph.</p>

Headings one and three, and paragraphs 1, 2, 3, 5, 6 would be black-on-white; the others would be white-on-black.

The actual page content is authored in Markdown, so I can't simply wrap half the sections in a <div class="inverted"> (the contents of an HTML tag in Markdown are parsed as HTML, but I want them to be parsed as Markdown.) I know about nth-of-type but it affects only the headings themselves.

Answer 1

The following is not the best solution. However, if you know, for sure, that a heading can be followed by a certain maximum number of paragraphs, then this can work universally without using JS & jQuery: http://jsfiddle.net/CG5fU/1/.

CSS:

h3:nth-of-type(2n), 
h3:nth-of-type(2n) + p, 
h3:nth-of-type(2n) + p + p, 
h3:nth-of-type(2n) + p + p + p, 
h3:nth-of-type(2n) + p + p + p + p,
h3:nth-of-type(2n) + p + p + p + p + p, 
h3:nth-of-type(2n) + p + p + p + p + p + p,
h3:nth-of-type(2n) + p + p + p + p + p + p + p {
    background-color: #000;
    color: #fff;
}

And, here's a jQuery solution: http://jsfiddle.net/CG5fU/3/.

$("h3:nth-of-type(2n)")
    .nextUntil("h3")
    .andSelf()
    .css({"background-color": "#000", 
          "color": "#fff"});

Answer 2

unfortunately, as css is a markup and not a programming language, its not suitable to work with dynamic content.

if you know how many paragraphs and headings you are going to have, then you can hardcode the styling as follows:

css:

h3:nth-of-type(1) ,h3:nth-of-type(1) ~ p{
    background:black;
    color:white;
}
h3:nth-of-type(2) ,h3:nth-of-type(2) ~ p{
    background:white;
    color:black;
}
h3:nth-of-type(3) ,h3:nth-of-type(3) ~ p{
    background:black;
    color:white;
}
h3:nth-of-type(4) ,h3:nth-of-type(4) ~ p{
    background:white;
    color:black;
}

live example: Demo

if however, you do not know how many headings/paragraphs you are going to have, you will have to resort to JavaScript.

OR, you can just go on writing the styles up to nth-of-type(100), im pretty sure you wont have more than 100 headers in your text. but i highly discourage this, better use javascript.

UPDATE

alrighty, in order to 'fill' the ugly white spaces, there are many tricks:
one would be to remove the margins of the headers and paragraphs, but increase the line-height to create artificial line spaces:

p,h3{
    line-height:2em;
    margin-top:0;
    margin-bottom:0;
}

another trick would be to use css3 pseudo selector :after to create a huge block of black/white background under the text to hide the spaces xD but this is rather heavy and complicated.

i have updated the first trick in the fiddle demo.

UPDATE 2

here is an example how to utilize :after selector to hide ugly background: :after Demo