Search code examples
csshtml-heading

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

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.

Solution

  • You can use following-sibling combinator: +

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