Может ли CSS дать мне стиль абзаца, основанный на предыдущем классе заголовка?

Question

Итак, я хочу установить некоторые правила css для стенограмм интервью. Формат, который я имею в виду, выглядит примерно так:

<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>

Я бы хотел, чтобы абзац был определенного цвета в зависимости от класса предыдущего заголовка. Есть ли способ сделать это, так как это сделает разметку html значительно проще.

Answer 1

Вы можете использовать следующий комбинатор: +

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

Answer 2

Кстати, для отображения разговора есть более удобные элементы HTML, например, недавно введенный тег <dialog>

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

UPDATE:

Элемент <dialog> никогда не превращался в HTML5. Его не существует.

Answer 3

Sure:

h2.interviewer + p {
    color: red;
}

Я не совсем уверен, как это сделать с несколькими параграфами. Возможно, если вы заключили весь набор абзацев в 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>

Затем вы можете сделать это:

h2.interviewer + div {
    color: red;
}