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

もちろん：

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

Answer 3

ちなみに、新しく導入された<dialog>タグのように、会話を表示するためのより優れた HTML 要素があります。

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

アップデート：

この<dialog>要素は HTML5 にはなりませんでした。それは存在しない。