Can CSS give me paragraph styling based on the previous heading class?

Question

So I want to rig up some css rules for interview transcripts. The format I have in mind looks something like this:

<h2 class="interviewer">Alice: [00:00:00]</h2>
<p>Is it ok if I ask you a question now?</p>

<h2 class="interviewee">Bob: [00:00:03]</h2>
<p>Sure go ahead.</p>

I'd like the paragraph to be a particular colour based on the class of the preceeding heading. Is there a way to do this, as it would make the html markup significantly simpler.

Answer 1

You can use following-sibling combinator: +

h2.interviewer + p { /* style goes here */ }

Answer 2

Sure:

h2.interviewer + p {
    color: red;
}

I'm not entirely sure how to do it with multiple paragraphs though. Perhaps if you encased the entire set of paragraphs in a div:

<h2 class="interviewer">Alice: [00:00:00]</h2>
<div>
    <p>Is it ok if I ask you a question now?</p>
    <p>More text here.</p>
</div>

<h2 class="interviewee"> class="interviewee">Bob: [00:00:03]</h2>
<div>
    <p>Sure go ahead.</p>
</div>

You could then do this:

h2.interviewer + div {
    color: red;
}

Answer 3

By the way, there are better HTML elements for displaying a conversation, like the newly introduced <dialog> tag

http://www.quackit.com/html_5/tags/html_dialog_tag.cfm